Echarts环状图总数显示在中间

最新推荐文章于 2023-07-19 10:47:12 发布

Big老爹

最新推荐文章于 2023-07-19 10:47:12 发布

阅读量1.6k

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/lc905786133/article/details/120545589

版权

本文介绍了如何在Echarts环状图中实现焦点触发时隐藏中间的总数显示。通过设置Echarts配置项，包括初始化图表数据、自定义提示框、图例以及系列样式，达到在鼠标悬停时总数自动隐藏的效果，从而增强图表的交互体验。

摘要由CSDN通过智能技术生成

focus触发时中间总数隐藏**

initChart(data) {
const echartData = [
// 占用端口数量
{value: data.usedCount, name: this.language.facility.occupiedPorts},
// 空闲端口数量
{value: data.unusedCount, name: this.language.facility.freePorts},
// 异常端口数量
{value: data.exceptionCount, name: this.language.facility.exceptionPorts},
// 预占端口数量
{value: data.advanceCount, name: this.language.facility.PreemptPorts},
// 虚占端口数量
{value: data.virtualCount, name: this.language.facility.phantomPorts},
];
this.eChartOption = {
title: {
// 端口总数
text: this.language.facility.totalPorts,
left: ‘center’,
top: ‘30%’,
padding: [24, 0],
textStyle: {
color: ‘#bfbfbf’,
fontSize: 15,
fontStyle: ‘bold’,
align: ‘center’,
}
},
tooltip: {
show: true,
trigger: ‘item’,
formatter: ‘{b}: {c} ({