vue使用echarts不显示，是啥问题？该怎么解决？

Question

接口没有问题，控制台也没有报错

但没有展示结果：

<template>
  <div class="content" style="padding: 10px 20px; display: flex; height: 100%">
    <div class="header">
      <el-form :model="selectForm" ref="selectForm" :rules="rules">
        <el-form-item
          prop="standardization"
          style="display: flex"
          label="数据标准化的方法"
        >
          <el-select
            v-model="selectForm.standardization"
            placeholder="请选择需要使用数据标准化的方法"
          >
            <el-option
              v-for="(item, index) in standardizationOption"
              :key="index"
              :value="item.value"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button
        class="header-button"
        type="primary"
        show-type="plain"
        @click="submit"
      >
        提交</el-button
      >
    </div>
    <div class="card-wrapper">
      <div class="card-header">
        <div class="card-title-wrapper">
          <img
            class="card-title-img"
            src="@/assets/images/home/other-train.svg"
            alt="数据结果"
          />
          <div class="card-title-text">数据结果展示</div>
        </div>
        <div>
          <el-icon
            name="direction-expansion2"
            class="el-icon-full-screen"
            title="放大"
          ></el-icon>
        </div>
      </div>
      <div class="card-split-line"></div>
      <div class="content-wrapper" style="position: relative">
        <div id="annual-plan-chart" style="height: calc(750px - 2.5rem)"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {getDataBZH,getData1BZH,getAnalysisList,editStandardization} from '../api/paid'
import * as echarts from "echarts"
import * as ecStat from 'echarts-stat'
  export default {
    name: "houseList",
    components: {},
    data() {
      return {
        selectForm: {},
        standardizationOption: [
          { name: "极差标准化法", value: "极差标准化法" },
          { name: "L1范数归一化", value: "L1范数归一化" },
          { name: "L2范数归一化", value: "L2范数归一化" },
          { name: "分位数规范化", value: "分位数规范化" },
          { name: "中心化", value: "中心化" },
        ],
        v: [],
        x:[],
        rules: {},
        analysisName: [],
      };
    },
    created() {
    },
    mounted() {
    },
    methods: {
      getData1BZH() {
        getData1BZH().then((res) => {
          if (res.code == 200) {
            this.v = res.data;
          }
        });
      },
      // x数据集
      getDataBZH() {
        getDataBZH().then((res) => {
          if (res.code == 200) {
            this.x = res.data;
          }
        });
      },
      // 提交
      submit() {
          const data ={
              standardization:this.selectForm.standardization
          }
          editStandardization(data).then(res=>{
              if (res.code == 200) {
                      this.getData1BZH()
                      setTimeout(() => {
                          this.initCharts(this.v);
                      }, 300);
                      // this.getDataBZH()
                      // setTimeout(() => {
                      //     this.initCharts(this.x);
                      // }, 500);
              }
          })
      },
      // excharts绘图
      initCharts(data) {
        let id = "annual-plan-chart";
        let dom = document.getElementById(id);
        let myChart = echarts.getInstanceByDom(dom);
        if (myChart == null) {
          // 基于准备好的dom，初始化echarts实例
          myChart = echarts.init(dom);
        } else {
          myChart.clear();
        }
        echarts.registerTransform(ecStat.transform.clustering);
        var CLUSTER_COUNT = 6;
        var DIENSIION_CLUSTER_INDEX = 2;
        var COLOR_ALL = [
          "#37A2DA",
          "#e06343",
          "#37a354",
          "#b55dba",
          "#b5bd48",
          "#8378EA",
          "#96BFFF",
        ];
        var pieces = [];
        for (var i = 0; i < CLUSTER_COUNT; i++) {
          pieces.push({
            value: i,
            label: "cluster " + i,
            color: COLOR_ALL[i],
          });
        }
        //  绘制图表
        myChart.setOption({
          standardization: [
            {
              source: data,
            },
            {
              transform: {
                type: "ecStat:clustering",
                // print: true,
                config: {
                  clusterCount: CLUSTER_COUNT,
                  outputType: "single",
                  outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX,
                },
              },
            },
          ],
          tooltip: {
            position: "top",
          },
          visualMap: {
            type: "piecewise",
            top: "middle",
            min: 0,
            max: CLUSTER_COUNT,
            left: 10,
            splitNumber: CLUSTER_COUNT,
            dimension: DIENSIION_CLUSTER_INDEX,
            pieces: pieces,
          },
          grid: {
            left: 120,
          },
          xAxis: {},
          yAxis: {},
          series: {
            type: "scatter",
            encode: { tooltip: [0, 1] },
            symbolSize: 5,
            itemStyle: {
              borderColor: "#555",
            },
            standardizationIndex: 1,
          },
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
.content {
    flex-direction: column;
  }
  .header {
    display: flex;
    height: 50px;
  }
  .header-button {
    margin-left: 20px;
    height: 40px;
  }
  
  .card-wrapper {
    background-color: white;
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
  
    .card-split-line {
      margin: 10px 0 20px 0;
      height: 2px;
      background: linear-gradient(
        -90deg,
        rgba(215, 224, 234, 0),
        rgba(210, 221, 234, 1)
      );
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      .card-title-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
  
        .card-title-img {
          width: 16px;
          height: 16px;
        }
  
        .card-title-text {
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Medium, sans-serif;
          font-weight: bold;
          text-align: right;
          color: #333333;
          line-height: 22px;
        }
  
        .card-title-icon {
          font-size: 16px;
          color: black;
          cursor: pointer;
        }
        .card-title-icon:hover {
          color: #2b90ff;
        }
      }
    }
  
    .content-wrapper {
      height: calc(100% - 60px);
    }
  }
</style>

Answer 1

这两个地方改一下看看：

mounted() {
  this.initCharts([]); // 初始化空的图表
},

async submit() {
  const data ={
    standardization: this.selectForm.standardization
  };

  const res = await editStandardization(data);
  if (res.code == 200) {
    const resData1 = await getData1BZH();
    if (resData1.code == 200) {
      this.v = resData1.data;
      this.initCharts(this.v);
    }
  }
},

Answer 2

在

    mounted() {
this.initCharts()
    },

先传空初始化
这个判断添加不对, 你的echarts.init(dom)是没有执行的

其实也不太需要这样, 直接echarts.init(dom)就可以了, echarts是必须要执行echarts.init(dom)

Answer 3

我通常这样写

data(){
    return {
        myCharts:null,
    }
}
mounted(){
    this.loadChart();
},
methods:{
    loadChart(xData,yData){
      let option = {
        //...........
      };
      if(this.myEcharts){
        this.myEcharts.setOption(option);
      }else{
        let dom = document.getElementById("chart-box");
        this.myEcharts = Echarts.init(dom);
        this.myEcharts.setOption(option);
      }
    },
}