前端折线图中背景_记录在vue中使用echarts（折线图背景渐变）

安装echarts依赖

npm install echarts -S创建图表，在main.js中引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts在组件中使用

export default {

data () {

return {}

},

mounted(){

this.drawLine();

},

methods: {

drawLine() {

let myChart= this.$echarts.init(document.getElementById('myChart'))

myChart.setOption({

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'cross',

label: {

backgroundColor: '#6a7985'

}

}

},

grid: {

left: '5%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: [

{

type: 'category',

boundaryGap: false,

data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

name: '邮件营销',

type: 'line',

stack: '总量',

itemStyle: {

normal: {

areaStyle: {

type: 'default',

//渐变色实现===

color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,

//三种由深及浅的颜色

[{

offset: 0,

color: '#ea5404'

}, {

offset: 1,

color: '#ffffff'

}]),

},

lineStyle: { //线的颜色

color: '#ea5404'

},

//以及在折线图每个日期点顶端显示数字

label: {

show: true,

position: 'top',

textStyle: {

color: 'white'

}

}

},

},

areaStyle: {},

data: [120, 132, 101, 134, 90, 230, 210]

}

]

});

}

}

}

渐变色实现===

new this.$echarts.graphic.LinearGradient

注意：要在mounted生命周期函数中实例化echarts对象，确保dom元素已经挂载到页面中