mpvue中使用echarts

mpvue中使用echarts

安装依赖

$ npm install echarts

$ npm install mpvue-echarts

我把它封装成了一个组件

<template>
  <div :class="className" :style="{
      height:height,width:width}" >
    <mpvue-echarts lazyLoad :echarts="echarts" :onInit="ecBarInit" canvasId="line" ref="echarts"/>
  </div>
</template>

<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
let barChart;

export default {
    
  components: {
    
    mpvueEcharts
  },
  props: {
    
    className: {
    
      type: String,
      default: 'chart'
    },
    id: {
    
      type: String,
      default: 'chart'
    },
    width: {
    
      type: String,
      default: '200px'
    },
    height: {
    
      type: String,
      default: '200px'
    },
    optionObj: {
    
      type: Object,
      default: () => ({
    })
    },
    chartColor: {
    
      type: Array,
      default: () => {
    
        return ['#2c77f4', '#fd397a', '#1dc9b7', '#ffb822', '#5867dd', '#3193f5', '#ffa132', '#48e5f0', '#eb5ee1', '#ffad8a', '#f55e59', '#b3f327', '#d75cff', '#05cdff', '#3beba7', '#9a57ff', '#ffd300',
          '#ffb833', '#a1de8e', '#ffad8a', '#eb5ee1', '#98adff', '#1dc9b7', '#ffd300', '#7ce4ef', '#a87cef', '#ef7cd1', '#7ccfef', '#efc17c', '#7cec95'
        ]
      }
    }
  },
  data() {
    
    return {
    
      chart: null,
      echarts,
      ecBarInit: null,
    }
  },
  watch: {
    
    optionObj: {
    
      handler(val) {
    
        this.$refs.echarts.init()
      },
      deep: true
    }
  },
  mounted() {
    
    this.initChart(<