v2-9b118dde5997048d4b4f6608afaeb230_1440w.png

安裝echarts依賴

npm install echarts -S

創(chuàng)建圖表，在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',
                    //漸變色實現(xiàn)===
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                      //三種由深及淺的顏色
                      [{
                        offset: 0,
                        color: '#ea5404'
                      }, {
                        offset: 1,
                        color: '#ffffff'
                      }]),
                  },
                  lineStyle: {  //線的顏色
                    color: '#ea5404'
                  },
                  //以及在折線圖每個日期點頂端顯示數(shù)字
                  label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      color: 'white'
                    }
                  }
                },
              },
              areaStyle: {},
              data: [120, 132, 101, 134, 90, 230, 210]
            }
          ]
        });
      }
  }
}
</script>

漸變色實現(xiàn)===

new this.$echarts.graphic.LinearGradient