<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 '../types';
  import { EChartsOption, graphic } from 'echarts';
  import { getData, getFormattedText } from '../hooks/helper';

  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: '#000',
      // 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: '大气压(hPa)',
            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, ';
      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',
            right: '20%',
            top: 'middle',
            itemGap: 20,
            itemWidth: 10,
            itemHeight: 10,
            align: 'left',
            textStyle: {
              fontSize: 18,
              color: '#000',
            },
            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,
          left: 30, // 缩小左侧边距，增加图表宽度
          right: 30, // 缩小右侧边距
        },
        legend: {
          textStyle,
          show: legend.show,
        },
        tooltip: {
          trigger: 'item',
        },
        dataZoom: baseDataZoom,
        xAxis: xAxis.map((e) => {
          return {
            ...e,
            dataZoom: baseDataZoom,
            type: 'category',
            axisLabel: {
              interval: 0,
              width: baseDataZoom.length ? 100 : 800 / get(baseSeries, '[0].data.length', 1),
              overflow: 'break',
              rotate: get(e, 'axisLabel.rotate', 0), // 读取配置表中的rotate值，默认0
            },
          };
        }),
        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>
