vent-template/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 { ModuleDataChart } from '/@/views/vent/deviceManager/configurationTable/types';
import { color, EChartsOption, graphic } from 'echarts';
import { getData, getFormattedText } from '../../hooks/helper';
import { getAssetURL } from '/@/utils/ui';
import { size } from 'lodash';

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

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

// 核心方法，生成适用与 echart 的选项，这个方法需要适配 chart 类型的每种子类型
const genChartOption = () => {
  const inst = getInstance();
  const domWidth = inst ? inst.getWidth() : 500;
  // 依据每一个图表配置生成图表选项
  const { yAxis = [], xAxis = [], legend, order, type, sortBy, series, dataZoom = [] } = props.chartConfig;
  const textStyle = {
    color: '#fff',
  };

  let sorttedData: any[] = [];
  if (Array.isArray(props.chartData)) {
    sorttedData = props.chartData;
  } else {
    sorttedData = [props.chartData];
  }
  // 如果这个配置指明了需要排序则执行排序
  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);
      }
    });
  }

  // 该项作为下面所有图表依赖的基准系列数据
  const baseSeries: { name: string; data: [string, string][]; color: string }[] = sorttedData.reduce((res: any[], baseData) => {
    series.forEach((serie) => {
      // 将读取出的数据转为数组
      const temp = getData(baseData, serie.readFrom) || [];

      res.push({
        name: getFormattedText(baseData, serie.label),
        data: (Array.isArray(temp) ? temp : [temp]).map((data) => {
          return [getData(data, serie.xprop), getData(data, serie.yprop)]; /** x y */
          // return { name: getData(data, serie.xprop), value: getData(data, serie.yprop) }; /** x y */
        }),
        color: serie.color,
      });
    });

    return res;
  }, []);

  const baseDataZoom = dataZoom.map((e, i) => {
    return {
      type: 'slider',
      show: e.show,
      // show: get(baseSeries, '[0].data.length', 1) > e.maxAxisLength,
      xAxisIndex: i,
      end: e.end,
    };
  });

  if (type === 'scatter') {
    return {
      textStyle,
      legend: {
        show: legend.show,
        top: 0,
        left: 0,
        orient: 'vertical',
        height: '10%',
        textStyle: {
          width: 80,
          overflow: 'break',
          color: '#fff',
          fontSize: 10,
        },
      },
      grid: {
        left: 40,
        top: 60,
        right: 37,
        bottom: 30,
      },
      dataZoom: [
        {
          type: 'slider',
          xAxisIndex: 0,
          show: true,
          height: 10,
          bottom: 5,
          start: 0,
          end: 100, // 默认显示50%的数据
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
        },
        {
          type: 'inside',
          xAxisIndex: 0,
          zoomOnMouseWheel: true, // 关闭滚轮缩放
          moveOnMouseMove: true, // 开启拖拽平移
          moveOnMouseWheel: true, // 开启滚轮平移
        },
      ],

      xAxis: xAxis.map((e) => ({
        ...e,
        type: 'category',
        axisLabel: {
          width: 80,
          overflow: 'truncate',
          formatter: function (value) {
            const date = new Date(value);
            const yearMonthDay = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            const time = `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
            return [`${yearMonthDay}`, `${time}`].join('\n');
          },
        },
      })),
      yAxis: [
        {
          type: 'value',
          splitLine: { show: false },
          name: '氧气浓度',
          position: 'left',
          min: function (value) {
            return (value.min - 0.5).toFixed(1);
          },
          max: function (value) {
            return (value.max + 0.5).toFixed(1);
          },
          axisLine: {
            lineStyle: {
              color: '#5470C6',
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        {
          type: 'value',
          splitLine: { show: false },
          name: '',
          position: 'left',
          min: function (value) {
            return (value.min - 0.5).toFixed(1);
          },
          max: function (value) {
            return (value.max + 0.5).toFixed(1);
          },
          axisLine: {
            lineStyle: {
              color: '#EE6666',
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        {
          type: 'value',
          splitLine: { show: false },
          name: '大气压',
          position: 'right',
          min: function (value) {
            return value.min - 5;
          },
          max: function (value) {
            return value.max + 5;
          },
          axisLine: {
            lineStyle: {
              color: '#EE6666',
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        {
          type: 'value',
          splitLine: { show: false },
          name: '',
          position: 'right',
          min: function (value) {
            return value.min - 5;
          },
          max: function (value) {
            return value.max + 5;
          },
          axisLine: {
            lineStyle: {
              color: '#EE6666',
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
      ],
      series: baseSeries.map((serie, index) => {
        return {
          yAxisIndex: index,
          ...serie,
          symbolSize: 5,
          type: series[index].type,
        };
      }),
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
    };
  }

  if (type === 'pie') {
    return {
      textStyle,
      legend: {
        textStyle,
        show: legend.show,
      },
      tooltip: {
        trigger: 'item',
      },
      color: ['#73C0DE', '#5470C6', '#91CC75', '#FAC858', '#ED6666', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'],
      series: baseSeries.reduce((curr: EChartsOption[], serie) => {
        const colors = ['#73C0DE', '#5470C6', '#91CC75', '#FAC858', '#ED6666', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'];
        if (baseSeries.length === 1) {
          curr.push({
            ...serie,
            type: 'pie',
            radius: ['30%', '64%'],
            center: ['50%', '55%'],
            z: 1,
            padAngle: 5,
            itemStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              borderWidth: 10,
            },
            label: {
              show: true,
              position: 'inner',
              formatter: '{d}%',
              color: '#fff',
              fontSize: 14,
              rich: {
                d: {
                  fontFamily: '微软雅黑',
                  fontSize: 16,
                  color: '#fff',
                  lineHeight: 30,
                },
              },
            },
            labelLine: { show: false },
            data: serie.data.map((e) => ({
              name: e[0],
              value: e[1],
            })),
          });
          curr.push({
            ...serie,
            type: 'pie',
            radius: ['64%', '74%'],
            center: ['50%', '55%'],
            labelLine: { show: false },
            label: { show: false },
            padAngle: 5,
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 10,
              normal: {
                color: function (obj) {
                  return `${colors[obj['dataIndex']]}88`;
                },
              },
            },
            data: serie.data.map((e) => ({
              name: e[0],
              value: e[1],
            })),
          });
        }
        curr.push({
          ...serie,
          type: 'pie',
          radius: ['25%', '30%'],
          center: ['50%', '55%'],
          labelLine: { show: false },
          label: { show: false },
          z: 5,
          padAngle: 5,
          itemStyle: {
            borderWidth: 10,
            normal: {
              color: function (obj) {
                return `${colors[obj['dataIndex']]}88`;
              },
            },
          },
          data: serie.data.map((e) => ({
            name: e[0],
            value: e[1],
          })),
        });
        return curr;
      }, []),
    };
  }

  if (type === 'pie_halo') {
    // 光环的图片
    const img =
      'data:image/png;base64,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';
    const color = ['#70F081', '#EEE780', '#F07070', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];

    return {
      textStyle,
      legend: {
        textStyle,
        show: legend.show,
      },
      tooltip: {
        trigger: 'item',
      },
      graphic: {
        elements: [
          {
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 120,
              height: 120,
            },
            left: 'center',
            top: 'center',
            position: [20, 20],
          },
        ],
      },
      series: baseSeries.reduce((curr: EChartsOption[], serie) => {
        curr.push({
          ...serie,
          type: 'pie',
          clockWise: false,
          radius: [45, 45],
          label: {
            show: true,
            position: 'outside',
            color: '#ddd',
            formatter: get(legend, 'formatter', '{b}\n{c}pa'),
          },
          labelLine: {
            length: 30,
            length2: 40,
            show: true,
            color: '#00ffff',
          },
          data: serie.data.map((e, i) => ({
            name: e[0],
            value: e[1],

            itemStyle: {
              normal: {
                borderWidth: 10,
                shadowBlur: 30,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          })),
        });
        return curr;
      }, []),
    };
  }

  if (type === 'pie_drag') {
    return {
      legend: baseSeries.map((e) => {
        return {
          orient: 'vertical',
          left: '54%',
          top: '8%',
          itemGap: 34,
          itemWidth: 10,
          itemHeight: 10,
          align: 'left',
          textStyle: {
            fontSize: 14,
            color: '#b3b8cc',
          },
          data: e.data.map((e) => {
            return `${e[0]}： ${e[1]}`;
          }),
        };
      }),
      graphic: {
        elements: [
          {
            type: 'image',
            style: {
              image: getAssetURL('home-container/pie.png'),
              width: 20,
              height: 100,
            },
            left: 'center',
            top: 'center',
          },
        ],
      },
      tooltip: {
        formatter: '{b}',
      },
      series: baseSeries.reduce((curr: EChartsOption[], serie) => {
        curr.push({
          radius: ['40%', '80%'],
          center: ['25%', '50%'],
          type: 'pie',
          z: 10,
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          itemStyle: {
            opacity: 0.7,
          },
          padAngle: 5,
          data: serie.data.map((e) => ({
            name: `${e[0]}： ${e[1]}`,
            value: e[1],
          })),
        });
        curr.push({
          radius: ['40%', '55%'],
          center: ['25%', '50%'],
          type: 'pie',
          z: 5,
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          animation: false,
          tooltip: {
            show: false,
          },
          padAngle: 6,
          data: serie.data.map((e) => ({
            name: `${e[0]}： ${e[1]}`,
            value: e[1],
          })),
        });
        return curr;
      }, []),
    };
  }

  // 柱状图
  if (type === 'bar') {
    return {
      textStyle,
      grid: {
        top: 50,
        bottom: dataZoom.length ? 70 : 30,
      },
      legend: {
        textStyle,
        show: legend.show,
      },
      tooltip: {
        trigger: 'item',
      },
      dataZoom: baseDataZoom,
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
          axisLabel: {
            interval: 0,
            width: baseDataZoom.length ? 100 : 800 / get(baseSeries, '[0].data.length', 1),
            overflow: 'break',
          },
        };
      }),
      yAxis: yAxis.map((e, i) => {
        return {
          ...e,
          splitLine: {
            lineStyle: {
              opacity: i === 0 ? 0.1 : 0,
            },
          },
        };
      }),
      series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
        const colors = ['#66ffff', '#ffff66'];
        if (baseSeries.length === 1) {
          curr.push({
            ...serie,
            type: 'pictorialBar',
            symbol: 'circle',
            symbolPosition: 'end',
            symbolSize: [20, 20],
            symbolOffset: [0, -10],
            barGap: '-100%',
            yAxisIndex: index,
            itemStyle: {
              color: colors[index % colors.length],
            },
          });
        }
        curr.push({
          ...serie,
          type: 'bar',
          silent: true,
          yAxisIndex: index,
          barWidth: 20,
          barGap: '100%',
          label: {
            show: true,
            textStyle,
            position: 'top',
          },
          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` },
            ]),
            borderRadius: [5, 5, 0, 0],
          },
        });

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

  // 折线图和上面的柱状图类似
  if (type === 'line') {
    return {
      textStyle,
      legend: {
        show: legend.show,
        top: 10,
        right: 10,
        textStyle,
      },
      grid: {
        left: 60,
        top: 40,
        right: 60,
        bottom: dataZoom.length ? 70 : 30,
      },
      dataZoom: baseDataZoom,
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
          axisLabel: {
            width: 100,
            overflow: 'break',
          },
        };
      }),
      yAxis: yAxis.map((e, i) => {
        return {
          ...e,
          splitLine: {
            lineStyle: {
              opacity: i === 0 ? 0.1 : 0,
            },
          },
        };
      }),
      series: baseSeries.map((serie) => {
        return {
          ...serie,
          type: 'line',
        };
      }),
    };
  }

  if (type === 'line_enhance') {
    return {
      textStyle,
      legend: {
        show: legend.show,
        top: 10,
        right: 10,
        textStyle,
      },
      tooltip: {
        trigger: 'item',
      },
      grid: {
        left: 60,
        top: 40,
        right: 60,
        bottom: dataZoom.length ? 70 : 30,
      },
      dataZoom: baseDataZoom,
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
          axisLabel: {
            width: 100,
            overflow: 'break',
          },
        };
      }),
      yAxis: yAxis.map((e, i) => {
        return {
          ...e,
          min: (value) => {
            return parseInt(value.min * 0.8);
          },
          max: (value) => {
            return parseInt(value.max * 1.2);
          },
          splitLine: {
            lineStyle: {
              opacity: i === 0 ? 0.1 : 0,
            },
          },
        };
      }),
      series: baseSeries.map((serie) => {
        return {
          ...serie,
          type: 'line',
        };
      }),
    };
  }

  // 平滑曲线图
  if (type === 'line_smooth') {
    return {
      textStyle,
      legend: {
        show: legend.show,
        top: 10,
        textStyle,
      },
      grid: {
        left: 60,
        right: 60,
        bottom: dataZoom.length ? 70 : 30,
      },
      dataZoom: baseDataZoom,
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
        };
      }),
      yAxis: yAxis.map((e, i) => {
        return {
          ...e,
          min: (value) => {
            return parseInt(value.min * 0.8);
          },
          max: (value) => {
            return parseInt(value.max * 1.2);
          },
          splitLine: {
            lineStyle: {
              opacity: i === 0 ? 0.1 : 0,
            },
          },
        };
      }),
      series: baseSeries.map((serie) => {
        return {
          ...serie,
          type: 'line',
          smooth: true,
          itemStyle: {
            opacity: 0,
          },
        };
      }),
    };
  }

  // 折线区域图，即折线下面的区域填满
  if (type === 'line_area') {
    return {
      textStyle,
      legend: {
        textStyle,
        show: legend.show,
      },
      grid: {
        left: 50,
        top: 50,
        right: 50,
        bottom: dataZoom.length ? 70 : 30,
      },
      dataZoom: baseDataZoom,
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            width: 100,
            overflow: 'break',
          },
        };
      }),
      yAxis: yAxis.map((e, i) => {
        return {
          ...e,
          splitLine: {
            lineStyle: {
              color: '#fff',
              opacity: i === 0 ? 0.1 : 0,
            },
          },
        };
      }),
      series: baseSeries.map((serie, index) => {
        const colors = ['#66ffff', '#6666ff'];
        let color;
        if (serie.color) {
          color = serie.color;
        } else {
          color = colors[index % colors.length];
        }
        return {
          ...serie,
          type: 'line',
          symbol: 'none',
          endLabel: { distance: 0 },
          lineStyle: { color: color },
          areaStyle: {
            origin: 'auto',
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: color },
              { offset: 0.2, color: color },
              { offset: 1, color: `${color}22` },
            ]),
          },
        };
      }),
    };
  }

  if (type === 'line_bar') {
    return {
      textStyle,
      legend: {
        textStyle,
        show: legend.show,
        top: 10,
        right: 10,
      },
      grid: {
        left: 40,
        top: 50,
        right: 40,
        bottom: dataZoom.length ? 70 : 30,
        show: false,
      },
      dataZoom: baseDataZoom,
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
        };
      }),
      yAxis: yAxis.map((e) => {
        return {
          ...e,
        };
      }),
      series: baseSeries.map((serie, i) => {
        return {
          ...serie,
          type: i % 2 ? 'line' : 'bar',
          smooth: true,
          barWidth: 20,
        };
      }),
    };
  }

  // 堆叠柱状图
  if (type === 'bar_stack') {
    return {
      textStyle,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        top: 50,
        bottom: 30,
      },
      legend: {
        textStyle,
        show: legend.show,
      },
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
        };
      }),
      yAxis: yAxis.map((e) => {
        return {
          ...e,
          splitLine: {
            lineStyle: {
              color: 'rgba(21,80,126,0.3)',
              type: 'dashed',
            },
          },
        };
      }),
      series: baseSeries.map((serie) => {
        return {
          ...serie,
          type: 'bar',
          stack: 'stackME',
          barMaxWidth: '24',
          emphasis: {
            focus: 'series',
          },
          label: {
            show: true,
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#fff',
              fontSize: 14,
            },
          },
        };
      }),
      color: ['#F56731', '#00E8FF'],
    };
  }

  // 柱状图，圆柱形样式
  if (type === 'bar_cylinder') {
    return {
      textStyle,
      grid: {
        top: 40,
        bottom: 30,
      },
      legend: {
        textStyle,
        show: legend.show,
      },
      tooltip: {
        trigger: 'item',
      },
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
          axisLabel: {
            interval: 0,
            width: (domWidth - 100) / get(baseSeries, '[0].data.length', 1),
            overflow: 'break',
          },
        };
      }),
      yAxis: yAxis.map((e, i) => {
        return {
          ...e,
          splitLine: {
            lineStyle: {
              opacity: i === 0 ? 0.1 : 0,
            },
          },
        };
      }),
      series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
        // const colors = ['#66ffff', '#00ff66', '#ffff66'];
        const colors = ['#73C0DE', '#ED6666', '#5470C6', '#91CC75', '#FAC858', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'];
        if (baseSeries.length === 1) {
          curr.push({
            ...serie,
            type: 'pictorialBar',
            symbol: 'circle',
            symbolPosition: 'end',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            barGap: '-100%',
            yAxisIndex: index,
            itemStyle: {
              color: ({ dataIndex }) => colors[dataIndex % colors.length],
            },
          });
          curr.push({
            ...serie,
            type: 'pictorialBar',
            symbol: 'circle',
            symbolPosition: 'start',
            symbolSize: [20, 10],
            symbolOffset: [0, 5],
            barGap: '-100%',
            yAxisIndex: index,
            itemStyle: {
              color: ({ dataIndex }) => colors[dataIndex % colors.length],
            },
          });
        }
        curr.push({
          ...serie,
          type: 'bar',
          // silent: true,
          yAxisIndex: index,
          barWidth: 20,
          barGap: '100%',
          itemStyle: {
            color: ({ dataIndex }) =>
              new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: `${colors[dataIndex % colors.length]}44` },
                { offset: 0.5, color: colors[dataIndex % colors.length] },
                { offset: 1, color: colors[dataIndex % colors.length] },
              ]),
            borderRadius: [5, 5, 0, 0],
          },
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#ffffffbb',
              fontSize: 13,
            },
            formatter: function (obj) {
              return obj['data'][1];
            },
          },
        });

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

  // 柱状图，圆柱形样式
  if (type === 'bar_cylinder_wide') {
    return {
      textStyle,
      grid: {
        top: 40,
        bottom: 30,
      },
      legend: {
        textStyle,
        show: legend.show,
      },
      tooltip: {
        trigger: 'item',
      },
      xAxis: xAxis.map((e) => {
        return {
          ...e,
          type: 'category',
          axisLabel: {
            interval: 0,
            width: (domWidth - 100) / get(baseSeries, '[0].data.length', 1),
            overflow: 'break',
          },
        };
      }),
      yAxis: yAxis.map((e, i) => {
        return {
          ...e,
          splitLine: {
            lineStyle: {
              opacity: i === 0 ? 0.1 : 0,
            },
          },
        };
      }),
      series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
        // const colors = ['#66ffff', '#00ff66', '#ffff66'];
        const colors = ['#73C0DE', '#ED6666', '#5470C6', '#91CC75', '#FAC858', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'];
        if (baseSeries.length === 1) {
          curr.push({
            ...serie,
            type: 'pictorialBar',
            symbol: 'circle',
            symbolPosition: 'end',
            symbolSize: [50, 10],
            symbolOffset: [0, -5],
            barGap: '-100%',
            yAxisIndex: index,
            itemStyle: {
              color: ({ dataIndex }) => colors[dataIndex % colors.length],
            },
          });
          curr.push({
            ...serie,
            type: 'pictorialBar',
            symbol: 'circle',
            symbolPosition: 'start',
            symbolSize: [50, 10],
            symbolOffset: [0, 5],
            barGap: '-100%',
            yAxisIndex: index,
            itemStyle: {
              color: ({ dataIndex }) => colors[dataIndex % colors.length],
            },
          });
        }
        curr.push({
          ...serie,
          type: 'bar',
          // silent: true,
          yAxisIndex: index,
          barWidth: 50,
          barGap: '100%',
          itemStyle: {
            color: ({ dataIndex }) =>
              new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: `${colors[dataIndex % colors.length]}44` },
                { offset: 0.5, color: colors[dataIndex % colors.length] },
                { offset: 1, color: colors[dataIndex % colors.length] },
              ]),
            borderRadius: [5, 5, 0, 0],
          },
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#ffffffbb',
              fontSize: 13,
            },
            formatter: function (obj) {
              return obj['data'][1];
            },
          },
        });

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

  return {};
};

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

function initCharts() {
  const o = genChartOption();
  setOptions(o as EChartsOption, Boolean(props.chartConfig.clear));
}
</script>