基本概念：
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,
......
}
},
擴大點擊事件範圍：
默認情況是必須點到某一個節點上纔會觸發click事件
爲了讓點擊上圖所示區域就有點擊事件，則需要修改js如下
myChart_yeardata.showLoading({
text: '稍等片刻,精彩馬上呈現...',
effect: 'whirling'
});
//月報表-折線
function monthData_line(year, month) {
myChart_monthdata_line.off('click');
let url = '${ctx}/pages/Coffee/getAjax.htm';
$.ajax({
url: url,
type: "post",
data: {"year": year, "month": month},
success: function (data) {
if (data.code == '1') {
//隱藏動畫加載效果
myChart_monthdata_line.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_monthdata_line.setOption(option, true);
if (openEvent) {
// myChart_monthdata_line.on('click', function (params) {
// let daySelect = params.name;//天
// // alert(year+"----"+month+"++++++++"+daySelect);
// dayData(year, month, daySelect);
// dayData_circle_shop(year, month, daySelect);
// dayData_circle_city(year, month, daySelect);
// day = daySelect;
// });
myChart_monthdata_line.getZr().on("click", function (params) {
// debugger;
let pointInPixel = [params.offsetX, params.offsetY];
if (myChart_monthdata_line.containPixel('grid', pointInPixel)) {
/*此處添加具體執行代碼*/
var pointInGrid = myChart_monthdata_line.convertFromPixel({seriesIndex: 0}, pointInPixel);
//X軸序號
var xIndex = pointInGrid[0];
//獲取當前圖表的option
var op = myChart_monthdata_line.getOption();
//獲得圖表中我們想要的數據
let daySelect = op.xAxis[0].data[xIndex];//天
// let daySelect = params.name;
// alert(year+"----"+month+"++++++++"+daySelect);
dayData(year, month, daySelect);
dayData_circle_shop(year, month, daySelect);
dayData_circle_city(year, month, daySelect);
day = daySelect;
}
});
}
}
} else {
alert(data.msg);
}
}
});
}