[fix] 修改多要素数据颜色显示问题

SuperMap · Nov 21, 2023 · f850ae8 · f850ae8
1 parent 47eb8f6
commit f850ae8
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 0 deletions.
diff --git a/src/common/chart/ChartMixin.vue b/src/common/chart/ChartMixin.vue
@@ -158,6 +158,10 @@ export default {
     isShow: {
       type: Boolean,
       default: true
+    },
+    filterCategoryValue: {
+      type: String,
+      default: undefined
     }
   },
   data() {
@@ -555,6 +559,25 @@ export default {
         this.datasetChange = false;
         // 设置echartOptions
         this.echartOptions = this._optionsHandler(echartOptions, options);
+        this.setSeriesColor();
+      });
+    },
+    setSeriesColor() {
+      const colorGroup = getMultiColorGroup(this.colorGroupsData, this.colorNumber);
+      const firstSeriesName = this.echartOptions.series[0].name;
+      let SeserieNameTag = firstSeriesName.includes('-') ? firstSeriesName.split('-')[1] : firstSeriesName;
+      let colorIndex = 0;
+      this.echartOptions.series.forEach(serie => {
+        const serieName = serie.name.includes('-') ? serie.name.split('-')[1] : serie.name;
+        if (SeserieNameTag !== serieName) {
+          SeserieNameTag = serieName;
+          colorIndex += 1;
+        }
+        serie.itemStyle = serie.itemStyle || {};
+        serie.itemStyle.color = colorGroup[colorIndex];
+        if (!this.filterCategoryValue) {
+          serie.name = serieName;
+        }
       });
     },
     _optionsHandler(options, dataOptions, dataZoomChanged) {

diff --git a/src/common/chart/__tests__/ChartMixin.spec.js b/src/common/chart/__tests__/ChartMixin.spec.js
@@ -650,4 +650,64 @@ describe('Chart Mixin Component', () => {
     expect(wrapper.emitted().click.length).toBe(1);
     expect(wrapper.emitted().click[0]).toEqual([params]);
   });
+
+  it('setSeriesColor', async done => {
+    const serieItem = {
+      name: 'sale',
+      emphasis: {
+        itemStyle: {}
+      },
+      itemStyle: {
+        barBorderRadius: [0, 15, 15, 0]
+      },
+      stack: 0,
+      type: 'bar',
+      barWidth: 10,
+      data: [22, 65, 86, 48, 43, 53, 34, 33, 24]
+    };
+    const series = [serieItem];
+    const options = {
+      xAxis: yAxis,
+      yAxis: xAxis,
+      legend,
+      series
+    };
+    wrapper = factory({
+      options
+    });
+    expect(wrapper.vm.xBar).toBeTruthy();
+    await wrapper.setProps({
+      options: {
+        ...options,
+        series: [
+          {
+            ...serieItem,
+            label: {
+              normal: {
+                show: true,
+                position: 'center',
+                smart: true
+              }
+            }
+          }
+        ]
+      }
+    });
+    expect(wrapper.vm.echartOptions).toStrictEqual(wrapper.vm.parseOptions);
+    wrapper.vm.setSeriesColor();
+    expect(wrapper.vm.echartOptions.series[0].itemStyle.color).toEqual('#d53e4f');
+    done();
+  });
+
+  it('trigger echarts events', () => {
+    wrapper = factory({
+      options: optionFactory(),
+      datasetOptions: datasetOptionsFactory(['bar']),
+      dataset: geoJSONDataset,
+      associatedMap: true
+    }, { localVue });
+    const chartInstance = wrapper.vm._getEchart();
+    expect(chartInstance).not.toBeUndefined();
+    console.log('chartInstance', chartInstance);
+  });
 });