echarts学习使用心得
echarts是一个前端图表的框架。是比较容易上手（我本来是专做后台，由于公司组织架构问题，才开始接触前端）并且适用面广（图表类型非常丰富）也非常实用（很多网站都有使用到）的框架。
基本的使用流程在网上有很多很多的文章了，在这里我主要就是分享一下我自己在使用过程中碰到的一些问题和解决方法。
首先，用的最多的一般还是折线图，柱状图和饼图。
在我用到折线图的时候，碰到的难点主要就是多Y轴和联动。
主要的核心代码：
多Y轴：
for (var n = 0; n < series.length; n++) {
var seriesData = new Array();
var yAxisItem;
var firstItems = rows[0].chartItems;
if (n === 0) {
yAxisItem = {
show: true,
type: 'value',
name: firstItems[n].unit,
seriesName: firstItems[n].dataitemName,
position: 'left',
splitArea: {show: true},
offset: n / 2 * 50
};
} else {
if (n % 2 === 0) {
yAxisItem = {
show: false,
type: 'value',
name: firstItems[n].unit,
seriesName: firstItems[n].dataitemName,
position: 'left',
splitArea: {show: false},
offset: n / 2 * 50
};
} else {
yAxisItem = {
show: false,
type: 'value',
name: firstItems[n].unit,
seriesName: firstItems[n].dataitemName,
position: 'right',
splitArea: {show: false},
offset: (n - 1) / 2 * 50
};
}
}
yAxis.push(yAxisItem);
}联动：
myChart2.on('datazoom', function () {
ec.connect([myChart2, timeChart]);
});这里的datazoom是代表表格内容发生改变时，触发联动事件。如果legend相同，点击后会触发联动表格都发生变化，例如我的需求是只需要当数据内容发生变化时触发联动，所以我需要点击legend时，取消联动。代码为：
myChart.on('legendselectchanged', function (obj) {
myChart.group = null;
}还有就是全选功能，也算一个小功能点：
myChart.on('legendselectchanged', function (obj) {
var option = myChart.getOption();
var selected = obj.selected;
var selectedName = obj.name;
var legend = option.legend[0];
if (selectedName !== undefined && selectedName === '全选') {
if (selected !== undefined) {
var object = new Object();
if (selected['全选'] === true) {
for (var name in legend.data) {
object[legend.data[name]] = true;
}
} else {
for (var name2 in legend.data) {
object[legend.data[name2]] = false;
}
}
legend.selected = object;
}
}
option.legend[0] = legend;
myChart.setOption(option);
});而在使用柱状图的时候，有几点需要注意。
1、多legend时，柱条是平铺还是叠加，效果如下图
这里最核心的代码：
series : [
{
name:'直接访问',
type:'bar',
stack: '广告',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'邮件营销',
type:'bar',
stack: '广告',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'bar',
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'搜索引擎',
stack: '广告',
type:'bar',
data:[862, 1018, 964, 1026, 1679, 1600, 1570]
}
]关键就在于stack的内容是否相同，相同则叠加，否则则平铺。也支持同时存在。
饼状图是三个中使用起来最为简单的一种，因为其没有x，y轴。
我在使用过程中，稍微复杂点的地方便是鼠标的悬停显示文字内容自定义，效果如下
红字的自定义代码：
legend: {
type: 'scroll',
orient: 'vertical',
x: 'left',
y: 'center',
height: '120',
formatter: function (name) {
return name + " " + itemMap[name];
},
data: legendData
}这里的itemMap便是我自己自定义的一个map集合，key为legend的name值，value是显示内容
还有比较难的点就是当legend过多时，鼠标悬停内容过多的时候会超出图表范围时。这里我的处理是自定义tooltip显示内容的格式，实现适合图表大小的分行模式。
效果如下
代码：
tooltip: {
trigger: 'axis',
confine: true,
formatter: function (params) {
var result = '';
result += params[0].name + '
';
var size = params.length;
if (size > 6) {
var flag = Math.ceil(size / 6);
for (var j = 0; j < 6; j++) {
for (var i = 1; i <= flag; i++) {
var item = params[i + j * flag - 1];
if (item !== undefined && item !== null) {
result += '' + item.seriesName + ' ' + ' ' + item.value + ' ' + ' ';
}
}
result += '
';
}
} else {
params.forEach(function (item) {
result += '' + item.seriesName + ' ' + ' ' + item.value + '
';
});
}
return result;
}
}在echarts的使用过程中会碰到很多小问题，多看api多尝试便能解决。