zoukankan      html  css  js  c++  java
  • echarts数据变了不重新渲染,以及重新渲染了前后数据会重叠渲染的问题

    1.echarts数据变了但是视图不重新渲染

    新建Chart.vue文件

    <template>

     <p :id="id" :style="style"></p>

    </template>

    <script>

    export default {

     name: "Chart",

     data() {

      return {

       //echarts实例

       chart: "" 

      };

     },

     props: {

      //父组件需要传递的参数:id,width,height,option

      id: {

       type: String

      },

       {

       type: String,

       default: "100%"

      },

      height: {

       type: String,

       default: "300px"

      },

      option: {

       type: Object,

       //Object类型的prop值一定要用函数return出来,不然会报错。原理和data是一样的,

       //使用闭包保证一个vue实例拥有自己的一份props

       default() {

        return {

         title: {

          text: "vue-Echarts"

         },

         legend: {

          data: ["销量"]

         },

         xAxis: {

          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子","tuoxie"]

         },

         series: [

          {

           name: "销量",

           type: "line",

           data: [5, 20, 36, 10, 10, 70]

          }

         ]

        };

       }

      }

     },

     computed: {

      style() {

       return {

        height: this.height,

         this.width

       };

      }

     },

     mounted() {

      this.init();

     },

     methods: {

      init() {

       this.chart = this.$echarts.init(document.getElementById(this.id));

       this.chart.setOption(this.option);

      }

     }

    };

    </script>

    新建App.vue文件,chart在App.vue中简单渲染出来

    <template>

     <p id="app">

      <Chart id="test"/>

     </p>

    </template>

    <script>

    import Chart from "./components/Chart";

    export default {

     name: "App",

     data() {},

     components: {

      Chart

     }

    }

    </script>

    支持数据自动刷新

    //在Chart.vue中加入watch

     watch: {

      //观察option的变化

      option: {

       handler(newVal, oldVal) {

        if (this.chart) {

         if (newVal) {

          this.chart.setOption(newVal);

         } else {

          this.chart.setOption(oldVal);

         }

        } else {

          this.init();

        }

       },

       deep: true //对象内部属性的监听,关键。

      }

     }

    2.重新渲染了前后数据会重叠渲染的问题

    chart.setOption(option, notMerge, lazyUpdate);将notMerge设置为true就可以echarts画布删除历史数据重新渲染数据

    notMerge是可选项,是否不跟之前设置的option进行合并,默认为false,即合并。
  • 相关阅读:
    你知道线程池是如何退出程序的吗?
    华为云GuassDB(for Redis)发布全新版本推出:Lua脚本和SSL连接加密
    分布式消息流平台:不要只想着Kafka,还有Pulsar
    新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
    1ms的时延,10Gbps速率…5G通信技术解读
    一分钟带你了解Huawei LiteOS组件开发指南
    资深Linux 系统管理员常用的15个很好用的Cron工作示例
    C语言中动态内存分配的本质是什么?
    Python连载8datetime包函数介绍 心悦君兮君不知
    Python连载7time包的其他函数 心悦君兮君不知
  • 原文地址:https://www.cnblogs.com/xiaoleilei123/p/10730709.html
Copyright © 2011-2022 走看看