ECHarts.js
（⼀）EChart.js 简单⼊门
最近有⼀个统计的项⽬要做，在前端的数据需要⽤图表的形式展⽰。⽹上搜索了⼀下，发现有⼏种统计图库。
MSChart
这个是Visual Studio⾥的⾃带控件，使⽤⽐较简单，不过数据这块需要在后台绑定。
ichartjs
是⼀款基于HTML5的图形库。使⽤纯javascript语⾔, 利⽤HTML5的canvas标签绘制各式图形。⽀持饼图、环形图、折线图、⾯积图、柱形图、条形图等。
Chart.js
也是⼀款基于HTML5的图形库和ichartjs整体类似。不过Chart.js的教程⽂档没有ichartjs的详细。不过感觉在对于移动的适配上感觉⽐ichartjs要好⼀点。
ECharts.js
这是我准备在这个项⽬中使⽤的图形库，这也是⼀款基于HTML5的图形库。图形的创建也⽐较简单，直接引⽤Javascript即可。使⽤这个库的原因主要有三点，⼀个是因为这个库是百度的项⽬，⽽且⼀直有更新，⽬前最新的是EChart 3；第⼆个是这个库的项⽬⽂档⽐较详细，每个点都说明的⽐较清楚，⽽且是中⽂的，理解⽐较容易；第三点是这个库⽀持的图形很丰富，并且可以直接切换图形，使⽤起来很⽅便。
官⽹：
下⾯来简单说明⼀下EChart.js的使⽤。
第⼀步，引⽤Js⽂件
<script type="text/javascript" src="js/echarts.js"></script>
js⽂件有⼏个版本，可以根据实际需要引⽤需要的版本。
第⼆步，准备⼀个放图表的容器
<div id="chartmain" ></div>
第三步，设置参数，初始化图表
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
tooltip:{},
legend:{
data:['⽤户来源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'访问量',
type:'line',
data:[500,200,360,100]
}]
};
/
/初始化echarts实例
var myChart = echarts.ElementById('chartmain'));
//使⽤制定的配置项和数据显⽰图表
myChart.setOption(option);
</script>
这样简单的⼀个统计图表就出来了，官⽹使⽤的柱状图，我这边改⽤了折线图。
柱状图其实也很简单，只要修改⼀个参数就可以了。把series⾥的type 值修改为"bar"
饼图和折线图、柱状图有⼀点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采⽤value 和name对应的形式。
var option = {
title:{
text:'ECharts 数据统计'
},
series:[{
name:'访问量',
type:'pie',
radius:'60%',
data:[
{value:500,name:'Android'},
{value:200,name:'IOS'},
{value:360,name:'PC'},
{value:100,name:'Ohter'}
]
}]
};
、
Echarts 数据绑定
简单的统计表已经可以⽣成，不过之前图标数据都是直接写在参数⾥⾯的，⽽实际使⽤中，我们的数据⼀般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的⽅法。
绑定多组数据
很多时候需要展⽰的数据不单单是⼀组数据，很多时候会进⾏⼀个数据对⽐。这个时候只需要在series中增加⼀组数据，legend中添加⼀下这个数据组的name
<!DOCTYPE html>
<html>
<head>
<title>ECharts.js 数据绑定</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div id="chartmain" ></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
legend:{
data:['访问量','⽤户量']
},
xAxis:{
data:["Android","IOS","PC","Other"]
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:[180,420,333,83]
},
{
name:'⽤户量',
type:'bar',
data:[125,330,230,60]
}
]
};
//初始化echarts实例
var myChart = echarts.ElementById('chartmain'));
//使⽤制定的配置项和数据显⽰图表
myChart.setOption(option);
</script>
</body>
</html>
（⼆）数据异步加载
EChart中实现异步数据的更新⾮常简单，在图表初始化后不管任何时候只要通过 jQuery 等⼯具异步获取数据后通过setOption填⼊数据和配置项就⾏。
绑定数据的⽅式有两种，⼀种是写写好⼀些图表参数，然后数据留空，然后在异步读取数据的时候，绑定数据。还有⼀种就是直接异步读取数据的时候同时设置图表参数和数据绑定。
⾸先我们准备⼀份需要加载的数据⽂件data.json，数据内容：
{"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}
第⼀种异步加载的时候设置图表参数和绑定数据
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.ElementById('chartmain'));
//异步加载的配置项和数据显⽰图表
$.get('data.json').done(function (data) {
data = eval('('+data+')');
myChart.setOption({
title:{
text:'ECharts 异步加载数据'
},
tooltip:{},
legend:{
data:['访问量']
},
xAxis:{
data:data.name
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:data.data
}
]
})
})
</script>
第⼆种先设置图表参数，后绑定数据
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.ElementById('chartmain'));
//设置图标配置项
myChart.setOption({
title:{
text:'ECharts 异步加载数据'
},
tooltip:{},
legend:{
data:['访问量']
},
xAxis:{
data:[]
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:[]
}
]
})
/
/异步加载数据
$.get('data.json').done(function (data) {
data = eval('('+data+')');
myChart.setOption({
xAxis:{
data:data.name
},
series:[
{
//根据名字对应到相应的系列
name:"访问量",
data:data.data
}
]
})
})
</script>
因为是异步加载，所以有时候数据加载会慢，或者延迟。在数据没有加载前，图表这样的。⾯对这样的图表，肯定会觉得这是没有数据吗，还是图表有问题.对于这块ECharts增加了⼀个加载动画。
Loading动画加载
//打开loading动画
myChart.showLoading();
//加载数据函数
function bindData(){
//为了效果明显，我们做了延迟读取数据
setTimeout(function(){
//异步加载数据
$.get('data.json').done(function (data) {
//获取数据后，隐藏loading动画
myChart.hideLoading();
data = eval('('+data+')');
myChart.setOption({
xAxis:{
data:data.name
},
series:[
{
//根据名字对应到相应的系列
name:"访问量",
data:data.data
}
]
})
})
},2000)
}
bindData();
数据动态实时更新
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.ElementById('chartmain'));
var base = + new Date(2017,3,8);
var oneDay = 24*3600*1000;
var date = [];
var data = [Math.random()*150];
var now = new Date(base);
var day = 30;
function addData(shift){
now = [FullYear(),Month()+Date()].join('/');
date.push(now);
data.push((Math.random()-0.5)*10+data[data.length-1]);
if (shift) {
console.log(data);
date.shift();
data.shift();
}
now = new Date(+new Date(now)+oneDay);
}
for (var i = 0; i < day; i++) {
addData();
}
//设置图标配置项
myChart.setOption({
title:{
text:'ECharts 30天内数据实时更新'
},
xAxis:{
type:"category",
boundaryGap:false,
data:date
},
yAxis:{
boundaryGap:[0,'100%'],
type:'value'
},
series:[{
name:'成交',
type:'line',
smooth:true, //数据光滑过度
symbol:'none', //下⼀个数据点
stack:'a',
areaStyle:{
normal:{
color:'red'
}
},
data:data
}]
})
setInterval(function(){
addData(true);
myChart.setOption({
xAxis:{
data:date
},
series:[{
name:'成交',
data:data
}]
});
},1000)
</script>
（三）ECharts.js 交互组件
ECharts.js有很多的交互组件，⼀般经常⽤到的组件有这些：
  title：标题组件，包含主标题和副标题。
  legend：图例组件，展现了不同系列的标记(symbol)，颜⾊和名字。可以通过点击图例控制哪些系列不显⽰。
  xAxis：直⾓坐标系 grid 中的 x 轴，⼀般情况下单个 grid 组件最多只能放左右两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防⽌同个位置多个 x 轴的重叠。
  yAxis：直⾓坐标系 grid 中的 y 轴，⼀般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防⽌同个位置多个 Y 轴的重叠。
  tooltip：提⽰框组件，就是当你的⿏标悬浮在图表上的提⽰内容。
  toolbox：⼯具栏组件。内置有导出图⽚、数据视图、动态类型切换、数据区域缩放、重置五个⼯具。
  series：系列列表。我理解为数据列表。这⾥可以定义每组数据内容，以及数据的展现形式。
  timeline：提供了在多个ECharts option 之间进⾏切换、播放等操作的功能。
  dataZoom:⽤于区域缩放，从⽽能⾃由关注细节的数据信息，或者概览数据整体，或者去除离点的影响。
  ....
