vent-template/src/components/chart/BarSingle.vue

<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref, reactive, watchEffect, onMounted } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { merge } from 'lodash-es';

  export default defineComponent({
    name: 'BarAndLine',
    props: {
      chartsColumns: {
        type: Array,
        default: () => [],
      },
      chartsColumnsType: {
        type: String,
      },
      dataSource: {
        type: Object,
        default: () => {},
      },
      xAxisData: {
        type: Array,
        default: () => [],
      },
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '100%',
      },
      option: {
        type: Object,
        default: () => ({}),
      },
      color: {
        type: Array,
        default: () => [],
      },
      fontColor: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
      const chartData = getTableHeaderColumns(props.chartsColumnsType) || [];
      const chartsColumns: [] = props.chartsColumns.length > 0 ? props.chartsColumns : chartData;

      const colors =
        props.color.length > 0
          ? props.color
          : [
              [
                { offset: 0.5, color: 'rgba(14, 159, 255, 1)' },
                { offset: 0.6, color: 'rgba(97, 199, 252, 0.8)' },
                { offset: 1, color: 'rgba(97, 199, 252, 0.08)' },
              ],
              [
                { offset: 0.5, color: 'rgba(137, 163, 164, 1)' },
                { offset: 1, color: 'rgba(137, 163, 164, 0.8)' },
                { offset: 1, color: 'rgba(137, 163, 164, 0.08)' },
              ],
              [
                { offset: 0.5, color: 'rgba(44, 166, 166, 1)' },
                { offset: 1, color: 'rgba(44, 166, 166, 0.8)' },
                { offset: 1, color: 'rgba(44, 166, 166, 0.08)' },
              ],
              [
                { offset: 0.5, color: 'rgba(34, 66, 186, 1)' },
                { offset: 1, color: 'rgba(34, 66, 186, 0.8)' },
                { offset: 1, color: 'rgba(34, 66, 186, 0.08)' },
              ],
              [
                { offset: 0.5, color: 'rgba(34, 66, 186, 1)' },
                { offset: 1, color: 'rgba(34, 66, 186, 0.8)' },
                { offset: 1, color: 'rgba(34, 66, 186, 0.08)' },
              ],
            ];

      const option = reactive(
        merge(
          {
            grid: {
              top: '60px',
              bottom: 10,
              right: 20,
              left: 10,
              containLabel: true,
            },
            xAxis: {
              offset: 8,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#006c9d',
                },
              },
              axisLabel: {
                color: '#ffffff',
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(21,80,126,.3)',
                  type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                },
                show: true,
              },
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(205, 95, 255, 1)',
              },
              data: [],
            },

            yAxis: {
              type: 'value',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#006c9d',
                },
              },
              axisLabel: {
                show: true,
                color: '#ffffff',
                // formatter: '{value}' + item.yname
              },
              interval: 1,
              min: 0,
              splitLine: {
                lineStyle: {
                  color: 'rgba(21,80,126,.3)',
                  type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                },
                // show: item.linetype == 'line' ? true : false,
                show: true,
              },
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(205, 95, 255, 1)',
              },
            },

            series: [],
          },
          props.option
        )
      );

      if (props.option) {
        merge(option, props.option);
      }

      watchEffect(() => {
        props.dataSource && option.series && initCharts();
      });

      function initDta(xData: string[], yData: number[], ymax?) {
        // 设置顶部和底部的值
        let symbolData: number[] = [],
          newShadowHight: number[] = [];
        if (!ymax) ymax = Math.max(...yData);

        yData.forEach(() => {
          symbolData.push(1);
          newShadowHight.push(ymax);
        });
        var color = '#fff';

        option.xAxis.data = xData as never[];
        option.series = [
          // 底部
          {
            z: 2,
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolOffset: ['0%', '50%'],
            symbolSize: [30, 12],
            toolltip: {
              show: false,
            },
            itemStyle: {
              color: function (params) {
                return colors[params.dataIndex][1].color;
              },
            },
            data: symbolData, // [1,1,1,1,1]
          },
          // 内容区域
          {
            z: 1,
            type: 'bar',
            barWidth: 30,
            // name: legendData[0].name,
            itemStyle: {
              color: function (params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    // @ts-ignore
                    color: colors[params.dataIndex][1].color,
                  },
                  {
                    offset: 1,
                    color: colors[params.dataIndex][2].color,
                  },
                ]);
              },
            },
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              // formatter: '{c}%',//显示百分号
              textStyle: {
                //数值样式
                // color: function (params) {
                //   return props.fontColor.length > params ? props.fontColor[params.dataIndex] : '#fff';
                // },
                color: color,
                fontSize: 13, //字体大小
              },
            },
            data: yData,
          },

          // 内容的顶部
          {
            z: 3,
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolPosition: 'end',
            symbolOffset: ['0%', '-50%'],
            symbolSize: [30, 12],
            toolltip: {
              show: false,
            },
            itemStyle: {
              color: function (params) {
                color = colors[params.dataIndex][1].color;
                return colors[params.dataIndex][0].color;
              },
            },

            data: yData,
          },
          // 阴影区域
          {
            z: 0,
            type: 'bar',
            barWidth: 30,
            barGap: '-100%',
            data: newShadowHight,
            itemStyle: {
              color: '#00365F66',
            },
          },
          // 阴影的顶部
          {
            z: 3,
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolPosition: 'end',
            symbolOffset: ['0%', '-50%'],
            symbolSize: [30, 12],
            toolltip: {
              show: false,
            },
            itemStyle: {
              color: '#00365F66',
            },
            data: newShadowHight,
          },
        ] as never[];
      }

      function initCharts() {
        //轴数据
        if (option.series) {
          const xAxisData: any[] = [];
          const series: any[] = [];
          const seriesData: any[] = [];
          // const legendData: { name: string, itemStyle: Object }[] = [];
          let ymax = 0;
          props.xAxisData.forEach((item: any, index) => {
            xAxisData.push(item['key']);
            // seriesData.push(props.dataSource[item.valueKey] || '');
            seriesData.push(props.dataSource[item.valueKey]);
          });

          for (let i = 0; i < chartsColumns.length; i++) {
            const item: any = chartsColumns[i];
            // legendData.push({
            //   name: item.legend + (item.yname ? '(' + item.yname + ')' : ''),
            //   itemStyle: {
            //     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colors[i]),
            //   },
            // })
            if (!ymax && item['ymax']) {
              ymax = item['ymax'];
            }
          }

          // option.legend.data = legendData
          // option.series[0].data = seriesData;

          // option.series = series;
          // option.xAxis.data = xAxisData;

          initDta(xAxisData, seriesData);

          console.log('option------------->', option);

          setOptions(option, false);
        }
      }
      return { chartRef };
    },
  });
</script>