echarts实践总结(常用三)：圆环(特点：圆环、多层嵌套的间隙、标题问题解决)

2024-03-25 02:28
文章标签 特点 问题 总结 实践 解决 常用 嵌套 间隙 多层 标题 echarts 圆环

本文主要是介绍echarts实践总结(常用三)：圆环(特点：圆环、多层嵌套的间隙、标题问题解决)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

第一章 基本使用

第二章  echarts实践——圆环

2.1 前言

2.1 正常圆环

2.2 多个圆环嵌套(间隔的另外一种处理方式)

  • 效果展示——圆环

  • 效果展示——多圆环嵌套

第一章 基本使用

Echarts常用配置项(详细入门)_echarts配置项手册-CSDN博客

第二章  echarts实践——圆环

  • html部分
<div class="bar" style="width: 1000px;height: 500px;"><!-- 圆环 --><div id="handlerView" style="width: 100%;height: 100%;"></div>
</div>

2.1 前言

  • 百度时，我们查询这类效果图时，会遇到各种各样的解决方案，但是当我们放到自己项目时总会觉得达不到自己想要的效果，接下来小编通过两部分来解决有空格的圆环在什么情况下使用什么方法。

2.1 正常圆环

  • 解决问题1：如果时一个圆环的情况下，我们想要插入空格只需要使用这种描边效果即可，配置api如下
itemStyle: { borderWidth: 5, // 描边线宽，为 0 时无描边。borderColor: '#FFFFFF' // 描边线颜色
},
  • 解决问题2：高亮问题，说明如下
