mky-vent-base/src/views/vent/home/configurable/components/detail/CustomChart.vue

<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { ref, Ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { get } from 'lodash-es';
  import { Config } from '/@/views/vent/deviceManager/configurationTable/types';
  import { EChartsOption, graphic } from 'echarts';
  import { getFormattedText } from '../../../../deviceManager/configurationTable/adapters';

  const props = withDefaults(
    defineProps<{
      chartData: Record<string, any> | Record<string, any>[];
      chartConfig: Config['moduleData']['chart']['0'];
      height: string;
      width: string;
    }>(),
    {
      chartData: () => [],
      height: '100%',
      width: '100%',
    }
  );

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  // 核心方法，生成适用与 echart 的选项，这个方法需要适配 chart 类型的每种子类型
  const genChartOption = () => {
    // 依据每一个图表配置生成图表选项
    const { yAxis = [], xAxis = [], order, type, sortBy, series } = props.chartConfig;
    const isArray = Array.isArray(props.chartData);

    // 饼状图通常依赖单个对象的不同字段绘制
    if (type === 'pie' && !isArray) {
      return {
        legend: { show: false },
        color: ['#d9a1ff', '#00d1ff', '#82fe78'],
        series: [
          {
            type: 'pie',
            radius: ['50%', '75%'],
            center: ['50%', '55%'],
            data: series.map((serie) => {
              return {
                name: serie.label,
                value: get(props.chartData, serie.prop, 0),
                labelLine: { show: false },
                label: { show: false },
                itemStyle: {
                  shadowBlur: 20,
                  shadowColor: '#259bcf',
                },
              };
            }),
          },
        ],
      };
    }
    if (!isArray) return {};

    let sorttedData = [...(props.chartData as any[])];

    // 如果这个配置指明了需要排序则执行排序
    if (sortBy && order) {
      sorttedData.sort((pre, cur) => {
        if (order === 'asc') {
          return get(pre, sortBy, 0) - get(cur, sortBy, 0);
        } else {
          return get(cur, sortBy, 0) - get(pre, sortBy, 0);
        }
      });
    }

    // 柱状图则要求使用数组形式的数据作依赖
    if (type === 'bar') {
      return {
        grid: {
          top: 50,
          height: 150,
        },
        textStyle: {
          color: '#fff',
        },
        legend: { show: false },
        xAxis: xAxis.map((e) => {
          return {
            type: 'category',
            data: sorttedData.map((d) => {
              return getFormattedText(d, e.label);
            }),
          };
        }),
        yAxis: yAxis.map((e) => {
          return {
            name: e.label,
            position: e.align,
            splitLine: {
              lineStyle: {
                color: '#ffffff',
                opacity: 0.3,
              },
            },
          };
        }),
        series: series.reduce((curr: EChartsOption[], serie, index) => {
          const colors = ['#66ffff', '#ffff66'];
          // 系列选项，如果指定了x轴配置则以x轴配置优先
          const data = sorttedData.map((d) => {
            return {
              name: serie.label,
              value: get(d, serie.prop, 0),
            };
          });
          curr.push({
            name: 'pictorial element',
            type: 'pictorialBar',
            symbol: 'circle',
            symbolPosition: 'end',
            symbolSize: [16, 16],
            symbolOffset: [0, -8],
            yAxisIndex: index,
            itemStyle: {
              color: colors[index % colors.length],
            },
            data,
          });
          curr.push({
            name: 'reference bar',
            type: 'bar',
            silent: true,
            yAxisIndex: index,
            itemStyle: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colors[index % colors.length] },
                { offset: 0.2, color: colors[index % colors.length] },
                { offset: 1, color: `${colors[index % colors.length]}22` },
              ]),
            },
            tooltip: { show: false },
            barWidth: 8,
            data,
          });

          return curr;
        }, []),
      };
    }

    // 折线图和上面的柱状图类似
    if (type === 'line') {
      return {
        legend: {
          top: 10,
          right: 10,
          textStyle: {
            color: '#fff',
          },
        },
        // backgroundColor: '#081f33',
        textStyle: {
          color: '#fff',
        },
        grid: {
          left: 60,
          top: 50,
          right: 60,
          bottom: 50,
        },
        xAxis: xAxis.map((e) => {
          return {
            type: 'category',
            data: sorttedData.map((d) => {
              return getFormattedText(d, e.label);
            }),
          };
        }),
        yAxis: yAxis.map((e) => {
          return {
            name: e.label,
            position: e.align,
            splitLine: {
              lineStyle: {
                color: '#fff',
                opacity: 0.3,
              },
            },
          };
        }),
        series: series.map((serie) => {
          const data = sorttedData.map((d) => {
            return {
              name: serie.label,
              value: get(d, serie.prop, 0),
            };
          });

          return {
            type: 'line',
            data,
          };
        }),
      };
    }

    // 折线图和上面的柱状图类似
    if (type === 'line_smooth') {
      return {
        legend: {
          top: 10,
          right: 10,
          textStyle: {
            color: '#fff',
          },
        },
        // backgroundColor: '#081f33',
        textStyle: {
          color: '#fff',
        },
        grid: {
          left: 50,
          top: 50,
          right: 50,
          bottom: 50,
        },
        xAxis: xAxis.map((e) => {
          return {
            type: 'category',
            data: sorttedData.map((d) => {
              return getFormattedText(d, e.label);
            }),
          };
        }),
        yAxis: yAxis.map((e) => {
          return {
            name: e.label,
            position: e.align,
            splitLine: {
              lineStyle: {
                opacity: 0.3,
              },
            },
          };
        }),
        series: series.map((serie) => {
          const data = sorttedData.map((d) => {
            return {
              name: serie.label,
              value: get(d, serie.prop, 0),
            };
          });

          return {
            type: 'line',
            data,
            smooth: true,
          };
        }),
      };
    }

    // 折线图和上面的柱状图类似
    if (type === 'line_area') {
      return {
        legend: {
          show: false,
        },
        // backgroundColor: '#081f33',
        textStyle: {
          color: '#fff',
        },
        grid: {
          left: 50,
          top: 50,
          right: 50,
          bottom: 50,
        },
        xAxis: xAxis.map((e) => {
          return {
            type: 'category',
            boundaryGap: false,
            data: sorttedData.map((d) => {
              return getFormattedText(d, e.label);
            }),
          };
        }),
        yAxis: yAxis.map((e) => {
          return {
            name: e.label,
            position: e.align,
            splitLine: {
              lineStyle: {
                color: '#fff',
                opacity: 0.3,
              },
            },
          };
        }),
        series: series.map((serie, index) => {
          const colors = ['#66ffff', '#6666ff'];
          const data = sorttedData.map((d) => {
            return {
              name: serie.label,
              value: get(d, serie.prop, 0),
            };
          });

          return {
            type: 'line',
            data,
            symbol: 'none',
            endLabel: { distance: 0 },
            // itemStyle: { show: false, opacity: 0 },
            lineStyle: { color: colors[index % colors.length] },
            areaStyle: {
              origin: 'auto',
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colors[index % colors.length] },
                { offset: 0.2, color: colors[index % colors.length] },
                { offset: 1, color: `${colors[index % colors.length]}22` },
              ]),
            },
          };
        }),
      };
    }

    if (type === 'line_bar') {
      return {
        legend: {
          top: 10,
          right: 10,
          textStyle: {
            color: '#fff',
          },
        },
        // backgroundColor: '#081f33',
        textStyle: {
          color: '#fff',
        },
        grid: {
          left: 40,
          top: 50,
          right: 40,
          bottom: 10,
          show: false,
        },
        xAxis: xAxis.map(() => {
          return {
            type: 'category',
            show: false,
          };
        }),
        yAxis: yAxis.map(() => {
          return {
            show: false,
            // name: e.label,
            // position: e.align,
          };
        }),
        series: series.map((serie, i) => {
          const data = sorttedData.map((d) => {
            return {
              name: serie.label,
              value: get(d, serie.prop, 0),
              label: {
                show: true,
                position: 'top',
                borderWidth: 0,
                color: '#fff',
              },
              itemStyle: {
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#66ffff' },
                  { offset: 0.2, color: '#66ffff' },
                  { offset: 1, color: '#66ffff22' },
                ]),
              },
            };
          });

          return {
            type: i % 2 ? 'line' : 'bar',
            smooth: true,
            data,
            barWidth: 20,
          };
        }),
      };
    }

    return {};
  };

  watch(
    () => props.chartData,
    () => {
      initCharts();
    }
  );

  function initCharts() {
    const o = genChartOption();
    setOptions(o as EChartsOption, false);
  }
</script>