封装通用 ECharts 图表组件（三）：环形图实现

在数据可视化领域，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组件，并定义其组件结构。

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

3. 定义数据

在组件的data函数中定义相应的数据。

data() {
      return {
		legendList: [
		  {
		    name: '作业区',
		    value: '420',
		  },
		  {
		    name: '联合站',
		    value: '423',
		  },
		  {
		    name: '井场',
		    value: '180',
		  },
		  {
		    name: '其他',
		    value: '180',
		  },
		],
      }
},

4. 计算属性

使用计算属性pieOption来定义柱状图的配置项。这段代码定义了一个环形图的配置对象，其中包括了颜色、网格、提示框、系列等配置项。这些配置项共同定义了图表的外观和行为。在实际应用中，你可能需要根据具体的数据和需求来调整这些配置项。

computed: {
  // 定义一个计算属性 'pieOption'，用于生成环形图的配置对象
  pieOption() {
    // 定义用于图表的颜色数组，colorLine 用于扇区渐变的起始颜色，colorLegend 用于渐变的结束颜色
    const colorLine = ['#3D9DFB', '#3EFDB0', '#FFC41C', '#FC7242'];
    const colorLegend = ['#000A1B', '#061C2C', '#192120', '#0E1728'];
    // 初始化数值变量 num，用于累加 legendList 中的所有数值
    let num = 0;
    // 遍历 legendList 数组，计算所有项的数值总和
    for (let i = 0; i < this.legendList.length; i++) {
      num = num + Number(this.legendList[i].value);
    }
    // 返回环形图的配置对象
    return {
      // 定义图表使用的颜色数组
      color: colorLine,
      // 网格配置，用于控制图表元素的位置和间距
      grid: {
        left: 20,  // 左侧边距
        right: 20, // 右侧边距
        top: 20,   // 上边距
        bottom: 20 // 下边距
      },
      // 提示框配置，用于设置鼠标悬浮时显示的信息
      tooltip: {
        trigger: 'item',              // 触发类型为 'item'，即每个扇区
        formatter: '{b}: {c} ({d}%)'  // 格式化字符串，显示名称、数值和百分比
      },
      // 用于定义图表的数据和样式
      series: [
        // 表示环形图的主要扇区
        {
          name: '',                  // 系列名称
          type: 'pie',               // 图表类型为 'pie'，即饼图
          radius: ['70%', '92%'],    // 饼图的内外半径百分比
          // center: ['25%', '50%'], // 饼图的中心位置（这里被注释掉了）
          avoidLabelOverlap: false,  // 设置为 false 以允许标签重叠
          itemStyle: {               // 图表项的样式
            // borderRadius: 10,     // 扇区圆角（这里被注释掉了）
            borderColor: '#fff',     // 扇区边框颜色
            borderWidth: 2,          // 扇区边框宽度
            normal: {                // 普通状态下的样式
              // 为扇区设置渐变色
              color: function (params) {
                // 使用回调函数根据数据项的索引设置渐变色
                return {
                  type: 'linear',  // 渐变类型
                  x: 0,            // 渐变起点 x 坐标
                  y: 0,            // 渐变起点 y 坐标
                  x2: 1,           // 渐变终点 x 坐标
                  y2: 1,           // 渐变终点 y 坐标
                  colorStops: [    // 颜色停止点数组
                    {
                      offset: 0,  // 开始位置
                      color: colorLine[params.dataIndex % colorLine.length],  // 开始颜色
                    },
                    {
                      offset: 1,  // 结束位置
                      color: colorLegend[params.dataIndex % colorLegend.length],  // 结束颜色
                    },
                  ],
                  globalCoord: false,  // 是否使用全局坐标
                };
              },
            },
          },
          label: {
            normal: {                   // 普通状态下的标签
              show: true,               // 显示标签
              position: 'center',       // 标签位置为 'center'，即图表中心
              color: '#9A9EBA',         // 标签字体颜色
              formatter: function () {  // 自定义标签内容
                                        // 使用 '\n' 连接两个字符串，形成多行文本
                let arr = ['{a|' + num + '}', '{b|告警总数}'];
                return arr.join('\n');
              },
              rich: {  // 富文本样式配置
                a: {   // 第一行文本样式
                  fontFamily: 'YouSheBiaoTiHei, YouSheBiaoTiHei',  // 字体
                  fontWeight: 600,    // 字重
                  fontSize: 60,       // 字号
                  color: '#99EEFF;',  // 字体颜色
                  padding: 10,        // 内边距
                },
                b: {  // 第二行文本样式
                  fontWeight: 500,    // 字重
                  fontFamily: 'YouSheBiaoTiHei, YouSheBiaoTiHei',  // 字体
                  fontSize: 50,       // 字号
                  color: '#FFFFFF',   // 字体颜色
                },
              },
            },
            emphasis: {    // 鼠标悬浮时的标签样式
              show: true,  // 显示标签
            },
            position: 'center',  // 标签位置为 'center'
          },
          emphasis: {            // 鼠标悬浮时的样式
            label: {             // 标签样式
              show: true,        // 显示标签
              fontSize: 40,      // 字号
              fontWeight: 'bold',// 字重
            },
          },
          labelLine: {           // 标签线配置
            show: false,         // 不显示标签线
          },
          data: this.legendList, // 传入的数据项
        },
        // 用于绘制内边框圆，增强视觉效果
        {
          type: 'gauge',         // 图表类型为 'gauge'，即仪表盘
          radius: '70%',         // 仪表盘半径
          clockwise: true,       // 顺时针显示
          startAngle: '90',      // 开始角度
          endAngle: '-269.9999', // 结束角度
          splitNumber: 90,       // 分割段数
          pointer: {             // 指针配置
            show: false,         // 不显示指针
          },
          axisLine: {            // 坐标轴线配置
            show: false,         // 不显示坐标轴线
          },
          axisTick: {            // 坐标轴刻度配置
            show: false,         // 不显示坐标轴刻度
          },
          tooltip: {             // 提示框配置
            show: false,         // 不显示提示框
          },
          splitLine: {           // 分隔线配置
            show: true,         // 显示分隔线
            length: 10,         // 分隔线长度
            lineStyle: {        // 分隔线样式
              color: 'rgba(52, 185, 232, .5)',  // 分隔线颜色
              width: 1,                         // 分隔线宽度
            },
          },
          axisLabel: {    // 坐标轴标签配置
            show: false,  // 不显示坐标轴标签
          },
        },
        // 用于绘制外边框圆，增强视觉效果
        {
          name: '外边框',                  // 系列名称
          type: 'pie',                     // 图表类型为 'pie'，即饼图
          clockWise: true,                 // 顺时针显示
          silent: true,                    // 关闭鼠标悬浮提示
          animation: true,                 // 开启动画效果
          radius: ['98%', '100%'],         // 边框半径百分比
          data: [                          // 数据项
            {
              value: 1,                    // 数据值
              itemStyle: {                 // 样式配置
                normal: {                  // 普通状态下的样式
                  borderWidth: 1,          // 边框宽度
                  borderColor: '#DFE1E6',  // 边框颜色
                },
              },
            },
          ],
        },
      ],
    };
  },
},

5. 样式定义

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

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

总结

通过封装 ECharts 环形图组件，我们可以轻松地在任何 Vue 项目中复用和定制图表。这种方法不仅提高了开发效率，还使得图表的维护变得更加简单。

封装组件的过程涉及到对 ECharts 配置项的深入理解，以及 Vue.js 的响应式和组件化特性的应用。希望这篇文章能够帮助你更好地理解和实现自定义的 ECharts 组件。