echarts2.0修改markpoint及markline的屬性(markpoint顯示隱藏,並且實現自定義圖例)
阿新 • • 發佈:2019-02-14
//圖例線條顏色,按順序來,不夠需要新增
var gar_colors = ['#CC6666', '#FFA026', '#FF0200', '#666633', '#FF00CC', '#CC6633', '#9933FF', '#CC33CC', '#33CCFF', '#003399', '#9999FF', '#FFCC00', '#CC99FF', '#FF3300', '#3333FF', '#339900', '#FF9900'];
var gobj_chart;
//資料
var datas = '[{"name":"這是第一條線","aitds": "16408","datas": [[1,2],[2,3],[3,5],[4,15],[5,10]]},{"name":"這是第2條線","aitds": "16405","datas": [[1,3],[2,1],[3,4],[4,10],[5,15]]}]' ;
//頁面載入完成執行
$(function () {
var series = [];
var dataAr = JSON.parse(datas);
var legendStr = "";
for (var i = 0; i < dataAr.length; i++) {
var lineObj = {};
var dataObj = dataAr[i];
lineObj.name = dataObj.name;
lineObj.itemStyle = {normal: {color: gar_colors[i]}};
//用來作為唯一識別的自定義屬性
lineObj.id = dataObj.aitds;
lineObj.type = "line";
lineObj.data = dataObj.datas;
lineObj.markPoint = {data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}]};
series.push(lineObj);
//組織自定義圖例
legendStr += "<ul title='" + lineObj.name + "' onmouseover='highLightData(\"" + lineObj.id + "\",\"#f1394e\");' onmouseout='highLightData(\"" + lineObj.id + "\",\"" + gar_colors[i] + "\");' onclick='refreshData(\"" + lineObj.id + "\")'>";
legendStr += "<li style='background: " + gar_colors[i] + ";' ></li>"
legendStr += "<span style='display: block'>" + lineObj.name + "</span>"
legendStr += "</ul>";
}
//自定義legend 圖例
$("#legend_div").html(legendStr);
//資料組織
var option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
calculable: true,
xAxis : [
{
type : '',
splitNumber:5
}
],
yAxis : [
{
type : 'value'
}
],
series: series
};
var charHtmlObj = document.getElementById('mainA');
//初始化echarts
gobj_chart = echarts.init(charHtmlObj);
gobj_chart.setOption(option);
});
//修改markPoint大小,從而做到顯示隱藏
function refreshData(paName) {
//alert(paName);
//更新資料
var option = gobj_chart.getOption();
for (var i = 0; i < option.series.length; i++) {
//alert(option.series[i].id);
if (option.series[i].id == paName) {
for (var j = 0; j < option.series[i].markPoint.data.length; j++) {
if (option.series[i].markPoint.data[j].symbolSize == 0) option.series[i].markPoint.data[j].symbolSize = 50;
else option.series[i].markPoint.data[j].symbolSize = 0;
}
}
}
gobj_chart.setOption(option);
}
//修改markPoint大小,從而做到顯示隱藏
function highLightData(paName, paColor) {
//更新資料
var option = gobj_chart.getOption();
for (var i = 0; i < option.series.length; i++) {
if (option.series[i].id == paName) {
option.series[i].itemStyle.normal.color = paColor;
}
}
gobj_chart.setOption(option);
}