this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {//标注 竖线
lineStyle: {
color: "rgba(255,122,10,0.5)"
}
},
formatter: function(params) {
//console.log(params);
_this.fofRateItem = params[0].value;
//_this.netTrendItem = params[1].value;
_this.navDate = params[0].axisValue;
}
},
grid: {
left: "5%",
right: "10%",
top: "5%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: timer,
splitNumber: 3,
axisLine: {
lineStyle: {
color: "rgba(12,12,12,0.1)"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#ccc",
align: "center"
}
}
},
yAxis: {
position: "left",
axisLabel: {
show: true,
interval: "auto",
formatter: "{value}"
},
type: "value",
splitLine: {
lineStyle: {
color: "rgba(12,12,12,0.1)"
}
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: "#ccc"
}
}
},
series: [
{
name: "总资产",
type: "line",
data: liner3,
showSymbol: false,
symbol: 'circle', //标记
symbolSize: 1, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,
itemStyle: {
normal: {
color: '#ff700a', // 拐点的颜色
shadowColor:"#ff700a",
shadowBlur:10, // 拐点的阴影
areaStyle: {//面积折线图 实现面积颜色渐变
type: 'default',
opacity: 0.1,
color:new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#ff700a'},
{offset: 1, color: '#fff'},
]
)
},
}
},
}
]
});
},
实现效果如下
yeah
分享echarts api 链接
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-xn9c2cm9.html