用eCharts實現折線圖的一些總結
ECharts
一 . 折線圖突出顯示重點拐點，用圖片代替這個重點折點（見如下標紅位置）
標註藍色的位普通的拐點（沒有任何特效）：
series : [{
name:'海拔高度',
type:'line',
data:[8,8,{
value : 12,
symbol: 'triangle', // 資料級個性化拐點圖形
symbolSize : 30,
hoverAnimation :true,
itemStyle:{
normal:{
color:'green'
}}},13,12,13,
{
value : 29,
symbol: 'image://1.jpg', （這個是讓拐點部位換成圖片）
symbolSize : 50,
hoverAnimation :true, （開啟當前拐點標誌的動畫效果）
itemStyle:{
normal:{
color:'green' （給當前拐點配置顏色，新增圖片之後，這個就沒用了）
},
xx:"隧道地段" （這個是為了讓當前拐點 在滑鼠劃過或者單擊時，顯示在標牌中的內容，具體實現還需要配合
tooltip中的formatter
}
},17,18]
},
二、接著上面標註綠色的部分接著說，它的實現如下：
tooltip : {
trigger: 'axis',（這個代表這個線是通過座標軸觸發的）
// triggerOn :'click',
formatter: function (params,ticket,callback) { （這個是回撥函式）
console.log(params);
var res = '';
if(params[0].data.itemStyle&¶ms[0].data.itemStyle.xx){
var tt = params[0].data.itemStyle.xx;
res += tt;
}else if(params[0].data.itemStyle&&!params[0].data.itemStyle.xx){
res = '當前里程：' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>'+params[i].seriesName+':'+params[i].value;
}
}else{
res = '當前里程：' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>'+params[i].seriesName+':'+params[i].value;
}
}
setTimeout(function(){
// 僅為了模擬非同步回撥
callback(ticket, res);
},1);
return "loading";
}
},