vue3 echarts 饼图 动态数据更新 示例

Vue3是一种流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，具有更好的性能和更多的功能。Echarts是一款强大的数据可视化库，可以用于创建各种图表，包括饼图。下面是一个示例，展示如何在Vue3中使用Echarts来实现饼图的动态数据更新：

首先，确保你已经安装了Vue3和Echarts。可以通过npm或yarn进行安装。

在Vue组件中，首先导入所需的库：

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

然后，在组件的模板中添加一个div元素，用于渲染饼图：

<template>
  <div id="chart" style="width: 400px; height: 400px;"></div>
</template>

接下来，在组件的script部分定义数据和方法：

<script>
export default {
  name: 'PieChart',
  setup() {
    const chartRef = ref(null); // 用于引用图表实例
    const data = ref([
      { name: '数据1', value: 10 },
      { name: '数据2', value: 20 },
      { name: '数据3', value: 30 },
    ]);

    // 创建图表并初始化
    const createChart = () => {
      const chart = echarts.init(chartRef.value);
      const options = {
        series: [
          {
            type: 'pie',
            data: data.value,
          },
        ],
      };
      chart.setOption(options);
    };

    // 更新数据
    const updateData = () => {
      data.value = [
        { name: '数据1', value: 15 },
        { name: '数据2', value: 25 },
        { name: '数据3', value: 35 },
      ];
    };

    onMounted(() => {
      createChart();
    });

    return {
      chartRef,
      updateData,
    };
  },
};
</script>

最后，在组件的生命周期钩子函数中调用相关方法：

<template>
  <div>
    <div id="chart" style="width: 400px; height: 400px;" ref="chartRef"></div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

这样，当点击"更新数据"按钮时，饼图的数据会动态更新。