mky-vent-base/src/components/chart/BarSingle2.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 { toEchartsData } from '/@/utils/ventutil';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import EchartsUtil from '/@/utils/echartsUtil';

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: 'calc(100vh - 78px)',
    },
  },
  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 labels = ['春节', '元宵节', '端午节', '中秋节'];
    const seriesData = [
      {
        label: '春节',
        value: [32],
      },
      {
        label: '元宵节',
        value: [24],
      },
      {
        label: '端午节',
        value: [42],
      },
      {
        label: '中秋节',
        value: [20],
      }
    ]

    const colors = [
      [
        // { offset: 0, color: 'rgba(73, 190, 255, 1)' },
        { 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)' },
      ],
    ];

    const option = reactive({
      xAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: '#006c9d',
          },
        },
        axisTick: {
          show: false
        },
        nameTextStyle: {
          color: '#fff'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(21,80,126,.3)',
            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
          },
          show: true,
        },
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(205, 95, 255, 1)',
        },
        data: [],
      },
      legend: {
        // data: getlegendData(),
        data: [],
        right: '0',
        top: '18',
        icon: 'rect',
        itemHeight: 10,
        itemWidth: 10,
        textStyle: {
          color: '#fff'
        }
      },
      yAxis: {
        type: 'value',
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#006c9d',
          },
        },
        axisLabel: {
          show: true,
          color: '#ffffffcc',
          // formatter: '{value}' + item.yname
        },
        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: getSeriesData()
      series: []
    });


    // 定义柱状图左侧图形元素
    const CubeLeft = echarts.graphic.extendShape({
      buildPath: function (ctx, shape) {
        const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
        // 侧面宽度
        const WIDTH = 15;
        // 斜角高度
        const OBLIQUE_ANGLE_HEIGHT = 4;

        const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
        const p2 = [basicsXAxis - WIDTH, bottomYAxis];
        const p3 = [basicsXAxis, bottomYAxis];
        const p4 = [basicsXAxis, topBasicsYAxis];

        ctx.moveTo(p1[0], p1[1]);
        ctx.lineTo(p2[0], p2[1]);
        ctx.lineTo(p3[0], p3[1]);
        ctx.lineTo(p4[0], p4[1]);
      },
    });
    // 定义柱状图右侧以及顶部图形元素
    const CubeRight = echarts.graphic.extendShape({

      buildPath: function (ctx, shape) {
        const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
        // 侧面宽度
        const WIDTH = 15;
        // 斜角高度
        const OBLIQUE_ANGLE_HEIGHT = 4;

        const p1 = [basicsXAxis, topBasicsYAxis];
        const p2 = [basicsXAxis, bottomYAxis];
        const p3 = [basicsXAxis + WIDTH, bottomYAxis];
        const p4 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];

        ctx.moveTo(p1[0], p1[1]);
        ctx.lineTo(p2[0], p2[1]);
        ctx.lineTo(p3[0], p3[1]);
        ctx.lineTo(p4[0], p4[1]);
      }
    });

    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
      buildPath: function (ctx, shape) {
        const { topBasicsYAxis, basicsXAxis } = shape;
        // 侧面宽度
        const WIDTH = 15;
        // 斜角高度
        const OBLIQUE_ANGLE_HEIGHT = 4;

        const p1 = [basicsXAxis, topBasicsYAxis];
        const p2 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
        const p3 = [basicsXAxis, topBasicsYAxis - (OBLIQUE_ANGLE_HEIGHT * 2)];
        const p4 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];

        ctx.moveTo(p1[0], p1[1]);
        ctx.lineTo(p2[0], p2[1]);
        ctx.lineTo(p3[0], p3[1]);
        ctx.lineTo(p4[0], p4[1]);
      },
    });

    // 注册图形元素
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);

    function getlegendData() {
      const data = <any[]>[];
      labels.forEach((item, index) => {
        data.push(
          {
            name: item,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colors[index]),
            },
          }
        )
      })
      return data
    }

    function getSeriesData() {
      const data = <any[]>[];
      seriesData.forEach((item, index) => {
        data.push(
          {
            type: 'custom',
            name: item.label,
            renderItem: function (params, api) {
              return getRenderItem(params, api);
            },
            data: item.value,
            itemStyle: {
              color: () => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
              },
            },
          }
        )
      })
      return data
    }

    function getRenderItem(params, api) {
      const index = params.seriesIndex;
      let location = api.coord([api.value(0), api.value(1)]);

      // 顶部基础 y 轴
      const topBasicsYAxis = location[1];
      // 基础 x 轴
      const basicsXAxis = location[0];
      // 底部 y 轴
      const bottomYAxis = api.coord([api.value(0), 0])[1];

      var extent = api.size([0, api.value(1)]);
      // const location = api.coord([api.value(0), api.value(1)]);
      let cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
      let cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
      let cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);

      return {
        type: 'group',
        children: [
          {
            type: 'CubeLeft',
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              stroke: '#ffffff33',
              fill: cubeLeftStyle,
            }
          },
          {
            type: 'CubeRight',
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              stroke: '#ffffff33',
              fill: cubeRightStyle,
            }
          },
          {
            type: 'CubeTop',
            shape: {
              topBasicsYAxis,
              basicsXAxis,
              bottomYAxis,
            },
            style: {
              ...api.style(),
              stroke: '#ffffff33',
              fill: cubeTopStyle,
            }
          }
        ]
      };
    }

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

    // function initChartsOption() {

    //   const optionUtil = new EchartsUtil(option);
    //   optionUtil.initChartOption('listMonitor', chartsColumns);
    //   console.log('option----------->', option);
    // }

    // initChartsOption();
    function initCharts() {

      //轴数据
      if (option.series) {
        const xAxisData: any[] = [];
        const series: any[] = [];
        const seriesData: any[] = [];
        const legendData: { name: string, itemStyle: Object }[] = [];
        props.xAxisData.forEach((item: any, index) => {

          xAxisData.push(item['key']);
          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]),
            },
          })

          series.push(
            {
              type: 'custom',
              name: item.legend + (item.yname ? '(' + item.yname + ')' : ''),
              renderItem: function (params, api) {
                return getRenderItem(params, api);
              },
              data: seriesData,
            })

        }

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

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

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

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