基本概念：
title(标题)
toolbox(工具箱)
tooltip(提示)
lengend(图例)
dataZoom(数据缩放区域)
dataRange(值域)
grid(绘图网络)
axis(坐标轴)
legend: {
show: '',
icon:"circle", //更改图列的默认样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'）
selected:{
"全部":false //图例为‘全部’的一项默认置灰
}
},
如果只想改某个图例，可以
data: [{
name: '系列1',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}]ECharts 提供的标记类型包括
'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。
可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
图例的点击事件
mainChart.on('legendselectchanged', function(params) {
let legends = params.selected;
let selectedArr = toolObj.findKeys(legends);
console.log(selectedArr) //被选中的图例数组
})
如果想让纵图例单位变化，记得改变，
yAxis.axisLabel.formatte =
function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + '万'; }
else if (value >= 10000000) {
value = value / 10000000 + '千万'; }
return value;
}
ajax代码如下：
//年报表
function yearData(year) {
let url = '${ctx}/xxxAjax.htm';
$.ajax({
url: url,
type: "post",
data: {"year": year},
success: function (data) {
if (data.code == '1') {
myChart_yeardata.hideLoading();
option = data.data;
if (option && typeof option === "object") {
option.yAxis.axisLabel.formatter =
function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + '万'; }
else if (value >= 10000000) {
value = value / 10000000 + '千万'; }
return value;
}
myChart_yeardata.setOption(option, true);
if (openEvent) {
myChart_yeardata.on('click', function (params) {//点击事件
let selectMonth = params.name.substring(0, params.name.lastIndexOf("月"));
//别的ajax事件，联动报表
monthData_line(year, selectMonth);
monthData_circle_shop(year, selectMonth);
monthData_circle_city(year, selectMonth);
monthDataTarget(year,selectMonth);
dayData(year, selectMonth, day);
dayData_circle_shop(year, selectMonth, day);
dayData_circle_city(year, selectMonth, day);
month = selectMonth;
});
}
}
} else {
alert(data.msg);
}
}
});
}
图例分页显示：
legend. type="scroll";不配置默认显示全部，配置以后会根据页面大小自动跳转分页显示
默认让某些不显示：
legend: {
show: '',
icon:"roundRect", //更改图列的默认样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'）
selected:{
"上海新天地":true, //图例为‘全部’的一项默认置灰
"上海环贸":false,
......
}
},