Vue3整合Echarts，通过Axios实现动态数据展示

最新推荐文章于 2025-03-31 17:13:53 发布

CV_J

最新推荐文章于 2025-03-31 17:13:53 发布

阅读量1.3k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_49420571/article/details/134339771

版权

本文介绍了如何使用ECharts库在Vue组件中创建一个饼图，通过axios获取数据并在图表上实时更新。展示了从初始化图表、获取数据到更新图表的完整过程。

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

<template>  
  <div>  
    <div id="mychart" style="width: 600px; height: 400px;"></div>  
  </div>  
</template>  
  
<script>  
// 导入echarts
import * as echarts from 'echarts';  
// 导入axios
import axios from 'axios';  
export default {  
  mounted() {  
    // 初始化图表  
    this.initChart();  
    // 获取数据
    this.fetchData();  
  },  
  methods: {  
    // initChart方法初始化图表，设置图表类型为饼图，并设置初始数据为空数组和背景颜色数组  
    initChart() {  
      // 使用echarts.init方法初始化图表，传入一个HTML元素（通过getElementById获取的元素）作为参数  
      this.myChart = echarts.init(document.getElementById('mychart'));  
      // 设置图表的配置项和数据，包括图表类型、数据、背景颜色等  
      this.chartOptions = {  
        series: [  
          {  
            type: 'pie',  // 图表类型为饼图  
            data: [],  // 初始化数据，稍后将通过fetchData方法更新  
            backgroundColor: ['rgba(255,99,132,1)', 'rgba(75, 192, 192, 0.95)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],  // 饼图的各个部分的背景颜色  
          },  
        ],  
        tooltip: {  // 提示框的配置项  
          trigger: 'item'  // 当鼠标悬停在图表项上时，显示提示框  
        },  
      };  
      // 使用myChart.setOption方法设置图表的配置项和数据  
      this.myChart.setOption(this.chartOptions);  
    },  
    // fetchData方法通过axios库获取数据并更新图表  
    fetchData() {  
      // axios.get方法发起一个HTTP GET请求，获取来自'http://localhost:8081/echars/pie'的服务端数据  
      axios.get('http://localhost:8081/echars/pie').then((res) => {  // 当请求成功完成时，执行该回调函数，res参数包含响应结果  
        // 将服务端返回的数据映射为适合ECharts接受的格式，并赋值给dataset变量  
        const dataset = res.data.data.map((item) => ({ value: item.value, name: item.type }));  
        // 调用updateChart方法，将dataset作为参数传入，以更新图表数据  
        this.updateChart(dataset);  
      });  
    },  
    // updateChart方法接收一个数据集作为参数，将该数据集设置为图表的数据，并更新图表显示  
    updateChart(data) {  
      // 将接收到的数据集赋值给chartOptions的series[0].data属性，以更新图表数据  
      this.chartOptions.series[0].data = data;  
      // 使用myChart.setOption方法设置图表的配置项和数据（包括更新后的数据）  
      this.myChart.setOption(this.chartOptions);  
    },  
  },  
};  
</script>