封装通用 ECharts 图表组件（二）：圆柱柱状图实现

在数据可视化领域，柱状图是一种常见的图表类型，用于展示不同类别的数据对比。而圆柱柱状图则是柱状图的一种变体，它通过圆柱体来展示数据，使得图表更加立体和生动。本文将介绍如何使用封装组件来实现一个圆柱柱状图。

封装组件概述

封装组件是一种将特定功能模块化的编程实践，它可以帮助我们重用代码，提高开发效率。在本例中，我们将使用Vue.js框架结合ECharts库来封装一个圆柱柱状图组件。

圆柱柱状图效果图

实现步骤

1. 引入依赖

首先，我们需要在项目中引入ECharts库以及一个用于快速生成图表的组件QuickChart。

import * as echarts from 'echarts'
import QuickChart from '@/components/QuickChart'

2. 创建Vue组件

创建一个Vue组件，并定义其组件结构。

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

3. 定义数据

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

data() {
  return {
    resourcexAxis: ['前端设备', '已纳管井场', '已纳管作业区', '前端设备异常', '已纳管联合站', '异常人员'],
    resourceData: ['62', '232', '162', '102', '261', '49'],
  }
},

4. 计算属性

使用计算属性barOption来定义柱状图的配置项。这段代码定义了ECharts图表的配置项，包括图表的布局、坐标轴、提示框、系列等。每个配置项都有其特定的作用，比如grid定义了图表在容器内的位置，xAxis和yAxis分别定义了x轴和y轴的配置，series定义了图表的数据系列，包括背景圆柱和内部柱子等。通过这些配置，我们可以创建出一个具有立体感的圆柱柱状图。

computed: {
  barOption() {
    // 将数组中的字符串转换为数字
    let dataNumbers = this.resourceData.map(Number);
    // 计算最大值
    let maxValue = Math.max(...dataNumbers);
    // 找出大于或等于最大值的最小的100的倍数，用于设置背景柱状图的高度
    let roundedMaxValue = Math.ceil(maxValue / 100) * 100;
    // 创建一个新数组，填充上面计算出的整数倍数值，数量与 this.resourceData 相同
    let maxData = new Array(this.resourceData.length).fill(roundedMaxValue);
    console.log(maxData, '返回新的数组作为背景柱状图的数据');

    return {
      // 网格配置，定义图表在容器内的位置
      grid: {
        left: 60, // 左边界距离
        right: 20, // 右边界距离
        top: 50, // 上边界距离
        bottom: 40, // 下边界距离
      },
      // x轴配置，类型为category，数据为resourcexAxis数组
      xAxis: {
        type: 'category',
        data: this.resourcexAxis,
        axisLabel: {
          show: true, // 显示轴标签
          textStyle: { // 轴标签样式
            fontSize: 21, // 字体大小
            color: '#FFFFFF', // 字体颜色
          },
          interval: 0, // 标签显示间隔，0表示全部显示
        },
      },
      // y轴配置，类型为value
      yAxis: {
        type: 'value',
        // name: '数量/个', // 可以设置轴名称，这里被注释掉了
        nameTextStyle: { // 轴名称样式
          color: '#FFFFFF', // 名称颜色
          fontSize: 22, // 名称字体大小
        },
        splitLine: { // 分割线配置
          show: true, // 显示分割线
          lineStyle: { color: '#FFFFFF', type: 'dashed' }, // 分割线样式
        },
        axisLabel: { // 轴标签配置
          show: true, // 显示轴标签
          textStyle: {
            fontSize: 21, // 字体大小
            color: '#FFFFFF', // 字体颜色
          },
        },
      },
      // 图表类型为move，用于移动柱状图
      type: 'move',
      moveNum: 6, // 移动柱状图的数量
      // 提示框配置
      tooltip: {
        confine: true, // 将提示框限制在图表区域内
        trigger: 'axis', // 触发类型为坐标轴触发
        axisPointer: { // 坐标轴指示器配置
          type: 'shadow', // 指示器类型为阴影
          shadowStyle: { color: 'rgba(145, 145, 145, 0.3)' }, // 阴影样式
        },
        formatter: function (params) {
          // 自定义提示框显示内容
          var param = params.filter(function (item) {
            return item.seriesName === '内部柱子';
          })[0];
          if (param) {
            return param.axisValueLabel + ': ' + param.value;
          }
        },
      },
      // 系列数据配置，包括背景圆柱、内部柱子等
      series: [
        // 背景圆柱-上部圆配置
        {
          name: '上部圆',
          type: 'pictorialBar',
          silent: true, // 不显示提示信息
          symbolSize: [55, 10], // 图形大小
          symbolOffset: [0, -6], // 图形偏移
          symbolPosition: 'end', // 图形位置
          z: 12, // z轴层叠顺序
          color: '#4474A7', // 颜色
          data: maxData, // 数据
        },
        // 背景圆柱配置
        {
          name: '背景圆柱',
          type: 'bar',
          barWidth: 55, // 柱子宽度
          barGap: '10%', // 柱子间隔
          barCateGoryGap: '10%', // 类别间隔
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                // 线性渐变颜色配置
                {
                  offset: 0,
                  color: 'rgba(84,165,255,0.31)',
                },
                {
                  offset: 0.55,
                  color: 'rgba(0,115,255,0.14)',
                },
                {
                  offset: 1,
                  color: 'rgba(4,4,26,0)',
                },
              ]),
              opacity: 0.8, // 透明度
            },
          },
          data: maxData, // 数据
        },
        // 内部柱子配置
        {
          name: '内部柱子',
          type: 'bar',
          barWidth: 55, // 柱子宽度
          z: 12, // z轴层叠顺序
          barGap: '-100%', // 柱子间隔
          // label配置被注释掉了
          // itemStyle配置了颜色渐变
          itemStyle: {
            opacity: 0.7, // 透明度
            color: function (params) {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#0E60B2', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#1FAEDE', // 100% 处的颜色
                  },
                ],
                false,
              )
            },
          },
          data: this.resourceData, // 数据
        },
        // 内部柱子-上部圆配置
        {
          name: '上部圆',
          type: 'pictorialBar',
          silent: true, // 不显示提示信息
          symbolSize: [55, 10], // 图形大小
          symbolOffset: [0, -6], // 图形偏移
          symbolPosition: 'end', // 图形位置
          z: 12, // z轴层叠顺序
          color: '#189BF5', // 颜色
          data: this.resourceData, // 数据
        },
        // 内部柱子-底部圆配置
        {
          name: '底部圆',
          type: 'pictorialBar',
          silent: true, // 不显示提示信息
          symbolSize: [55, 10], // 图形大小
          symbolOffset: [0, 7], // 图形偏移
          z: 12, // z轴层叠顺序
          color: '#007AFF', // 颜色
          data: this.resourceData, // 数据
        },
      ],
    };
  },
},

5. 样式定义

最后，我们为组件添加一些基本的样式。

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

总结

通过上述步骤，我们成功封装了一个圆柱柱状图组件。这个组件可以很容易地集成到任何Vue项目中，并且可以根据需要进行定制和扩展。封装组件不仅提高了开发效率，还使得代码更加简洁和易于维护。

希望本文能够帮助你更好地理解和实现圆柱柱状图的封装组件。如果你有任何问题或建议，请随时在评论区留言，我们一起讨论和学习。