封装通用 ECharts 图表组件（四）：分格柱状图实现

在数据可视化的世界中，ECharts 以其强大的功能和灵活性，成为了开发者们的首选图表库之一。继我们之前探讨的环形图封装之后，本文将带领大家进入另一个实用且美观的图表类型——分格柱状图的封装实现。

分格柱状图简介

分格柱状图是一种特殊的柱状图，它通过将每个柱子分割成多个小格，来更直观地展示数据的对比和层次。这种图表类型非常适合用来展示具有多个维度的数据集，例如不同类别的对比、时间序列的增长等。

分割柱状图效果图

封装组件的优势

封装 ECharts 分格柱状图组件，可以带来以下优势：

1. 代码复用：创建一个可复用的组件，减少在不同项目中重复编写相同代码的工作。
2. 维护方便：集中管理图表配置，使得后期的维护和更新变得更加简单快捷。
3. 灵活性：通过 props 或计算属性传递数据和配置，使得组件能够灵活应对不同的数据展示需求。

实现步骤

1. 引入依赖

首先，确保你的项目中已经引入了 ECharts 库和 QuickChart 组件，用于快速生成图表。

<script>
  import * as echarts from 'echarts'
  import QuickChart from '@/components/QuickChart'
  export default {
    components: { QuickChart},
  }
</srcipt>

2. 创建Vue组件

定义 Vue 组件的结构，并在模板中引入 QuickChart 组件，通过 barOption 属性传入柱状图的配置。

<template>
  <div class="basiContent">
    <div style="width: 100%; height: 100%">
      <QuickChart :option="barOption" />
    </div>
  </div>
</template>

3. 定义数据

在组件的 data 函数中定义 x 轴的类别和相应的数据。

data() {
  return {
    resourcexAxis: ['前端设备', '已纳管井场', '已纳管作业区', '前端设备异常', '已纳管联合站', '异常人员'],
    resourceData: ['3062', '3362', '4062', '1162', '2061', '1029'],
  }
},

4. 计算属性

使用计算属性 barOption 来定义柱状图的配置项。这里定义了图表的颜色、网格、提示框、系列等配置项，并通过 pictorialBar 类型实现了分格效果。

computed: {
  barOption() {
    return {
      // 网格配置，用于控制图表元素的位置和间距
      grid: {
        left: 60,  // 左侧边距设置为60px
        right: 20, // 右侧边距设置为20px
        top: 50,   // 上边距设置为50px
        bottom: 40 // 下边距设置为40px
      },
      // x轴配置
      xAxis: {
        type: 'category',         // x轴类型为分类轴
        data: this.resourcexAxis, // 分类数据来自data中的resourcexAxis数组
        axisLabel: {              // x轴刻度标签配置
          show: true,             // 显示刻度标签
          textStyle: {            // 刻度标签的字体样式
            fontSize: 21,         // 字体大小为21px
            color: '#26DEFF'      // 字体颜色为#26DEFF
          },
          interval: 0,            // 刻度标签的间隔设置，0表示不间隔
        },
      },
      // y轴配置
      yAxis: {
        type: 'value',          // y轴类型为数值轴
        name: '数量/个',         // y轴名称为“数量/个”
        nameTextStyle: {        // y轴名称的字体样式
          color: '#ccc',        // 名称颜色为#ccc
          fontSize: 22,         // 名称字体大小为22px
        },
        splitLine: {            // y轴分割线配置
          show: true,           // 显示分割线
          lineStyle: { color: 'rgba(255, 255, 255, 0.2)', type: 'dashed' }, // 分割线样式为虚线，颜色为淡白色
        },
        axisLabel: {            // y轴刻度标签配置
          show: true,           // 显示刻度标签
          textStyle: {          // 刻度标签的字体样式
            fontSize: 21,       // 字体大小为21px
            color: '#26DEFF',   // 字体颜色为#26DEFF
          },
        },
      },
      // 图表滚动配置
      type: 'move',
      moveNum: 6, // 每次滚动的柱子数量
      // 提示框配置
      tooltip: {
        confine: true,     // 将提示框限制在图表区域内
        trigger: 'axis',   // 提示框触发方式为坐标轴触发
        axisPointer: {     // 坐标轴指示器配置
          type: 'shadow',  // 指示器类型为阴影
          shadowStyle: { color: 'rgba(145, 145, 145, 0.3)' }, // 阴影颜色
        },
        formatter: function (params) {
          // 提示框内容格式化函数
          return params
            .filter(item => item.seriesType === 'bar')
            .map(item => {
              const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(24, 144, 255, 0.8);"></span>`
              return item.axisValueLabel + '<br />' + marker + item.seriesName + ': ' + item.value
            })
            .join('')
        },
      },
      // 数据系列配置
      series: [
        {
          // 普通柱状图系列配置
          name: '数量',
          // data数据来自data中的resourceData数组，并进行了特殊处理
          data: this.resourceData.map((value, index, array) => {
            const maxIndex = array.indexOf(Math.max(...array))
            // 如果当前索引是最大值，则设置特殊的itemStyle
            if (index === maxIndex) {
              return {
                value: value,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    { offset: 0, color: 'rgba(237, 85, 53, 0)' },
                    { offset: 1, color: 'rgba(237, 85, 53, 0.8)' },
                  ]),
                },
              }
            } else {
              return value
            }
          }),
          type: 'bar',  // 图表类型为柱状图
          barWidth: 48, // 柱子宽度为48px
          itemStyle: {  // 柱子样式配置
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // 柱子渐变色配置
              { offset: 0, color: 'rgba(24, 144, 255, 0)' },        // 渐变色起始颜色
              { offset: 1, color: 'rgba(24, 144, 255, 0.8)' },      // 渐变色结束颜色
            ]),
          },
        },
        {
          // 分隔柱状图系列配置
          type: 'pictorialBar',           // 图表类型为分格柱状图
          itemStyle: {                    // 分隔柱样式配置
            normal: { color: '#101522' }, // 分隔柱颜色
          },
          symbolRepeat: true,             // 符号是否重复
          symbolMargin: 4,                // 符号间距
          symbol: 'rect',                 // 符号形状为矩形
          symbolClip: true,               // 是否对超出范围的图形进行裁剪
          symbolSize: [48, 2],            // 符号大小
          symbolPosition: 'start',        // 符号位置在开始
          symbolOffset: [0, 0],           // 符号偏移量
          data: this.resourceData,        // 分隔数据来自data中的resourceData数组
          z: 99,                          // 分隔层级，99表示在普通柱状图之上
        },
      ]
    }
  }
},

5. 样式定义

为组件添加基本的样式，确保图表能够正确显示。

<style lang="scss" scoped>
.basiContent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 280px;
}
</style>

总结

通过封装 ECharts 分格柱状图组件，我们不仅能够提高开发效率，还能使得图表的维护变得更加简单。这种方法涉及到对 ECharts 配置项的深入理解，以及 Vue.js 的响应式和组件化特性的应用。

希望这篇文章能够帮助你更好地理解和实现自定义的 ECharts 分格柱状图组件，让你的数据可视化之旅更加丰富多彩。