echarts 实现环形渐变
需求:
环形图是 echarts 中 pie 图的一个变种,echarts 官方对于 pie 图的颜色渐变只支持两种:
- linear 线性渐变
与 css 3 的 Linear Gradients 相似,即向下/向上/向左/向右/角度方向渐变,类似与射线 - radial 镜像渐变
与 css 3 的 Radial Gradients 相似,即从圆心向外一圈圈渐变出去,类似与太阳辐射
渐变颜色属性
本文实现的弧形渐变是利用线性渐变的实现的,动手前需要了解到 itemStyle.color
属性的配置与其子属性表示的意义,可以参考 echarts 配置文档 series-pie::itemStyle::color。主要了解这几个属性:
type
:渐变类型,支持linear
/radial
x
,y
,x2
,y2
:向量坐标,即渐变开始的起点坐标 (x, y),与结束坐标 (x2, y2),会影响到colorStops
中对图表的着色,需要注意的是值的范围在 0 ~ 1 之间colorStops
:色彩过程,值为元素是{ offset: PERCENTAGE, color: COLOR }
的数组,每个元素表示在什么位置是什么颜色(如,在 30% 的位置是红色,{ offset: 0.3, color: 'red' }
)
实现流程
实现过程主要分为以下几个步骤:
- 确定环形图旋转展开的起始位置 Ps
- 确定渐变颜色,0% 处的颜色即起点/终点的颜色,100% 处的颜色即弧线中点的颜色
- 将环形图看成是一个圆 O,圆心为 O0,圆心坐标为 (x0, y0),半径 R
根据上边向量坐标值范围的规定(必须在 0~1 之间),可以确定圆心坐标 (x0, y0) = (0.5, 0.5),半径 R = 0.5 - 将圆 O 置入 echarts 的 linear 渐变坐标系中
- 计算圆上点 Ps 的坐标 (xs, ys)
- 根据你的数据 val(如占比 62%,val === 62)确定弧度 α
val / 100 = α / 2π,即 α = (val * π) / 50 - 确定渐变向量的起点 Ms 与其坐标 (x, y)
以 Ps 为起点沿环形图展开方向(如顺时针)旋转弧度 α 后得到的圆上点 Pe,Ms 为线段 PsPe 的中垂线 L 与 PsPe 的交点。此处中垂线一定是穿过圆心O0的 - 确定渐变向量的终点 Me 及其坐标 (x2, y2)
Me 为中垂线 L 与弧线 PsPe 的交点
以上过程建议在实现时通过纸笔画出坐标系进行坐标求解,过程需要考虑占比大于等于 50 与小于 50 的 两种情况,前者即弧度 α < π,后者即 α > π。具体求解坐标的过程为高中数学内容。
以下是以 Ps 为环形图起点, Pe 为环形图终点在 echarts 的 linear gradients 坐标系中构造出的环形图结构(也可以参考 GeoGebra 上本人绘制的坐标系统),只需要计算出向量 MsMe 的起/终点坐标即可。相关代码参考 linear 实现伪弧形渐变
echarts 实现环形渐变相关推荐
- 使用echart画出渐变色饼图(圆环图环形渐变)
使用echart画出渐变色饼图(圆环图环形渐变) 说明 常用的渐变有径向渐变和线性渐变, 环形图是 echarts 中 pie 图的一个变种,echarts 官方对于 pie 图的颜色渐变只支持两种: ...
- 如何用echarts实现颜色渐变半圆形仪表盘
1.代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="utf- ...
- 【ECharts】环形图、饼状图
目录 color设置的颜色 环形渐变色 圆环中间显示文字 悬浮显示中间文字 悬浮显示中间文字,默认显示第一个 循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置 内容为0 ...
- echarts之环形图
echarts中环形图就是饼图,区别在于是否定义了图形内部镂空的半径而已,就像下图: 那么现在有了一个圆环,中间如果空着的话就太难看了,所以给了如下的样式: 就是要给圆环中心添加内容.如果是单纯的添加 ...
- echarts通用环形图
echarts通用环形图 效果如下: <div class="chart-box"><div ref="pieChart" id=" ...
- Echarts实现环形图的渐变颜色效果
已经封装好的环形图组件 直接在要用的vue文件中引用: <circleChart:id="chart4.id":width="chart4.width": ...
- ECharts 之 环形图
上一篇文章写了堆叠柱状图的用法,本文写的是环形图的方法,环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小 radius : ['50%', '70%'], //饼图的半径,第一项是内半 ...
- echarts 圆角环形图
下定决心,好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); v ...
- echarts柱状图颜色渐变样式
option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, c ...
最新文章
- 小爱童鞋@你,一起来撸个小程序吧
- html5移动端笔记--代码分享
- Elasticsearch查询相关总结以及timestamp和时区问题
- php中的大括号用法
- errno的基本用法
- c++ 多线程 垃圾回收器_并行并发CMS垃圾回收器:-XX:+UseConcMarkSweepGC
- 商业领域中的IT技术应用之二-POS收款机及收款系统介绍
- 数据结构(二):线性表的使用原则以及链表的应用-稀疏矩阵的三元组表示
- 小米手机定时开关机在哪里设置?让你的小米手机“休息一下”
- javascript中的Strict模式
- CentOS停更;阿里发布全新操作系统(Anolis OS),用后直呼:牛X
- c语言数组升序排列,数组输入各数之间用空格隔开,输出用空格隔开
- 网易2019实习生招聘笔试-牛牛的闹钟
- DRM驱动(五)之drm_atomic_state
- 【笔记】斜线(slash)和反斜线“\”(backslash)的区别总结
- 如何使得自己说话有底气?
- mysql locate和instr_Mysql函数instr、locate、position VS like
- 中山大学计算机考研专业课考什么,2017年中山大学0812计算机科学与技术考研专业目录及考试科目...
- 用python爬取网贷之家p2p平台数据
- 让你的网页自动显示电话来电号码并录音---免费下载来电显示ActiveX控件(OCX)