雷达图数据及显示问题

src/views/Textanalysis/index.vue

@@ -376,7 +376,10 @@
         </div>
       </div>
     </div>
-    <div id="echarts_none" style="display: none; width: 592px; height: 568px"></div>
+    <div id="echarts_none_0" style="display:none; width: 592px; height: 568px"></div>
+    <div id="echarts_none_1" style="display:none; width: 592px; height: 568px"></div>
+    <div id="echarts_none_2" style="display:none; width: 592px; height: 568px"></div>
+    <div id="echarts_none_3" style="display:none; width: 592px; height: 568px"></div>
   </div>
 </template>
 
@@ -392,6 +395,7 @@ import { json2excel } from '@/utils/setMethods';
 
 import FileSaver from 'file-saver';
 import htmlDocx from 'html-docx-js/dist/html-docx';
+import { markRaw } from 'vue'
 
 export default {
   components: {
@@ -600,7 +604,7 @@ export default {
       json2excel(excelDatas, '等级分布', true, 'xlsx');
     },
     downLoadEcharts() {
-      let chartsCanvas = document.getElementById('echarts_none').querySelectorAll('canvas')[0];
+      let chartsCanvas = document.getElementById('echarts_none_'+this.chartIndex).querySelectorAll('canvas')[0];
       let picInfo = chartsCanvas.toDataURL({
         type: 'png',
         pixelRatio: 1, // 放大两倍下载。解决生成图片在移动端模糊问题
@@ -841,10 +845,13 @@ export default {
       this.createEcharts('main_echarts', str, this.leftList, this.chartIndex);
     },
     // 图表
-    createEcharts(id, type, data, index) {
+    async createEcharts(id, type, data, index) {
       this.chartIndex = index;
+      this.myChart = null
+      this.myChart_none = null
+      let indicatorMax = 0, indicatorMaxRatio = 0
       // 先添加DOM再进行创建图表
-      this.addnode().then(() => {
+      await this.addnode().then(() => {
         let newdata = JSON.parse(JSON.stringify(data));
         newdata.splice(data.length - 1, 1);
         let name = [];
@@ -852,12 +859,22 @@ export default {
         let value = [];
         let leidaList = [];
         // 去除括号
-        if (this.xifen) {
           newdata.forEach((item) => {
-            item.name = item.name.replace('（', '');
-            item.name = item.name.replace('）', '');
+            if (this.xifen) {
+                item.name = item.name.replace('（', '');
+                item.name = item.name.replace('）', '');
+            }
+            if(item.value>indicatorMax){
+                indicatorMax = item.value
+            }
+            if(item.ratio>indicatorMaxRatio){
+                indicatorMaxRatio = item.ratio
+            }
           });
-        }
+          indicatorMax += 50
+          if(indicatorMaxRatio<50){
+            indicatorMaxRatio = 50
+          }
         // 比例开关
         if (this.ratioShow) {
           newdata.forEach((item) => {
@@ -871,6 +888,7 @@ export default {
             value.push(item.ratio);
             leidaList.push({
               name: item.name,
+              max: indicatorMaxRatio
             });
           });
         } else {
@@ -885,14 +903,15 @@ export default {
             value.push(item.value);
             leidaList.push({
               name: item.name,
+              max: indicatorMax
             });
           });
         }
 
         let chartDom = document.getElementById(id);
-        this.myChart = echarts.init(chartDom);
-        let chartDom_none = document.getElementById('echarts_none');
-        this.myChart_none = echarts.init(chartDom_none);
+        this.myChart = markRaw(echarts.init(chartDom));
+        let chartDom_none = document.getElementById('echarts_none_'+index);
+        this.myChart_none = markRaw(echarts.init(chartDom_none));
         let option = null;
         let color1 = ['#35776B', '#3873CB', '#9031AA', '#EA1F1F', '#CBCBCB', '#888888'];
         let color2 = [
@@ -973,7 +992,7 @@ export default {
             yAxis: {
               type: 'value',
               axisLabel: {
-                formatter: this.ratioShow ? '{value}%' : '{value}',
+                formatter: that.ratioShow ? '{value}%' : '{value}',
               },
             },
             grid: {
@@ -997,11 +1016,12 @@ export default {
             ],
           };
         } else if (type === '折线图') {
+          let that = this;
           option = {
             tooltip: {
               trigger: 'axis',
               formatter(params) {
-                if (this.ratioShow) {
+                if (that.ratioShow) {
                   return `${params[0].name}    ${params[0].value}%`;
                 }
                 return `${params[0].name}    ${params[0].value}`;
@@ -1126,7 +1146,7 @@ export default {
             ],
           });
         } else {
-          option && this.myChart_none.setOption(option);
+          option && this.myChart_none && this.myChart_none.setOption(option);
         }
 
         let that = this;