// highlight 高亮指定的数据图形
dispatchAction({type: 'highlight',// 可选，系列 index，可以是一个数组指定多个系列seriesIndex?: number|Array,// 可选，系列名称，可以是一个数组指定多个系列seriesName?: string|Array,// 可选，数据的 indexdataIndex?: number,// 可选，数据的 名称name?: string
})
// downplay 取消高亮指定的数据图形
dispatchAction({type: 'downplay',// 可选，系列 index，可以是一个数组指定多个系列seriesIndex?: number|Array,// 可选，系列名称，可以是一个数组指定多个系列seriesName?: string|Array,// 可选，数据的 indexdataIndex?: number,// 可选，数据的 名称name?: string
})
  • 详细配置如下：(使用源码可以先拷贝下来针对点改，每一个配置项都有详细说明) 
    <script src="./base_js/echarts.min.js"></script><script>const roseViewDom = document.getElementById('handlerView')const roseChart = echarts.init(roseViewDom)// 定义了内部圆渐变颜色信息const innerGradient = new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{ offset: 0, color: '#F6F9FF' },{ offset: 0.91, color: '#F6F9FF' },{ offset: 0.91, color: 'rgba(108, 137, 195, 0.01)' },{ offset: 1, color: 'rgba(108, 137, 195, 0.30)' }])const ROSE_DATA = [ // 数据格式{value: 5000,rate: 25,name: '王者荣耀',color: '#6ECDF9'},{value: 4300,rate: 22,name: '蛋仔派对',color: '#65B3FF'},{value: 3000,rate: 17,name: '刺激战场',color: '#5A93FC'},{value: 2867,rate: 15,name: '第五人格',color: '#9A86F3'},{value: 2167,rate: 13,name: '部落冲突',color: '#EB918E'},{value: 1876,rate: 9,name: '帝国时代',color: '#EFAD76'}]// 当前索引值let currentIndex = 0const chartOptions = {tooltip: { // 提示框组件trigger: 'item' // 数据项图形触发},legend: { // 图例组件show: false // 不展示},series: [{type: 'pie', // 类型radius: ['75%', '90%'], // 饼图展示部分avoidLabelOverlap: false, // 是否启用防止标签重叠策略padAngle: 5, // 饼图扇区之间的间隔角度itemStyle: { borderWidth: 5, // 描边线宽，为 0 时无描边。borderColor: '#FFFFFF' // 描边线颜色},label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息show: false, // 是否展示labe标签position: 'center', // 标签的位置formatter: (params) => { // 自定义标签内容：标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。const { rate, name } = params.datareturn `
{rate|${rate}%}{name|${name}}`},rich: { // 自定义富文本样式：与formatter同名设置rate: {fontWeight: 'bold',fontSize: '24',color: '#333333'},name: {fontWeight: '500',fontSize: '14',color: '#666666'}}},labelLine: { // 标签的视觉引导线配置show: false},emphasis: { // 高亮状态的扇区和标签样式label: { // 标签样式show: true}},data: ROSE_DATA.map(item => { // 数据return { ...item, itemStyle: { color: item.color } }})},{type: 'pie',color: innerGradient,radius: ['0%', '65%'],emphasis: {disabled: true // 是否关闭高亮状态},tooltip: { // 提示框组件show: false},data: [{ value: 0, itemStyle: { color: innerGradient } }]}]}// 使用刚指定的配置项和数据显示图表。chartOptions && roseChart.setOption(chartOptions)roseChart.resize()window.addEventListener('resize', () => {roseChart.resize()})// 设置高亮 --- 高亮指定的数据图形roseChart.dispatchAction({type: 'highlight', seriesIndex: 0, // series 数据数组第几个dataIndex: currentIndex // 可选，数据的 index})roseChart.on('mouseover', e => {if (e.seriesIndex != 0) {return}//取消默认高亮roseChart.dispatchAction({type: 'downplay', // 取消高亮指定的数据图形seriesIndex: 0,dataIndex: currentIndex})currentIndex = e.dataIndex //将当前高亮的序号记录下来//鼠标悬停位置高亮roseChart.dispatchAction({type: 'highlight',seriesIndex: e.seriesIndex,dataIndex: e.dataIndex})})</script>

2.2 多个圆环嵌套(间隔的另外一种处理方式)

  • 问题解释：如果是多个圆环嵌套，那么当我们再使用上面那种方法时，效果如下：

这种方法的弊端就是外圆环与内圆环之间有间隔（如果大家的需求是这样的，那么知道上面那一方法即可，小编需求是后续的这种思路，与效果图一样，圆环与圆环之前嵌套，且他们之间没有间隔） 

  • 思路：(具体解决一定要看小编的源代码，都做了详细的说明)
  1. 了解圆环的我们都知道，圆环的每一个图形都是通过值渲染上的，那么我们是不是也可以对原来的的数据重新修改呢；其次，为了与后端配合，一般后端是不会给我们传一些没用的数据的，所以我们又如何处理数据呢？——小编的解决方法是先拿到后端传的值，然后在前端自己先处理数据，对每一个数据之间添加空格，表示我们之后需要渲染出空隙
  2. 先做初步修改，然后在配置项处理好之后再对数据结构处理，添加对象、值多大(空隙要展示多大)、颜色要透明(空隙没有颜色)
  • 遇到的问题解决：

1、解决文本标签居中展示——这里有两种方法，方法一：利用title配置项设置文本文字，然后通过left、top定位的方式将他们定位到大致居中的地方(缺点：当我们图表大小随着页面发生变化时，这个布局也可以会发生变化)；方法二：利用label配置项的position定位实现，实现方法在后续代码中（小编对比两个，最终更倾向于方法二）

文本居中方法一——

文本居中方法二—— 

 2、解决高亮展示问题，该方法与2.2圆环解决方法一样

3、解决前端自己配置的数据，鼠标移入数据展示的问题——方法：小编最终通过定义全局值实现，如果是鼠标滑过自己定义的圆环块，直接不计算，沿用上一次有效数据的值

  • 问题效果展示：

  •  最终代码，以及详细说明——
<script src="./base_js/echarts.min.js"></script>
<script>
const channelViewDom = document.getElementById('handlerView')
let channelChart = echarts.init(channelViewDom)
const CHANNEL_DATA = [{ // 数据格式name: '大厅办件',value: 8300
}, {name: '网上办件',value: 3000
}]
const channel_first_name = CHANNEL_DATA[0].name // 拿到第一个数据的name
let channel_total = 0 // 数据总数初始值
CHANNEL_DATA.forEach((item, index) => { // 计算数据总数channel_total += Number(item.value)
})
const channel_first_percent = Number((Number(CHANNEL_DATA[0].value) / channel_total).toFixed(2)) * 100 + '%' // 计算第一个数据的占比
let CHANNEL_COLOR_LIST1 = ['#FAAF45', '#5A93FC'] // 后续设置颜色的数组
let channelColorEle = ''
CHANNEL_COLOR_LIST1 = dealData(CHANNEL_COLOR_LIST1, channelColorEle) // 处理颜色数据，对每一个数据之间添加空格，后续图标有对应的颜色赋值空隙展示
let CHANNEL_COLOR_LIST2 = ['#F3ECE3', '#DBE8FF'] 
CHANNEL_COLOR_LIST2 = dealData(CHANNEL_COLOR_LIST2, channelColorEle)
let channelOption = {backgroundColor: '#F2F7FF', // 背景色legend: { // 图例组件left: '50%', // 图例组件离容器左侧的距离top: 'center', // 图例组件离容器顶部的距离selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态formatter: function (name) { // 自定义图例文本let total = 0let targetfor (let i = 0; i < CHANNEL_DATA.length; i++) {total += CHANNEL_DATA[i].valueif (CHANNEL_DATA[i].name === name) {target = CHANNEL_DATA[i].value}}let arr = [name, target]return `{a|${name}}{b| ${target} }{c| ${'个'}}`},textStyle: { // 图例的公用文本样式。rich: { // 自定义用来格式化图例文本样式a: {color: '#666666',fontSize: 14},b: {color: '#666666',fontSize: 16,fontWeight: 'bold'},c: {color: '#999999',fontSize: 12}}}},series: [{name: '外圆',type: 'pie',radius: ['50%', '60%'],center: ['27%', '50%'],data: CHANNEL_DATA,position: 'outside',minAngle: 5, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互color: [ // 文本颜色'#5A93FC','#4FD1FF'],labelLine: { // 标签的视觉引导线配置show: false},label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息show: true, // 是否展示position: 'center', // 标签的位置 formatter: (params) => { // 自定义标签内容return `
{rate|${channel_first_percent}
{name|${channel_first_name}}`},rich: { // 自定义标签文本样式rate: {fontWeight: 'bold',fontSize: '20',color: '#5A93FC'},name: {fontWeight: '500',fontSize: '14',color: '#666666'}}},itemStyle: { // 图形样式color: function (params) {return CHANNEL_COLOR_LIST1[params.dataIndex]},},z: 666},{name: '内圆',type: 'pie',silent: true,radius: ['40%', '55%'],center: ['27%', '50%'],data: CHANNEL_DATA,minAngle: 5,hoverAnimation: false,labelLine: {show: false},label: {show: false},emphasis: {scale: false,},itemStyle: {color: function (params) {return CHANNEL_COLOR_LIST2[params.dataIndex]}},z: 1},]
}
// 重新对option赋值解决圆环间隔问题
// 数据总数
const channelSum = channelOption.series[0].data.reduce((pre, cur) => {return pre + cur.value
}, 0)
// 计算插入间隔值的范围
const channelVal = channelSum / 100
for (let s of channelOption.series) {let channelEle = { // 要插入的颜色name: '', value: channelVal, itemStyle: { color: 'transparent' }}s.data = dealData(s.data, channelEle) // 重新赋值
}
channelOption && channelChart.setOption(channelOption)
// 处理高亮效果
let currentIndex = 0 //设置初始高亮索引为0的图形
channelChart.dispatchAction({ // 高亮初始记录type: 'highlight',seriesIndex: 0,dataIndex: currentIndex
})
let value = 0 // 记录值
let name = '' // 记录名
channelChart.on('mouseover', (params) => { // 鼠标移入事件if( params.data.name !== '' ){ // 只要不是我们为了添加空袭而添加的数据都进行统计，否则不统计，防止鼠标移入时出现的造的假数据的展示name = params.data.namevalue = Math.round((Number(params.data.value) / channelSum) * 100)}channelChart.setOption({ // 数据更新series: [{name: '外圆',label: {show: false,formatter: (params) => {return `
{rate|${value}%
{name|${name}}`},rich: {rate: {fontWeight: 'bold',fontSize: '20',color: '#5A93FC'},name: {fontWeight: '500',fontSize: '14',color: '#666666'}}},},]})// 处理高亮效果// 取消默认高亮channelChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: currentIndex,})channelChart.dispatchAction({type: 'highlight',seriesIndex: params.seriesIndex,dataIndex: params.dataIndex})currentIndex = params.dataIndex//将当前高亮的序号记录下来//鼠标县停位置高亮
})
// 处理圆环数据每个数组添加空格
function dealData(data, ele) {return data.map((item, index) => {return [item, ele]}).flat()
}
</script>

这篇关于echarts实践总结(常用三)：圆环(特点：圆环、多层嵌套的间隙、标题问题解决)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/843570。

相关文章

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①：StringBui
阅读更多...
C#中读取XML文件的四种常用方法

C#中读取XML文件的四种常用方法

《C#中读取XML文件的四种常用方法》Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具,下面我们就来看看C#中读取XML文件的方法都有哪些吧... 目录XML简介格式C#读取XML文件方法使用XmlDocument使用XmlTextReader/XmlTextWr
阅读更多...
Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
mybatis和mybatis-plus设置值为null不起作用问题及解决

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作
阅读更多...
linux下多个硬盘划分到同一挂载点问题

linux下多个硬盘划分到同一挂载点问题

《linux下多个硬盘划分到同一挂载点问题》在Linux系统中,将多个硬盘划分到同一挂载点需要通过逻辑卷管理（LVM）来实现,首先,需要将物理存储设备（如硬盘分区）创建为物理卷,然后,将这些物理卷组成... 目录linux下多个硬盘划分到同一挂载点需要明确的几个概念硬盘插上默认的是非lvm总结Linux下多
阅读更多...
Python Jupyter Notebook导包报错问题及解决

Python Jupyter Notebook导包报错问题及解决

《PythonJupyterNotebook导包报错问题及解决》在conda环境中安装包后,JupyterNotebook导入时出现ImportError,可能是由于包版本不对应或版本太高,解决方... 目录问题解决方法重新安装Jupyter NoteBook 更改Kernel总结问题在conda上安装了
阅读更多...
golang内存对齐的项目实践

golang内存对齐的项目实践

《golang内存对齐的项目实践》本文主要介绍了golang内存对齐的项目实践,内存对齐不仅有助于提高内存访问效率,还确保了与硬件接口的兼容性,是Go语言编程中不可忽视的重要优化手段,下面就来介绍一下... 目录一、结构体中的字段顺序与内存对齐二、内存对齐的原理与规则三、调整结构体字段顺序优化内存对齐四、内
阅读更多...
pip install jupyterlab失败的原因问题及探索

pip install jupyterlab失败的原因问题及探索

《pipinstalljupyterlab失败的原因问题及探索》在学习Yolo模型时,尝试安装JupyterLab但遇到错误,错误提示缺少Rust和Cargo编译环境,因为pywinpty包需要它... 目录背景问题解决方案总结背景最近在学习Yolo模型，然后其中要下载jupyter(有点LSVmu像一个
阅读更多...
Goland debug失效详细解决步骤(合集)

Goland debug失效详细解决步骤(合集)

《Golanddebug失效详细解决步骤(合集)》今天用Goland开发时,打断点,以debug方式运行,发现程序并没有断住,程序跳过了断点,直接运行结束,网上搜寻了大量文章,最后得以解决,特此在这... 目录Bug：Goland debug失效详细解决步骤【合集】情况一：Go或Goland架构不对情况二：
阅读更多...
解决jupyterLab打开后出现Config option `template_path`not recognized by `ExporterCollapsibleHeadings`问题

解决jupyterLab打开后出现Config option `template_path`not recognized by `ExporterCollapsibleHeadings`问题

《解决jupyterLab打开后出现Configoption`template_path`notrecognizedby`ExporterCollapsibleHeadings`问题》在Ju... 目录jupyterLab打开后出现“templandroidate_path”相关问题这是 tensorflo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2