echarts 折线图vue封装

效果

echarts 折线图vue封装

<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div class="line" :id="Line"  :style="{height:'100%',width:'100%'}" />
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'Line',
  props: ['id', 'getData'],
  data () {
    return {
      Line: this.id || 'Line',
      charts: ''
    }
  },
  // 实时监听父组件传过来的值，进而执行drawBar方法，重绘柱状图
  watch: {
    getData: {
      handler (value) {
        this.drawLine(value)
      },
      deep: true
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine ({
      legendData = [],
      xAxisData = [],
      series = [],
      colorArray = []
    } = {}) {
      this.charts = echarts.init(document.getElementById(this.Line))
      this.charts.setOption({
        title: {
          text: ''
        },
        color: colorArray,
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'center',
          y: 'bottom',
          padding: [300, 0, 0, 0],
          data: legendData
        },
        grid: {
          left: '0',
          right: '4%',
          bottom: '10%',
          top: '5%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: series
      })
    }
  }
}
</script>

使用

<template>
      <div>
       <--宽度，高度-->
        <line:get-data="objectData" id="barId" style="height: 250px"></line>
      </div>
</template>
<script>
import Line from '@/components/line'

export default {
  components: {
    Line 
  },
   data ()  {
	   return {
	       objectData: {
			        legendData: ['转发次数', '活跃用户'],
                    xAxisData: ['20200423', '20200424', '20200425', '20200426'],
		            series: [
		              {
		                name: '转发次数',
		                type: 'line',
		                stack: '总量',
		                smooth: true,
		                seriesLayoutBy: 'row',
		                data: [3,4,5,6],
		                areaStyle: { normal: {
		                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                    offset: 0,
		                    color: '#6AF5BD'
		                  }, {
		                    offset: 1,
		                    color: '#FFFFFF'
		                  }])
		                } }
		              },
		              {
		                name: '活跃用户',
		                type: 'line',
		                stack: '总量',
		                smooth: true,
		                seriesLayoutBy: 'row',
		                data: [1,2,3,4],
		                areaStyle: { normal: {
		                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                    offset: 0,
		                    color: '#F7948C'
		                  }, {
		                    offset: 1,
		                    color: '#FFFFFF'
		                  }])
		                } }
		              }
		            ],
		            colorArray: ['#6AF5BD', '#F7948C']
     		 }
	  	 }
     }
</script>