axios请求的数据怎么赋值给echarts饼图

Question

问题描述

问题出现的环境背景及自己尝试过哪些方法

<template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {

mixins: [resize],
props: {
  className: {
    type: String,
    default: 'chart'
  },
  id: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '700px'
  },
  pieData: {
    type: Object,
    required: true
  }
},
data() {
  return {
    chart: null
  }
},
mounted() {
  this.initChart()
},
beforeDestroy() {
  if (!this.chart) {
    return
  }
  this.chart.dispose()
  this.chart = null
},
methods: {
  initChart() {
    this.chart = echarts.init(document.getElementById(this.id))

    this.chart.setOption({
      title: {
        text: this.pieData.title,
        textStyle: {
          fontWeight: 'bold',
          fontSize: 24,
          color: '#333333'
        },
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
        show: true,
        axisPointer: {
          lineStyle: {
            color: '#57617B'
          }
        }
      },
      legend: {
        bottom: '0',
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 10,
        data: this.pieData.legendData,
        left: 'center',
        textStyle: {
          fontSize: 16,
          color: '#333333'
        }
      },
      grid: {
        top: 20,
        left: '3%',
        right: '4%',
        bottom: '2%',
        containLabel: true
      },
      series: [{
        type: 'pie',
        radius: this.pieData.radius,
        center: ['50%', '50%'],
        itemStyle: {
          // normal: {
          //   color: 'rgb(137,189,27)',
          //   borderColor: 'rgba(137,189,2,0.27)',
          //   borderWidth: 12
          // },
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        data: this.pieData.seriesData
      }],
      color: this.pieData.color
    })
  }
}

}
</script>

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
pieData: {

      title: '学员分布',
      radius: '70%',
      color: ['#cd5c5c', '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3'],
      legendData: ['待就业'],
      seriesData: [{
        value: 1547,
        name: '待就业'
      }]
    },
 在axios中：
 this.pieData.legendData = response.data.data.legendData
 this.pieData.seriesData = response.data.data.seriesData

你期待的结果是什么？实际看到的错误信息又是什么？

console结果值已经赋上了，可图表是不变的

Answer 1

楼主，你好！看你的代码应该是，没有动态监听 pieData 值的变化，应该用 watch 来监听，然后重新执行 this.chart.setOption(option);