Coder-coco 2023-09-14 17:34 采纳率: 44.7%
浏览 31

vue中使用echarts,数据更新后无法重新绘制图表?


 getTransformerSubstation3 () {
        // this.myChart3.clear()
        this.myChart3 = this.$echarts.init(document.getElementById('oneChart3'))
        api
          .getTransformerSubstation3(this.bdzparams)
          .then(data => {

            this.transformerSubstationList3 = data
            let option = {
              yAxis: {
                type: 'category',
                data: this.transformerSubstationList3.data.Asix,
              },
              xAxis: {
                type: 'value',
              },
              series: [
                {
                  data: this.transformerSubstationList3.data.data0,
                  type: 'bar',
                  itemStyle: {
                    normal: {
                      color: '#32b16c',
                      label: {
                        show: true,
                        position: 'right',
                        textStyle: {
                          color: 'black',
                          fontSize: 10,
                        },
                      },
                    },
                  },
                  barWidth: 20,
                },
              ],
              grid: {
                x: '3%',
                y: '20%',
                bottom: '3%',
                containLabel: true,
              },
      
                },
              },
            }
            this.myChart3.setOption(option)
          })
      },


  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2023-09-14 17:39
    关注

    引用 皆我百晓生 小程序回复内容作答:
    在Vue中使用echarts时,如果想要更新数据后重新绘制图表,可以先调用clear方法清空已有图表,并重新初始化myChart3

    下面是修改后的代码:

    getTransformerSubstation3() {
      if (this.myChart3) {
        this.myChart3.clear();
      }
      this.myChart3 = this.$echarts.init(document.getElementById('oneChart3'));
      api.getTransformerSubstation3(this.bdzparams).then((data) => {
        this.transformerSubstationList3 = data;
        let option = {
          yAxis: {
            type: 'category',
            data: this.transformerSubstationList3.data.Asix,
          },
          xAxis: {
            type: 'value',
          },
          series: [
            {
              data: this.transformerSubstationList3.data.data0,
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#32b16c',
                  label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                      color: 'black',
                      fontSize: 10,
                    },
                  },
                },
              },
              barWidth: 20,
            },
          ],
          grid: {
            x: '3%',
            y: '20%',
            bottom: '3%',
            containLabel: true,
          },
        };
        this.myChart3.setOption(option);
      });
    },
    

    在每次更新数据之前,先判断myChart3是否存在,如果存在则调用clear方法清空已有图表。然后重新初始化myChart3并设置新的数据和配置项,最后调用setOption方法重新绘制图表。这样就可以实现数据更新后重新绘制图表了。

    评论

报告相同问题?

问题事件

  • 创建了问题 9月14日