[Vuejs]-Vue doesn't update the child chart component in echart

by

0👍

take a look at https://github.com/ecomfe/vue-echarts or solution below may help you.(if you use version >4.x)

sample.vue

<template>
   //...
   <v-chart
     class="chart mt-7"
     :option="botChartData"
     :update-options="updateOpts"
   />
   //...
</template>
<script>
export default {
    data() {
        return {
            updateOpts: {
               notMerge: true,
            },
            botChartData: {
                 tooltip: {
                      trigger: "item",
                      formatter: "{a} <br/>{b} : {c} ({d}%)",
                 },
                 series: [
                  {
                    name: "Active Bots",
                    type: "pie",
                    center: ["50%", "50%"],
                    radius: ["75%", "90%"],
                    itemStyle: {
                      borderRadius: 8,
                    },
                    data: [],
                   }
                 ],
            },
        };
    },
    methods: {
       connect() {
         this.bots = [
           {
              value: 0,
              name: "a",
           },
           {
              value: 1,
              name: "b",
           },
           {
              value: 2,
              name: "c",
           },
         ];
         this.botChartData.series[0].data = this.bots;
       }
    },
};
</script>

I called "connect" in "created" you can call it in mounted or on events!

if you need to set your chart as a child component you can easily pass this.botChartData like below

child.vue

<template>
  <v-chart
     class="chart mt-7"
     :option="botData"
     :update-options="updateConf"
  />
 </template>

 <script>
  export default {
     props: {
        botChartData: {
             type: Object
        },
        updateOpts: {
             type: Object
        }
     },
     computed: {
        botData() {
           return this.botChartData
        },
        updateConf() {
           return this.updateOpts
        }
     }
  };
 </script>

in parent.vue

<template>
 //...
 <sample :botChartData="botChartData" :updateOpts="updateOpts" />
 //...
</template>
<script>
  //...the same as sample.vue js
</script>

By the way if you have multiple charts in one page dont forget notMerge then your charts will reinitialize after switching between them

Leave a comment