vue封装echarts折线图

创建LineChart.vue

<template>
  <div>
    <div
     ref='barchart'
     :style="echartStyle"
    >
    </div>
  </div>
</template>

<script>
//在 echarts.vue 中
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'Bar',
  props: { 
    echartStyle: {  // 样式 - 1
      type: Object,
      default() {
        return {}
      }
    },
    
    titleText: {   //标题文本 - 1
      type: String,
      default: ''
    },
    
    opinion: {    //区域名称 - 1
      type: Array,
      default() {
        return []
      }
    },
    
    opinionData: {   // 区域数据 - 1
      type: Array,
      default() {
        return []
      }
    },
    
    x: {  // x 轴
      type: Array,
      default() {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  mounted(){
    this.$nextTick(function() {
      this.drawLine()
    })
  },
  methods: {
    // 绘制折线图
      drawLine(){
        let myCharts = echarts.init(this.$refs.barchart)
        myCharts.setOption({
          title: {
            left: 'center',
                text: this.titleText, //标题文本
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
              left: 'left',
                data: this.opinion // 区域名称
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {   // x 轴
                type: 'category',
                boundaryGap: false,
                data: this.x
            },
            yAxis: {   // y 轴
                type: 'value'
            },
            series: this.opinionData  // 区域数据
        })
      }
  }
}
</script>

引用组件

    import mLine from '@/components/LineChart.vue'
 	components: {
      mLine,
    },
    <m-line
      :echartStyle="style"
      :titleText="title"
      :opinion="barName"
      :opinionData="info"
      :x="barX">
    </m-line>

数据

data() {
 return {
          style: {
	          height: ''
	        },
	        title: '动态统计',
	        barName: ['文档数', '任务数'],
	        barX: ['2019/03/01','2019/03/02','2019/03/03','2019/03/04','2019/03/05','2019/03/06','2019/03/07'],
	        info: [
	  	        {
	  	            name:'文档数',
	  	            type:'line',
	  	            stack: '总量',
	  	            data:[120, 132, 101, 134, 90, 230, 210]
	  	        },
	  	        {
	  	            name:'任务数',
	  	            type:'line',
	  	            stack: '总量',
	  	            data:[220, 182, 191, 234, 290, 330, 310]
	  	        }
	  	    ],
	}
}

created() {
     this.style.height = 300 + 'px'//图形高度
},