项目场景：

使用echarts绘制后台发过来的数据的时候发现需要对数据进行清洗，抛弃掉一些数据

问题描述：

清洗的时候，发现怎么清洗的没有用
下面的代码需要安装echarts 我的版本是 4.9

<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      /*  opinion: ["1", "3", "3", "4", "5"],*/
      opinionData: ["3", "2", "6", "4", "5"]
    };
  },

  methods: {
    drawLine(id) {
      
      
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["近七日收益"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5"]
        },
        yAxis: {
          type: "value"
        },

        series: [
          {
            name: "近七日收益",
            type: "line",
            stack: "总量",
            data: this.opinionData
          }
        ]
      });
      }
    }
  },
  //调用
  mounted() {
    this.$nextTick(function() {
      this.drawLine("main");
     //清洗代码，把6清洗成''
      for (
        var opiniondateTemp = 0;
        opiniondateTemp < this.opinionData.length;
        opiniondateTemp++
      ) {
        console.log(opiniondateTemp, " 第" + opiniondateTemp + "次  ");
        // console.log(this.opinionData.length," changdu ")
        console.log(
          this.opinionData[opiniondateTemp],
          "第" + opiniondateTemp + "次的数据"
        );

        if (this.opinionData[opiniondateTemp] === "6") {
          this.opinionData.splice(opiniondateTemp, 1, "");
        }
    });
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

原因分析：

发现是通过mounted在this.$nextTick的时候调用之前的drawLine方法
但是我把代码放在drawLine中如下：

methods: {
    drawLine(id) {
      
      
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["近七日收益"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5"]
        },
        yAxis: {
          type: "value"
        },

        series: [
          {
            name: "近七日收益",
            type: "line",
            stack: "总量",
            data: this.opinionData
          }
        ]
      });
      //在这里
      for (
        var opiniondateTemp = 0;
        opiniondateTemp < this.opinionData.length;
        opiniondateTemp++
      ) {
        console.log(opiniondateTemp, " 第" + opiniondateTemp + "次  ");
        // console.log(this.opinionData.length," changdu ")
        console.log(
          this.opinionData[opiniondateTemp],
          "第" + opiniondateTemp + "次的数据"
        );

        if (this.opinionData[opiniondateTemp] === "6") {
          this.opinionData.splice(opiniondateTemp, 1, "");
        }
      }
      
    }
  },

是没用用的

解决方案：

写在this.charts.setOption之前就可以运行
如：

methods: {
    drawLine(id) {
      
      for (
        var opiniondateTemp = 0;
        opiniondateTemp < this.opinionData.length;
        opiniondateTemp++
      ) {
        console.log(opiniondateTemp, " 第" + opiniondateTemp + "次  ");
        // console.log(this.opinionData.length," changdu ")
        console.log(
          this.opinionData[opiniondateTemp],
          "第" + opiniondateTemp + "次的数据"
        );

        if (this.opinionData[opiniondateTemp] === "6") {
          this.opinionData.splice(opiniondateTemp, 1, "");
        }
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["近七日收益"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5"]
        },
        yAxis: {
          type: "value"
        },

        series: [
          {
            name: "近七日收益",
            type: "line",
            stack: "总量",
            data: this.opinionData
          }
        ]
      });
      }
    }
  },

结果：

可以看到数据是被清洗过后且成功的在echarts被绘制