mpvue - 使用Echarts圖表

安裝依賴包

npm install echarts vue-echarts --save
yarn add echarts mpvue-echarts

自定義圖表組件

<template lang="pug">
.echarts-wrap
  mpvue-echarts(:echarts="echarts" :onInit="onInit" :canvasId="canvasId")
</template>
<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
export default {
  name: 'Chart',
  components: {
    mpvueEcharts
  },
  props: {
    canvasId: {
      type: String,
      defailt: ''
    },
    option: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      echarts,
      onInit: this.initChart
    }
  },
  methods: {
    initChart (canvas, width, height) {
      let chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      chart.setOption(this.option)
      return chart // 返回 chart 後可以自動綁定觸摸操作
    }
  }
}
</script>
<style lang="stylus" scoped>
.echarts-wrap
  width 100%
  height 100%
</style>

使用

<template lang="pug">
  div.box-wrap         
       Chart(canvasId="trend" :option="trendOption")
</template>
<script>
import Chart from ’../Chart‘
export default {
  name: 'Base',
  components: {
    Chart
  },
  data () {
      return {
         trendOption: {
            xAxis: {
              data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
            },
            yAxis: {},
            series: [{
              name: '銷量',
              type: 'line',
              data: [5, 20, 36, 10, 10, 20]
            }]
          }
      }
  }
}
</script>
<style lang="stylus" scoped>
.box-wrap
  width 100%
  height 100%
</style>

遇到打包限制等報錯問題看：

https://www.npmjs.com/package/mpvue-echarts