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。

相关文章

linux生产者，消费者问题

linux生产者，消费者问题

pthread_cond_wait() ：用于阻塞当前线程，等待别的线程使用pthread_cond_signal()或pthread_cond_broadcast来唤醒它。 pthread_cond_wait() 必须与pthread_mutex 配套使用。pthread_cond_wait()函数一进入wait状态就会自动release mutex。当其他线程通过pthread
阅读更多...
关于C++中的虚拟继承的一些总结（虚拟继承，覆盖，派生，隐藏）

关于C++中的虚拟继承的一些总结（虚拟继承，覆盖，派生，隐藏）

1.为什么要引入虚拟继承 虚拟继承是多重继承中特有的概念。虚拟基类是为解决多重继承而出现的。如:类D继承自类B1、B2，而类B1、B2都继承自类A，因此在类D中两次出现类A中的变量和函数。为了节省内存空间，可以将B1、B2对A的继承定义为虚拟继承，而A就成了虚拟基类。实现的代码如下： class A class B1:public virtual A; class B2:pu
阅读更多...
问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示
阅读更多...
2024.6.24 IDEA中文乱码问题（服务器 控制台 TOMcat）实测已解决

2024.6.24 IDEA中文乱码问题（服务器 控制台 TOMcat）实测已解决

1.问题产生原因： 1.文件编码不一致：如果文件的编码方式与IDEA设置的编码方式不一致，就会产生乱码。确保文件和IDEA使用相同的编码，通常是UTF-8。2.IDEA设置问题：检查IDEA的全局编码设置和项目编码设置是否正确。3.终端或控制台编码问题：如果你在终端或控制台看到乱码，可能是终端的编码设置问题。确保终端使用的是支持你的文件的编码方式。 2.解决方案： 1.File -> S
阅读更多...
C++必修：模版的入门到实践

C++必修：模版的入门到实践

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯，先赞后看哦~🎈🎈 所属专栏：C++学习 贝蒂的主页：Betty’s blog 1. 泛型编程 首先让我们来思考一个问题，如何实现一个交换函数？ void swap(int& x, int& y){int tmp = x;x = y;y = tmp;} 相信大家很快就能写出上面这段代码，但是如果要求这个交换函数支持字符型
阅读更多...
vcpkg安装opencv中的特殊问题记录（无法找到opencv_corexd.dll）

vcpkg安装opencv中的特殊问题记录（无法找到opencv_corexd.dll）

我是按照网上的vcpkg安装opencv方法进行的（比如这篇：从0开始在visual studio上安装opencv（超详细，针对小白）），但是中间出现了一些别人没有遇到的问题，虽然原因没有找到，但是本人给出一些暂时的解决办法： 问题1： 我在安装库命令行使用的是 .\vcpkg.exe install opencv 我的电脑是x64，vcpkg在这条命令后默认下载的也是opencv2:x6
阅读更多...
十五.各设计模式总结与对比

十五.各设计模式总结与对比

1.各设计模式总结与对比 1.1.课程目标 1、 简要分析GoF 23种设计模式和设计原则,做整体认知。 2、 剖析Spirng的编程思想，启发思维,为之后深入学习Spring做铺垫。 3、 了解各设计模式之间的关联，解决设计模式混淆的问题。 1.2.内容定位 1、 掌握设计模式的"道" ，而不只是"术" 2、 道可道非常道，滴水石穿非一日之功，做好长期修炼的准备。 3、 不要为了
阅读更多...
问题-windows-VPN不正确关闭导致网页打不开

问题-windows-VPN不正确关闭导致网页打不开

为什么会发生这类事情呢？ 主要原因是关机之前vpn没有关掉导致的。 至于为什么没关掉vpn会导致网页打不开，我猜测是因为vpn建立的链接没被更改。 正确关掉vpn的时候，会把ip链接断掉，如果你不正确关掉，ip链接没有断掉，此时你vpn又是没启动的，没有域名解析，所以就打不开网站。 你可以在打不开网页的时候，把vpn打开，你会发现网络又可以登录了。 方法一 注意：方法一虽然方便，但是可能会有
阅读更多...
亮相WOT全球技术创新大会，揭秘火山引擎边缘容器技术在泛CDN场景的应用与实践

亮相WOT全球技术创新大会，揭秘火山引擎边缘容器技术在泛CDN场景的应用与实践

2024年6月21日-22日，51CTO“WOT全球技术创新大会2024”在北京举办。火山引擎边缘计算架构师李志明受邀参与，以“边缘容器技术在泛CDN场景的应用和实践”为主题，与多位行业资深专家，共同探讨泛CDN行业技术架构以及云原生与边缘计算的发展和展望。 火山引擎边缘计算架构师李志明表示：为更好地解决传统泛CDN类业务运行中的问题，火山引擎边缘容器团队参考行业做法，结合实践经验，打造火山
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2