vue中使用echarts（折线图背景渐变）

v2-9b118dde5997048d4b4f6608afaeb230_1440w.png

安装echarts依赖

npm install echarts -S

创建图表，在main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在组件中使用

<template>
   <div id="myChart" :style="{width: '500px', height: '500px'}"></div>
</template>

<script>
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]
            }
          ]
        });
      }
  }
}
</script>

渐变色实现===

new this.$echarts.graphic.LinearGradient