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