封装一个圆柱体图表组件

最近因为工作需要，封装了一个圆柱体图表组件。

<template>
  <div
    id="barChart"
    ref="barChartContainer"
    style="width: 100%; height: 100%"
  ></div>
</template>

<script>
  import * as echarts from 'echarts'
  import {
    hexToRgb,
    deepMerge,
    addArrays,
    sumArraysUpToIndex,
  } from '@/utils/index.js'
  export default {
    name: 'CgBarChart',
    props: {
      // 图表配置项
      chartOptions: {
        type: Object,
        default: () => ({
          barWidth: 30,
          chartData: [],
          xAxisData: [],
          color: '#ed5b9c',
          echartOptions: {},
        }),
      },
    },
    data() {
      return {
        xAxisData: [],
        barWidth: 30,
        color: '#ed5b9c',
        xAxisName: '区/县',
        yAxisName: '总数',
        maxValue: 100,
        chartInstance: null,
        transparency: 0.3,
        defaultOptions: {},
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleResize)
      this.initChart()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize)
      if (this.chartInstance) {
        this.chartInstance.dispose()
      }
    },
    methods: {
      transformStackData(originalData) {
        // 创建一个Map来动态跟踪每种执法问题的总数
        const issueCounts = new Map()

        // 第一步：收集所有不同的执法问题
        const allIssues = new Set()
        originalData.forEach((cityData) => {
          cityData.data.forEach((issue) => {
            allIssues.add(issue.name)
          })
        })
        // 第二步：初始化每个执法问题的数据列表
        allIssues.forEach((issueName) => {
          issueCounts.set(issueName, [])
        })

        // 第三步：填充每个执法问题的数据
        originalData.forEach((cityData) => {
          cityData.data.forEach((issue) => {
            const issueData = issueCounts.get(issue.name)
            issueData.push(issue.value)
          })
        })

        // 第四步：构造最终结果数组
        const result = []
        issueCounts.forEach((data, name) => {
          result.push({ name, data })
        })
        return {
          series: result,
          legendData: allIssues,
        }
      },
      handleResize() {
        if (this.chartInstance) {
          this.chartInstance.resize()
        }
      },
      generateSeriesConfig() {
        const series = []
        const color = this.chartOptions.color
          ? this.chartOptions.color
          : this.color
        this.chartOptions.chartData.forEach((item, index) => {
          series.push(
            {
              // 上半截柱子(背部阴影bar)
              name: '',
              type: 'bar',
              tooltip: {
                show: false,
              },
              barWidth: this.chartOptions.barWidth || this.barWidth,
              barGap: '-100%',
              z: 0,
              itemStyle: {
                //lenged文本
                opacity: 1,
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    [
                      {
                        offset: 0,
                        // color: rgba(237, 91, 156, 0.4)", // 0% 处的颜色
                        color: `${hexToRgb(color, 0.4)}`,
                      },
                      {
                        offset: 1,
                        // color: "rgba(237, 91, 156, 0.4)", // 100% 处的颜色
                        color: `${hexToRgb(color, 0.4)}`,
                      },
                    ],
                    false
                  )
                },
              },
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => this.chartOptions.maxValue || this.maxValue
              ),
            },
            {
              ///最顶部圆片(背部阴影最顶部圆片)
              name: '',
              tooltip: {
                show: false,
              },
              type: 'pictorialBar',
              symbolSize: [30, 10],
              symbolOffset: [0, -5],
              z: 3,
              symbolPosition: 'end',
              itemStyle: {
                // color: "rgba(237, 91, 156, 0.4)",
                color: `${hexToRgb(color, 0.4)}`,
                opacity: 1,
              },
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => this.chartOptions.maxValue || this.maxValue
              ),
            },
            {
              //数据柱子 (蓝色柱子)
              name: item.name,
              type: 'bar',
              barWidth: this.chartOptions.barWidth || this.barWidth,
              barGap: '-100%',
              tooltip: {
                show: false,
              },
              itemStyle: {
                //lenged文本
                opacity: 1,
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    [
                      {
                        offset: 0,
                        // color: "rgba(237, 91, 156)", // 0% 处的颜色
                        color: `${hexToRgb(color, 0.4)}`,
                      },
                      {
                        offset: 1,
                        // color: "rgba(237, 91, 156)", // 100% 处的颜色
                        color: `${hexToRgb(color, 1)}`,
                      },
                    ],
                    false
                  )
                },
              },
              data: this.chartOptions.chartData.map((item) => {
                return item.value
              }),
            },
            {
              //数据圆片(蓝色柱子的顶部圆片)
              name: item.name,
              type: 'pictorialBar',
              symbolSize: [30, 10],
              symbolOffset: [0, -5],
              z: 3,
              itemStyle: {
                opacity: 1,
                //   color: "rgb(27, 140, 255)",
                color: color,
              },
              symbolPosition: 'end',
              data: this.chartOptions.chartData.map((item) => {
                return item.value
              }),
              // 柱子顶部显示值
              // label: {
              //     show: true,
              //     position: 'top',
              //     distance: 0,
              //     formatter: '{c}'
              // },
            },
            {
              //最底部圆片
              name: item.name,
              type: 'pictorialBar',
              symbolSize: [30, 12], //圆片的形状大小
              symbolOffset: [0, -4], //圆片的偏移量
              z: 3,
              itemStyle: {
                opacity: 1,
                //   color: "rgb(0, 111, 255)",
                color: color,
                //   color: '#000'
              },
              symbolPosition: 'end',
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => 1
              ),
            }
          )
        })
        return series
      },
      initChart() {
        const chartContainer = this.$refs.barChartContainer
        this.chartInstance = echarts.init(chartContainer)
        this.updateChart()
      },
      // 生成单柱渐变配置项
      generateSingleGradientOption() {
        const name = this.chartOptions.chartData[0].name
        const option = {
          title: {
            text: '',
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: '#000342',
            textStyle: {
              color: '#fff',
            },
          },
          xAxis: {
            type: 'category',
            name: this.chartOptions.xAxisName || this.xAxisName,
            axisLabel: {
              fontSize: 14,
              margin: 20,
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            axisTick: {
              show: true,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            data:
              this.chartOptions.chartData.map((item) => item.label) ||
              this.chartOptions.xAxisData,
          },
          yAxis: {
            type: 'value',
            name: this.chartOptions.yAxisName
              ? this.chartOptions.yAxisName + '        '
              : this.yAxisName + '        ',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#153d7d',
                type: 'dashed',
              },
            },
            axisTick: {
              show: true,
              inside: true,
              length: 10,
            },
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value}',
            },
          },
          series: [
            // 上半截柱子(背部阴影bar)
            {
              name: '',
              type: 'bar',
              tooltip: {
                show: false,
              },
              barWidth: this.chartOptions.barWidth || this.barWidth,
              barGap: '-100%',
              z: 0,
              itemStyle: {
                opacity: this.chartOptions.isShowBgBar ? 1 : 0,
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    this.chartOptions.bgBarColors,
                    false
                  )
                },
              },
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => this.chartOptions.maxValue || this.maxValue
              ),
            },
            //最顶部圆片(背部阴影最顶部圆片)
            {
              name: '',
              tooltip: {
                show: false,
              },
              type: 'pictorialBar',
              symbolSize: [this.chartOptions.barWidth || this.barWidth, 10],
              symbolOffset: [0, -5],
              z: 3,
              symbolPosition: 'end',
              itemStyle: {
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    this.chartOptions.bgBarColors,
                    false
                  )
                },
                opacity: this.chartOptions.isShowBgBar ? 1 : 0,
              },
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => this.chartOptions.maxValue || this.maxValue
              ),
            },
            //数据柱子 (蓝色柱子)
            {
              name: name,
              type: 'bar',
              barWidth: this.chartOptions.barWidth || this.barWidth,
              barGap: '-100%',
              itemStyle: {
                //lenged文本
                opacity: 1,
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    this.chartOptions.barGradColors,
                    false
                  )
                },
              },
              data: this.chartOptions.chartData.map((item) => {
                return item.value
              }),
            },
            {
              //数据圆片(蓝色柱子的顶部圆片)
              name: '',
              tooltip: {
                show: false,
              },
              type: 'pictorialBar',
              symbolSize: [this.chartOptions.barWidth || this.barWidth, 10],
              symbolOffset: [0, -5],
              z: 3,
              itemStyle: {
                opacity: 1,
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    this.chartOptions.barGradColors,
                    false
                  )
                },
              },
              symbolPosition: 'end',
              data: this.chartOptions.chartData.map((item) => {
                return item.value
              }),
            },
            {
              //最底部圆片
              name: '',
              type: 'pictorialBar',
              tooltip: {
                show: false,
              },
              symbolSize: [this.chartOptions.barWidth || this.barWidth, 12], //圆片的形状大小
              symbolOffset: [0, -4], //圆片的偏移量
              z: 3,
              itemStyle: {
                opacity: 1,
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    this.chartOptions.barGradColors,
                    false
                  )
                },
              },
              symbolPosition: 'end',
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => 1
              ),
            },
          ],
        }

        return option
      },
      // 生成堆积圆柱图
      generateMutlpGradientOption() {
        const { series: newSeries, legendData: legendData } =
          this.transformStackData(this.chartOptions.chartData)
        let res = []
        const arrays = newSeries.map((item) => item.data)
        newSeries.forEach((item, index) => {
          res.push(
            // 重残
            {
              name: item.name, // Bar图的底部
              type: 'pictorialBar',
              symbolSize: [this.chartOptions.barWidth || this.barWidth, 10],
              symbolOffset: [0, 0],
              z: 12,
              tooltip: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: this.chartOptions.barBottomColors[index],
                  opacity: index === 0 ? 1 : 0,
                },
              },
              data: index === 0 ? item.data : sumArraysUpToIndex(arrays, index),
            },
            {
              name: item.name,
              type: 'bar',
              stack: '分析',
              barWidth: this.chartOptions.barWidth || this.barWidth,
              data: item.data,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: this.chartOptions.barGradColors[index],
                    global: false, // 缺省为 false
                  },
                  opacity: 0.8,
                },
              },
            },
            {
              name: item.name, // bar图的顶部
              type: 'pictorialBar',
              symbolSize: [this.chartOptions.barWidth || this.barWidth, 10],
              symbolOffset: [0, -5],
              z: 12,
              tooltip: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: this.chartOptions.barTopColors[index],
                },
              },
              // label: {
              //     show: true,
              //     position: 'top',
              //     fontSize: 16,
              // },
              symbolPosition: 'end',
              data: index === 0 ? item.data : sumArraysUpToIndex(arrays, index),
            }
          )
        })
        const option = {
          title: {
            text: '',
          },
          legend: {
            show: true,

            data: this.chartOptions.legendData.map((item, index) => {
              return {
                name: item,
                icon: 'none', // 可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 之一
                textStyle: {
                  color: '#fff', // 图例文字的样式
                },
                // 显式设置图例颜色
                itemStyle: {
                  color: this.chartOptions.barTopColors[index], // 这里设置为你柱子的实际颜色
                },
              }
            }),
            // data: legendData
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: '#000342',
            textStyle: {
              color: '#fff',
            },
          },
          xAxis: {
            type: 'category',
            name: this.chartOptions.xAxisName || this.xAxisName,
            axisLabel: {
              interval: 0,
              fontSize: 14,
              margin: 20,
              formatter: function (params) {
                var newParamsName = ''
                var paramsNameNumber = params.length
                var provideNumber = 3 //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }
                } else {
                  newParamsName = params
                }
                return newParamsName
              },
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            axisTick: {
              show: true,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            data: this.chartOptions.xAxisData,
          },
          yAxis: {
            type: 'value',
            name: this.chartOptions.yAxisName
              ? this.chartOptions.yAxisName + '        '
              : this.yAxisName + '        ',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#153d7d',
                type: 'dashed',
              },
            },
            axisTick: {
              show: true,
              inside: true,
              length: 10,
            },
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value}',
            },
          },
          series: res,
        }

        return option
      },
      // 生成默认圆柱图配置项
      generateDefaultOption() {
        const color = this.chartOptions.color
          ? this.chartOptions.color
          : this.color
        const name = this.chartOptions.chartData[0].name
        const option = {
          title: {
            text: '',
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: '#000342',
            textStyle: {
              color: '#fff',
            },
          },
          xAxis: {
            type: 'category',
            name: this.chartOptions.xAxisName || this.xAxisName,
            axisLabel: {
              fontSize: 14,
              margin: 20,
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            axisTick: {
              show: true,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            data:
              this.chartOptions.chartData.map((item) => item.label) ||
              this.chartOptions.xAxisData,
          },
          yAxis: {
            type: 'value',
            name: this.chartOptions.yAxisName
              ? this.chartOptions.yAxisName + '        '
              : this.yAxisName + '        ',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#1d97cf',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#153d7d',
                type: 'dashed',
              },
            },
            axisTick: {
              show: true,
              inside: true,
              length: 10,
            },
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value}',
            },
          },
          series: [
            {
              // 上半截柱子(背部阴影bar)
              name: '',
              type: 'bar',
              tooltip: {
                show: false,
              },
              barWidth: this.chartOptions.barWidth || this.barWidth,
              barGap: '-100%',
              z: 0,
              itemStyle: {
                //lenged文本
                opacity: 1,
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    [
                      {
                        offset: 0,
                        // color: rgba(237, 91, 156, 0.4)", // 0% 处的颜色
                        color: `${hexToRgb(color, 0.4)}`,
                      },
                      {
                        offset: 1,
                        // color: "rgba(237, 91, 156, 0.4)", // 100% 处的颜色
                        color: `${hexToRgb(color, 0.4)}`,
                      },
                    ],
                    false
                  )
                },
              },
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => this.chartOptions.maxValue || this.maxValue
              ),
            },
            {
              ///最顶部圆片(背部阴影最顶部圆片)
              name: '',
              tooltip: {
                show: false,
              },
              type: 'pictorialBar',
              symbolSize: [this.chartOptions.barWidth || this.barWidth, 10],
              symbolOffset: [0, -5],
              z: 3,
              symbolPosition: 'end',
              itemStyle: {
                // color: "rgba(237, 91, 156, 0.4)",
                color: `${hexToRgb(color, 0.4)}`,
                opacity: 1,
              },
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => this.chartOptions.maxValue || this.maxValue
              ),
            },
            {
              //数据柱子 (蓝色柱子)
              name: name,
              type: 'bar',
              barWidth: this.chartOptions.barWidth || this.barWidth,
              barGap: '-100%',
              itemStyle: {
                //lenged文本
                opacity: 1,
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    [
                      {
                        offset: 0,
                        // color: "rgba(237, 91, 156)", // 0% 处的颜色
                        color: `${hexToRgb(color, 0.4)}`,
                      },
                      {
                        offset: 1,
                        // color: "rgba(237, 91, 156)", // 100% 处的颜色
                        color: `${hexToRgb(color, 1)}`,
                      },
                    ],
                    false
                  )
                },
              },
              data: this.chartOptions.chartData.map((item) => {
                return item.value
              }),
            },
            {
              //数据圆片(蓝色柱子的顶部圆片)
              name: '',
              tooltip: {
                show: false,
              },
              type: 'pictorialBar',
              symbolSize: [this.chartOptions.barWidth || this.barWidth, 10],
              symbolOffset: [0, -5],
              z: 3,
              itemStyle: {
                opacity: 1,
                //   color: "rgb(27, 140, 255)",
                color: color,
              },
              symbolPosition: 'end',
              data: this.chartOptions.chartData.map((item) => {
                return item.value
              }),
              // 柱子顶部显示值
              // label: {
              //     show: true,
              //     position: 'top',
              //     distance: 0,
              //     formatter: '{c}'
              // },
            },
            {
              //最底部圆片
              name: '',
              type: 'pictorialBar',
              tooltip: {
                show: false,
              },
              symbolSize: [this.chartOptions.barWidth || this.barWidth, 12], //圆片的形状大小
              symbolOffset: [0, -4], //圆片的偏移量
              z: 3,
              itemStyle: {
                opacity: 1,
                //   color: "rgb(0, 111, 255)",
                color: color,
                //   color: '#000'
              },
              symbolPosition: 'end',
              data: Array.from(
                { length: this.chartOptions.chartData.length },
                (_) => 1
              ),
            },
          ],
        }

        return option
      },
      generateChartOption() {
        let option = {}
        if (this.chartOptions.type === 'default') {
          option = this.generateDefaultOption()
        } else if (this.chartOptions.type == 'singleGrad') {
          option = this.generateSingleGradientOption()
        } else if (this.chartOptions.type === 'mutliGrad') {
          // option = this.generateTestOption();
          option = this.generateMutlpGradientOption()
        }
        if (!this.chartOptions.type) {
          option = this.generateDefaultOption()
        }
        this.defaultOptions = option

        const mergedOptions = deepMerge({}, this.defaultOptions)
        const res = deepMerge(
          mergedOptions,
          this.chartOptions.echartOptions || {}
        )
        return res
      },
      updateChart() {
        const option = this.generateChartOption()
        this.chartInstance.setOption(option, true)
      },
    },
    watch: {
      chartOptions: {
        deep: true,
        handler() {
          this.updateChart()
        },
      },
    },
  }
</script>

<style lang="scss" scoped></style>