<template> <div> <div ref="chart" style="width: 100%; height: 500px;"></div> </div> </template> <script> import echarts from 'echarts' export default { data() { return { myChart: null, // echarts实例 chartData: {}, // 后端返回的数据 } }, mounted() { // 创建echarts实例 this.myChart = echarts.init(this.$refs.chart) // 获取数据并绘制图表 this.fetchData() }, methods: { async fetchData() { try { const res = await axios.get('http://localhost:7001/home/query') this.chartData = res.data // 绘制图表 this.myChart.setOption({ series: [{ type: 'pie', data: [ {name: 'stagesz', value: this.chartData.stagesz}, {name: 'stage', value: this.chartData.stage}, {name: 'suborder', value: this.chartData.suborder}, {name: 'announce', value: this.chartData.announce}, {name: 'zs', value: this.chartData.zs}, {name: 'mytyper', value: this.chartData.mytyper}, {name: 'mytypez', value: this.chartData.mytypez}, {name: 'cld', value: this.chartData.cld}, {name: 'clb', value: this.chartData.clb}, ] }] }) } catch (error) { console.log(error) } } } } </script>异常饼图数据不能显示出来

可能是因为echarts实例没有正确地获取到，可以尝试在mounted函数中添加一行代码，手动调用echarts的resize方法：

mounted() {
  // 创建echarts实例
  this.myChart = echarts.init(this.$refs.chart)
  // 手动调用resize方法
  window.addEventListener('resize', () => {
    this.myChart.resize()
  })
  // 获取数据并绘制图表
  this.fetchData()
}

另外，也可以在引入echarts时，使用按需引入的方式，减小打包体积：

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

如果问题仍然存在，可以查看控制台上是否有报错信息，并根据报错信息进行排查。