体质分析图表 legend 移除 体质 选项

src/modules/report/PhysiqueChart.vue

@@ -11,10 +11,7 @@ provide(...theme);
 
 const option = ref<EChartsOption>({
   backgroundColor: 'transparent',
-  dataset: {
-    dimensions: [ '体质', '得分', '类别' ],
-    source: [],
-  },
+  legend: { top: 10, right: 10, },
   grid: {
     containLabel: true,
     top: 50,
@@ -32,24 +29,9 @@ const option = ref<EChartsOption>({
     axisLine: { show: false },
     axisLabel: { show: false },
   },
-  visualMap: {
-    type: 'piecewise',
-    inRange: {},
-    categories: [],
-    dimension: 2,
-    orient: 'horizontal',
-    top: 10,
-    right: 10,
-  },
-  series: [
-    {
-      type: 'bar',
-      barMaxWidth: 30,
-    },
-  ],
+  series: [],
 });
 
-
 const defaultSetting = [
   { label: '平和体质(正常体质)', color: '#38ff6e' },
   { label: '所属体质', color: '#ff8917' },
@@ -59,24 +41,24 @@ const defaultSetting = [
 ];
 
 watchEffect(() => {
-  const ref = new Set<number>(dataset.map(item => item[ 2 ]));
-  const categories = [];
-  const colors = [];
-  for ( const key of ref ) {
-    const { label, color } = defaultSetting[ key ] ?? {};
-    if ( label ) categories.push(label);
-    if ( color ) colors.push(color);
+  const ref = new Set<number>(dataset.map((item) => item[2]));
+
+  const legend: EChartsOption['legend'] & {} = { data: [] };
+  const series: EChartsOption['series'][] = [];
+
+  for (const key of ref) {
+    const { label: name, color } = defaultSetting[key] ?? {};
+    series.push({
+      name, type: 'bar',
+      barMaxWidth: 30, barGap: '-100%',
+      data: dataset.filter((item) => item[2] === key), itemStyle: { color },
+    });
+
+    if (name !== '体质') legend.data?.push({ name, itemStyle: { color } });
   }
 
-  option.value.dataset = {
-    ...option.value.dataset,
-    source: dataset.map(item => [ item[ 0 ], item[ 1 ], defaultSetting[ item[ 2 ] ]?.label ]),
-  };
-  option.value.visualMap = {
-    ...option.value.visualMap,
-    categories,
-    inRange: { color: colors },
-  };
+  option.value.legend = { ...option.value.legend, ...legend };
+  option.value.series = series as any;
 });
 
 const chart = useTemplateRef<InstanceType<typeof VChart>>('chart');

src/modules/report/echart.ts

@@ -1,7 +1,12 @@
 import type { BarSeriesOption, RadarSeriesOption }                                    from 'echarts/charts';
 import { BarChart, RadarChart }                                                       from 'echarts/charts';
-import type { DatasetComponentOption, GridComponentOption, VisualMapComponentOption } from 'echarts/components';
-import { DatasetComponent, GridComponent, VisualMapComponent }                        from 'echarts/components';
+import type {
+  DatasetComponentOption,
+  GridComponentOption,
+  LegendComponentOption,
+  VisualMapComponentOption,
+} from 'echarts/components';
+import { DatasetComponent, GridComponent, LegendComponent, VisualMapComponent } from 'echarts/components';
 import type { ComposeOption }                                                         from 'echarts/core';
 import { use }                                                                        from 'echarts/core';
 import { CanvasRenderer }                                                             from 'echarts/renderers';
@@ -12,7 +17,7 @@ import VChart, { THEME_KEY } from 'vue-echarts';
 use([
   CanvasRenderer,
   DatasetComponent, VisualMapComponent,
-  GridComponent,
+  GridComponent, LegendComponent,
   BarChart,
   RadarChart,
 ]);
@@ -21,6 +26,7 @@ export type EChartsOption = ComposeOption<
   | DatasetComponentOption
   | GridComponentOption
   | VisualMapComponentOption
+  | LegendComponentOption
   | BarSeriesOption
   | RadarSeriesOption
 >;