官⽅给出的案例是dataZoom组件。它是⽤于区域缩放，从⽽能⾃由关注细节的数据信息，或者概览数据整体，或者去除离点的影响。主要是对数轴（axis）进⾏操作。
toolbox组件
其中很多组件其实我们都会⽤到，不过使⽤的都是⼀些基本配置。⽐如title组件，往往只写⼀个text 值。legend，会⼀些每个系列数据的name等等。
因为后⾯项⽬需要将图表保存为图⽚，以及⼀种数据多种展现形势，所以就研究⼀下toolbox组件的使⽤。
toolbox参数：
show:⼯具栏默认是隐藏的。所以⼀定要设置show为true显⽰出来。
orient:⼯具栏的的布局⽅向，可选值有horizontal(横向)和vertical（竖向）。默认值是horizontal
itemSize:⼯具栏的⼤⼩。默认值是15。
itemGap:⼯具栏每个⼯具之间的距离，默认值是10。
showTitle:⿏标悬浮的是否显⽰每个⼯具的说明，默认是true。
feature：这个是设置⼯具栏⾥要显⽰哪些⼯具，以及这些⼯具的样式等。
  默认的插件⼯具：
    savaAsImage：保存图⽚
    restore：还原配置
    dataView：数据视图⼯具，可以展现图表所⽤的数据，并且可以编辑数据，再将编辑后的数据展⽰出来。同时也可以设置为数据为只读。
      optionToContent：并且可以通过对显⽰出来的数据进⾏排版编辑，以HTML展现。
      optionToOption：在使⽤ optionToContent 的情况下，如果⽀持数据编辑后的刷新，需要⾃⾏通过该函数实现组装 option 的逻辑。
    dataZoom：数据区域缩放。⽬前只⽀持直⾓坐标系的缩放。
      xAxisIndex、yAxisIndex：分别控制xAxis和yAxis轴的缩放。
  除了使⽤默认的⼯具意外，我们还可以根据需求⾃定义⼯具。需要注意的是，每个⾃定义的⼯具，名称必须以“my”打头。在onclick函数中编写需要进⾏的操作。
