现在位置首页 / Jquery/Jquery Mobile /正文

2018echarts使用总结

作者: IT小兵 | 2018年1月29日| 热度:℃ | 评论: |参与:

项目中需要实现数据可视化,在前辈的推荐之下,最终选取了echarts来实现,在此关于echarts的使用进行总结,最终代码分享我的github

关于echarts

echarts是百度推出的,使用JavaScript实现的开源可视化库,可以提供直观、可定制化的数据可视化图表,包括折线图、柱状图、散点图、地图和饼图等,点击跳转主页

使用

需求

使用之前先谈需求:使用echarts的话,需求基本上都是为了实现数据可视化,那么数据可视化牵扯到一个怎么展示的问题,就echarts功能而言,展示将通过可视化图表进行,也就是,这里的需求可归为将某数据使用echarts以图表(假定为柱状图)的形式呈现。

实现

一般情况,我会直接打开echart官方实例, 选取相应的实例,我们以最简单的折线图为例。可以看到对应的JS代码为:

option = {
    xAxis: {        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line'
    }]
};

那么,这里的各种变量分别代表的是什么含义呢?当然可以在此修改部分数据,查看折线图的变化,echarts图形化的呈现是通过setOption配置方法来实现的,点击详情,这里对各种配置做出详尽的介绍。

简单实例

那么在日常开发环境中如何实现呢?
首先,创建first.html文件,并编写:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>echarts使用</title>  
    <link rel="stylesheet" href="css/style.css">
    <script src="js/echarts.min.js"></script> </head><body>
    <div class="content">
        <div class="title">
            echarts使用案例        </div>
        <div class="chart">
            <div id="firstchart">
            </div>
        </div>
    </div>
 <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('firstchart'));    var option = {
        title: {
            text: '一周温度变化',
            left: 'center',
            top: '1%',
            textStyle: {
                color: 'white',
                fontSize:16,
            }
        },
        xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
            axisTick: {
                alignWithLabel: true
            },
            axisLine:{
                lineStyle: {
                    color:'white',
                }
            },
        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            axisLine:{
                lineStyle: {
                    color:'white',
                }
            },
        },
        series: [{
            data: [11, 12, 15, 5, 8, 14, 9],
            type: 'line'
        }]
    };
    myChart.setOption(option); </script></body></html>

编写对应的css样式文件,打开浏览器就可看到对应的折线图。

定制

在平时的使用中,其它需求势必存在,而echarts本身也提供了这种定制化配置。下面关于一些常见需求举例说明:

添加图注

就上述折线图而言,气温变化一般可分为最高温度变化和最低温度变化,也就意味着会有两条折线。为了更直观表现,这里可使用图注来说明,在配置项中legend属性:

legend:{  
  right:0,  
    top:3,   
     textStyle:{    
         fontSize:12,   
              color:'#FFF',
    },    
    data:['最高温度变化']
},

并设置了图注属性。

将坐标名旋转

由于图标可占用的空间有限,加之坐标名字符较长,就导致坐标名显示不全的情况,可以将做表明改为斜体展示(旋转角度),通过在xAxis中添加axisLabel属性来实现:

xAxis : [
    {    axisLabel:{        interval:0,        rotate:45,//倾斜度 -90 至 90 默认为0
        },
    }
]

设置坐标网格背景

为了界面的美观,可以在图表中绘制网格,并设置网格背景。首先,在xAxis下添加:

splitLine:{    show:true,    lineStyle:{        color: 'white',        width:1,        type: 'solid'
    }
},

这样,绘制了网格,然后,在yAxis中添加:

splitArea:{    show:true,
    areaStyle:{
        color:['#6a6f71', '#5b6062'],
    },
},

即可实现网格背景,如下图所示:

点击阅读本文所属分类的更多文章: Jquery/Jquery Mobile 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询