echarts 数据实时更新

sunyin.liu

已于 2022-05-25 15:33:25 修改

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuejs 文章标签： echarts vue.js javascript

于 2022-01-04 15:19:23 首次发布

本文链接：https://blog.csdn.net/weixin_42066070/article/details/122303772

Vuejs 专栏收录该内容

70 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Vue.js应用中使用Echarts组件进行数据的实时更新。首先讲解了如何在初次获取数据时初始化Echarts图表，接着阐述了父组件如何调用Echarts组件，然后详细说明了通过事件来更新和修改组件的方法，最后讨论了事件调用的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 第一次获取数据时候的初始化数据封装成组件

<template>
  <div :class="{ echartPiebox: true, [this.ids]: true }"></div>
</template>

<script>
export default {
  name: "echartPie1",
  data() {
    return {
      option: {},
    };
  },
  props: ["ids", "optiontype1data"],
  created() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initEchart();
      }, 300);
    });
  },

  methods: {
    initEchart() {
      let _this = this;
      this.option = this.optiontype1data;
      let chartDom = document.querySelector("." + this.ids);
      let myChart = this.$echarts.init(chartDom, "light");
      myChart.setOption(this.option);
      myChart.off("click");
      myChart.on("click", function (params) {
        _th