zoukankan      html  css  js  c++  java
  • 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,
            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 {
       100%;
      height: 300px;
    }
    </style>
  • 相关阅读:
    java中接口与抽象类的区别
    单例模式的懒汉式和饿汉式实现分析
    filter的原理(转)
    事务与连接池
    request对象和response对象的作用和相关方法
    java环境变量配置
    关于http
    java笔记5
    理解String的intern()方法
    用递归的方法算出给定字符串的最大连续重复字符的重复次数
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/10683139.html
Copyright © 2011-2022 走看看