日常开发记录 vue项目 折线图 vue+echarts

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