toolbox:{
show:true,
orient:'vertical',
feature:{
magicType:{type:['line','bar']},
restore:{},
jquery在项目里是干啥的saveAsImage:{},
dataZoom:{
show:true,
xAxisIndex:[0,3]
},
myTool1:{
show:true,
title:'⾃定义⼯具⼀',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5            onclick:function(){
alert("this is myTool1");
}
},
myTool2:{
show:true,
title:'⾃定义⼯具⼆',
icon: 'image://echarts.baidu/images/favicon.png',
onclick:function(){
alert("this is myTool2");
}
}
}
}
magicType：设置可切换的图表类型。⽬前⽀持的只有4种，line折线图、bar柱状图、stack堆叠模式、tiled平铺模式。
brush：选框组件的控制按钮。
iconStyle：公⽤的icon样式设置
zlevel：所有图形的zlevel值。zlevel⽤于Canvas分层。
z：所有图形的z值。z不会创建Canvas层。⽐zlevel等级低。
left、top、right、bottom、width、height:⼯具栏的样式，边距设置。
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.ElementById('chartmain'));
var option = {
title:{
text:"马云和马化腾期末成绩图",
subtext:'本图表纯属虚构',
},
anmation:false,
legend:{
data:["马云成绩","马化腾成绩"],
left:'50%',
top:5
},
tooltip:{
trigger:"axis"
},
xAxis:{
type:'category',
boundaryGap:false,
data:['语⽂','数学','英语','历史','体育','⽣物','化学']
},
yAxis:{
type:'value',
axisLabel:{
formatter:'{value}分'
},
min:20
},
toolbox:{
show:true,
orient:'vertical',
itemSize:20,
itemGap:20,
feature:{
dataView:{
readOnly:true,
backgroundColor:'#f5f5f5',
optionToContent:function(opt){
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table ='<table ><tbody><tr>'
+'<td>学⽣</td>'
+'<td>'+series[0].name+'</td>'
+'<td>'+series[1].name+'</td>'
+'</tr>';
for (var i = 0; i < axisData.length; i++) {
table +='<tr>'
+'<td>'+axisData[i]+'</td>'
+'<td>'+series[0].data[i]+'</td>'
+'<td>'+series[1].data[i]+'</td>'
+'</tr>'
}
table +='</tbody></table>';
return table;
}
},
dataZoom:{
show:true,
xAxisIndex:[0,3]
},
magicType:{type:['line','bar','stack','tiled']},
restore:{},
saveAsImage:{},
myTool1:{
show:true,
title:'⾃定义⼯具⼀',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.0
09,0-5.448,2.                    onclick:function(){
alert("this is myTool1");
}
},
myTool2:{
show:true,
title:'⾃定义⼯具⼆',
icon: 'image://echarts.baidu/images/favicon.png',
onclick:function(){
alert("this is myTool2");
}
}
},
},
series:[
{
name:'马云成绩',
type:'line',
data:[90,88,75,82,95,89,97],
markLine:{
data:[{type:'average',name:'平均值'}]
},
markPoint:{
data:[
{type:'max',name:'最⾼分'},
{type:'min',name:'最低分'}
]
}
},
{
name:'马化腾成绩',
type:'line',
data:[55,45,99,60,35,45,74],
markLine:{
data:[{type:'average',name:'平均值'}]
},
markPoint:{
data:[
{type:'max',name:'最⾼分'},
{type:'min',name:'最低分'}
]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。