在数据可视化领域，ECharts是一个非常流行且功能强大的图表库。它提供了丰富的图表类型，能够满足各种复杂的数据展示需求。在本系列的第三篇文章中，我们将探讨如何封装一个通用的 ECharts环形图组件。
什么是环形图？
环形图是一种特殊的饼图，它由一个内圆和一个外圆组成，中间的部分是空的，形成一个环形。这种图表非常适合用来展示占比关系，同时保持视觉上的吸引力。
环形图效果图
封装组件的优势
封装 ECharts 组件可以带来以下好处：
- 代码复用：创建一个可复用的组件，可以在多个项目中使用，减少重复代码。
- 维护方便：集中管理图表配置，便于维护和更新。
- 灵活性：通过 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 组件。
标签：封装,show,样式,标签,配置,图表,组件,ECharts From： https://blog.csdn.net/m0_54340021/article/details/139228915