项目使用Echarts图表，感觉还不错，记录下使用心得，做为备份和共享。
说明：
1.本文使用的echarts版本为3.2.3。
2.本文只涉及echarts折线图、柱状图、饼图。
3.echats.js官方下载地址：http://echarts.baidu.com/download.html
4.echats各配置项说明请查看官方文档：http://echarts.baidu.com/option.html#title
正文：
1.如何创建echarts图例？
1.1.创建html元素，注意：width和height必须要设定，否则无图。
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="chart" style="width: 600px; height: 400px;"></div>1.2.javascript绘制图形(柱状图)
1.2.1 初始化，注意：要用原生的javascript函数获取dom对象，jquery函数$("#chart")获取的是jquery对象，无效。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
1.2.2 参数设定
var option = {
title: {
text: '服务渠道收件堆叠图',//大标题
subtext:'数据来自...'//副标题
},
tooltip: {//提示框组件
trigger: 'axis', //触发类型,axis-坐标轴触发，主要在柱状图，折线图
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {//图例
data: []//图例的数据数组
},
grid: {//直角坐标系内绘图网格
left: '3%', //grid 组件离容器左侧的距离。
right: '4%',
bottom: '3%',
containLabel: true //grid 区域是否包含坐标轴的刻度标签
},
xAxis: [//直角坐标系 grid 中的 x 轴
{
type: 'category', //坐标轴类型:'category' 类目轴，适用于离散的类目数据
data: [] //x轴刻度
}
],
yAxis: [
{
type: 'value' //数值轴
}
],
series: [
{
name: '渠道1收件', //系列名称，用于tooltip的显示，legend 的图例筛选
type: 'bar', //bar-柱状图
stack: '渠道', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
barMaxWidth: '50%',//柱条的最大宽度，不设时自适应
data: [],
},
{
name: '渠道2收件',
type: 'bar',
stack: '渠道',
data: [],
}
]
};1.2.3 参数绑定
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);1.2.4 异步加载
// 异步加载
// 显示loading 的动画来提示用户数据正在加载
myChart.showLoading();
$.get('stack_bar.json').done(function (data) {
// 隐藏loading 的动画
myChart.hideLoading();
//填充图表数据
myChart.setOption({
xAxis: {
data: data.x
},
series: [{
// 根据index或name,对应到相应的系列
// yAxisIndex:0,
name: '渠道1收件',
data: data.y1
},{
// yAxisIndex:1,
name: '渠道2收件',
data: data.y2
}
});1.2.5 附stack_bar.json
{
"x":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"y1":[0,0,0,0,0,0,0,0,0,18,0,0],
"y2":[0,0,0,0,0,0,0,0,0,0,0,0],
"y3":[0,0,0,0,0,0,0,0,0,0,0,0],
"y4":[0,0,0,0,0,0,0,0,0,18,0,0]
}2.添加效果
2.1 显示数据值
2.1.1 折线图、柱状图：option-series-label属性
series: [
{
name: '渠道1收件量',
type: 'bar',
stack: '渠道',
barMaxWidth: '50%',
data: [],
label: {
normal: {
show: true, //显示数据值
position: 'insideTop',//图形上方
}
}
},2.1.2 饼图 option-itemStyle-label属性
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine: {show: true}
}
}2.2 柱状堆叠图显示值重叠 option-series-label-formatter属性
label: {
normal: {
show: true, //显示数据值
position: 'insideTop',//图形上方
formatter: function (params) {
return labelFilter(params);
}
}
}
//echarts ：label过滤显示 value=0不显示
function labelFilter(params) {
if (params.value && params.value != 0) {
return params.value;
} else {
return false;
}
}2.3 改变图例系列颜色 option-color属性
option = {
//依次循环从该列表中取颜色作为系列颜色
//默认颜色方案:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',
// '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
color: ['#c23531', '#4134DB', '#3398DB'],
tooltip: {
.....
}
}
}2.4 1事件
2.4.1 click事件
myChart.on('click', function (params) {
/* console.info(params.name);
console.info(params.data);*/
//...your function
$j.get('url').done(function (data) {
...your syn function
});
});2.5 不同坐标轴多个网格 option-grid属性
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var dataAll = [
[ [ 10.0, 8.04 ], [ 8.0, 6.95 ], [ 13.0, 7.58 ], [ 9.0, 8.81 ],
[ 11.0, 8.33 ], [ 14.0, 9.96 ], [ 6.0, 7.24 ],
[ 4.0, 4.26 ], [ 12.0, 10.84 ], [ 7.0, 4.82 ],
[ 5.0, 5.68 ] ],
[ [ 10.0, 9.14 ], [ 8.0, 8.14 ], [ 13.0, 8.74 ], [ 9.0, 8.77 ],
[ 11.0, 9.26 ], [ 14.0, 8.10 ], [ 6.0, 6.13 ],
[ 4.0, 3.10 ], [ 12.0, 9.13 ], [ 7.0, 7.26 ],
[ 5.0, 4.74 ] ],
[ [ 10.0, 7.46 ], [ 8.0, 6.77 ], [ 13.0, 12.74 ],
[ 9.0, 7.11 ], [ 11.0, 7.81 ], [ 14.0, 8.84 ],
[ 6.0, 6.08 ], [ 4.0, 5.39 ], [ 12.0, 8.15 ],
[ 7.0, 6.42 ], [ 5.0, 5.73 ] ],
[ [ 8.0, 6.58 ], [ 8.0, 5.76 ], [ 8.0, 7.71 ], [ 8.0, 8.84 ],
[ 8.0, 8.47 ], [ 8.0, 7.04 ], [ 8.0, 5.25 ],
[ 19.0, 12.50 ], [ 8.0, 5.56 ], [ 8.0, 7.91 ],
[ 8.0, 6.89 ] ] ];
var markLineOpt = {
animation : false,
label : {
normal : {
formatter : 'y = 0.5 * x + 3',
textStyle : {
align : 'right'
}
}
},
lineStyle : {
normal : {
type : 'solid'
}
},
tooltip : {
formatter : 'y = 0.5 * x + 3'
},
data : [ [ {
coord : [ 0, 3 ],
symbol : 'none'
}, {
coord : [ 20, 13 ],
symbol : 'none'
} ] ]
};
// 指定图表的配置项和数据
option = {
title : {
text : 'Anscombe\'s quartet',
x : 'center',
y : 0
},
//注意这里将图表分成4了块区域 1-[x,y] 2-[x,y2] 3-[x2,y] 4[x2,y2]
//只不过能用的只有1-[x,y] 4[x2,y2]
grid : [ {
x : '7%',
y : '7%',
width : '38%',
height : '38%'
}, {
x2 : '7%',
y2 : '7%',
width : '38%',
height : '38%'
}],
tooltip : {
formatter : 'Group {a}: ({c})'
},
xAxis : [ {
gridIndex : 0, //从0开始计数
min : 0,
max : 20
}, {
gridIndex : 1,
min : 0,
max : 20
} ],
yAxis : [ {
gridIndex : 0,
min : 0,
max : 15
}, {
gridIndex : 1,
min : 0,
max : 15
}],
series : [ {
name : 'I',
type : 'scatter',
xAxisIndex : 0,
yAxisIndex : 0,
data : dataAll[0],
markLine : markLineOpt
}, {
name : 'II',
type : 'scatter',
xAxisIndex : 1,
yAxisIndex : 1,
data : dataAll[1],
markLine : markLineOpt
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
未完，待续
