echarts中无法动态改变数据，残留上一次操作数据的画布的解决方案

最新推荐文章于 2025-04-18 20:34:06 发布

艾敲代码的MT

最新推荐文章于 2025-04-18 20:34:06 发布

阅读量2.6k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_26705343/article/details/118654857

版权

本文介绍了在使用Echarts时遇到的问题，即在动态改变数据时，图像画布中仍残留上次操作的数据。为了解决这个问题，提出了一个解决方案：通过调用`myChart.clear()`方法来清除之前的图表，确保每次更新数据时都能得到干净的画布。

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

echarts 图像的点击事件

myChart.on("click", function (params) {
        that.$refs.examination.style.display = "none";
        that.$refs.examinatnew.style.display = "block";
      });

echarts中清空图画

	默认如果不手动清楚画布原来的数据，会将你改变后的数据进行替换，如果你默认没有原来数据对应字段的话，就会出现当前你要的字段 和 原来的字段出现在同一画布上。

解决： myChart.clear() 清楚上一次的画布

   async getOpenstes(ele) {
  if (ele) {
  再次判断当前如果动态传参就是就改变原来的画布数据
    let Evaluat = await getEvaluat(ele);
    this.Evaluats = Evaluat.data
    console.log(Evaluat)
    var chartDom = document.getElementById("openste");
    var myChart = echarts.init(chartDom);
    myChart.clear()
	！！！！！！！！！ 再次清除一下原来的画布， 在重新渲染新的画布！！！！！！！！！！
    var option;

    option = {
      
      tooltip: {
        trigger: "axis",
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      grid: {
         left: 100,
      },

      xAxis: {
        axisLabel: {
          rotate: 30,
        },
        type: "category",
        boundaryGap: false,
        data: this.Evaluats.data_name,
      },
      yAxis: {
        type: "value",
      },
      
      series: [
        {
          name: "评教信息",
          type: "line",
          color: "#1AA15F",
          data: this.Evaluats.data_value,
        },
      ],
    };
    option && myChart.setOption(option);
  } else {
    let Evaluat = await getEvaluat();

    默认请求 数据渲染画布
    this.Evaluats = Evaluat.data
    var chartDom = document.getElementById("openste");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      grid: {
        left: 100,
      },

      xAxis: {
        axisLabel: {
          rotate: 30,
        },
        type: "category",
        boundaryGap: false,
        data: this.Evaluats.data_name,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "差",
          type: "line",
          color: "#D9001B",
          data: this.Evaluats.data_cha,
        },
        {
          name: "良",
          type: "line",
          color: "#D7D7D7",
          data: this.Evaluats.data_liang,
        },
        {
          name: "中",
          type: "line",
          color: "#EAA87C",
          data: this.Evaluats.data_zhong,
        },
        {
          name: "优",

          type: "line",
          color: "#2561EF",
          data: this.Evaluats.data_you,
        },
      ],
    };

  }
    option && myChart.setOption(option);
},