mpvue - 使用Echarts图表

蔚落 2021-07-26 12:33 772阅读 0赞

#### 安装依赖包 ####

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