基本概念:
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,
......
}
},