用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 += '
'+params[i].seriesName+':'+params[i].value;
}
}else{
res = '当前里程：' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '
'+params[i].seriesName+':'+params[i].value;
}
}
setTimeout(function(){
// 仅为了模拟异步回调
callback(ticket, res);
},1);
return "loading";
}
},