gas-injection/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>