ECharts - 数据图表的使用

ECharts

关于ECharts(ECharts

ECharts 是百度提供的一款开源、功能强大的数据可视化产品。
主要提供折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图。

特性

  • 拖拽重计算
  • 数据视图
  • 多图联动
  • 值域漫游
  • 炫光特效
    ……

准备

下载 ECharts 静态包【echarts-2.2.7】,也可以直接使用链接进行加载。建议下载静态包,避免官方 更新新特性 时造成图表无法正常呈现的问题。

使用

ECharts的使用很简单,以官方提供的为例分为下面几步:

1. 新建一个 test.html 并放置一个 div 来承载图表:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="main" style="height: 400px;"></div>
</body>
</html>

2. 引入 echarts.js

1
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

3. 添加模块加载器配置 echarts 和所需图表的路径(相对路径为从当前页面链接到echarts.js),引入图表文件见引入 ECharts2

1
2
3
4
5
6
7
8
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
</script>

4. 动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成,option见API & Doc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);

5. 最后的样子:

重点- option 部分相关配置说明

用户可以在 option 配置里自定义图标的样式。

  • title 标题:

    1
    2
    3
    4
    title : {
    text: '某地区蒸发量和降水量', //文本
    subtext: '纯属虚构'
    }
  • toolbox 便捷的工具:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    toolbox: {
    show : true, //是否显示工具栏
    feature : { //特性
    mark : {show: true}, //辅助线
    dataView : {show: true, readOnly: false}, //数据视图
    magicType : {show: true, type: ['line', 'bar']}, //切换视图(折线/柱状)
    restore : {show: true}, //重新加载视图
    saveAsImage : {show: true} //保存该视图为图片
    }
    }
  • series 数据列表:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    series : [
    {
    name:'蒸发量', //名称
    type:'bar', //视图类型
    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], //数据
    markPoint : { //标记
    data : [
    {type : 'max', name: '最大值'}, //最大值,name为显示文本
    {type : 'min', name: '最小值'} //最小值,name为显示文本
    ]
    },
    markLine : { //标线
    data : [
    {type : 'average', name: '平均值'} //平均值,name为显示文本
    ]
    }
    }
  • xAxis : X 轴

  • yAxis : Y 轴
  • legend :
    1
    2
    3
    4
    5
    legend: {
    orient : 'vertical', //方向“垂直”,默认从左向右横向排列
    x : 'left', //位于 X 轴左侧,默认顶部居中
    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] //显示文本
    }

更多配置可在【实例】中点开测试。

参考

如果觉得有用,您的支持将鼓励我继续创作!