mpvue——動態渲染echarts圖表

前言

使用mpvue-echarts來寫圖表，那個F2再提醒本身下要踩坑不能忘記。遇到了一個問題就是數據不能動態的去渲染，這個其實官方給了咱們對應的方法

懶加載

 

代碼

修改了調用initChart()的位置

<!--
 * @Author: wangyang
 * @LastEditors: wangyang
 * @Description: file content
 * @Date: 2019-04-08 16:34:52
 * @LastEditTime: 2019-04-10 14:15:29
 -->
<template>
  <div class="container">
    <!-- <button @click="initChart">初始化</button> -->
    <div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInit" ref="echarts" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/dist/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
let chart = null
export default {
  data () {
    return {
      option: null,
      echarts,
      share:[]
    }
  },
  components: {
    mpvueEcharts
  },
  mounted(){
       this.query();
    },
  methods: {
    initChart () {
      this.option = {
        backgroundColor: '#fff',
        color: ['#67E0E3'],
   
    legend: {
      data: [ '訪問人數'],
      top:'top'
    },
    grid: {
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [ 
    {
      name: '訪問人數',
      type: 'line',
      smooth: false,
      label: {
          normal: {
            show: true,
            padding:[0,7,0,0]
          }
        },
      data: this.share
    }]
      }
      this.$refs.echarts.init()
    },
    handleInit (canvas, width, height) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      chart.setOption(this.option)
      return chart
    },
    query() {
      const that = this;
      that.http({
        url: 'Employee/statistic',
        data:{
          wid:2,
          type:1,
          uid:100007
        }
      }).then(res =>{
          if (res.status) {
              this.share = res.data.share_count;
              this.initChart();
          }
      })
    },
  },
  onShareAppMessage () {}
}
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 300px;
}
</style>