首页
视频
资源
登录
原
echarts 图表颜色设置,饼图颜色渐变
339
人阅读
2024/3/16 11:05
总访问:
579564
评论:
0
收藏:
0
手机
分类:
.net
[TOC] #### echarts 图表颜色设置 在外层加一个color数组就行了 ``` color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272"], ``` color数组在顶层位置的 ``` option = { title: { text: '消息来源', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, // 这里设置 color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272"], series: [{}{}] ... ``` #### echarts饼图颜色渐变代码如下: ``` series: [ { name: 'Access From', type: 'pie', radius: ['30%', '50%'], center: ['30%', '50%'], top: 50, itemStyle: { normal: { color: (list) => { // 这里设置颜色与渐变色,注意 !! 这里的数组一定要和实际的类目长度相等或大于,不然会缺少颜色报错 var colorList = [ { colorStart:'#488BFF', colorEnd:'#9abffd' }, { colorStart:'#26CEBA', colorEnd:'#8efaed' }, { colorStart:'#FFC069', colorEnd:'#fadfba' }, { colorStart:' #FD6865', colorEnd:'#f8b2b1' } ] return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上 offset: 0, color: colorList[list.dataIndex]['colorStart'] }, { offset: 1, color: colorList[list.dataIndex]['colorEnd'] }]) } } }, data: [ { value: 335, name: '苹果' }, { value: 310, name: '三星' }, { value: 234, name: '香蕉' }, { value: 135, name: '西瓜' } ] } ] ``` ##### 更多颜色搭配 ``` itemStyle: { normal: { color: (list) => { // 注意 !!!!! 这里的数组一定要和实际的类目长度相等或大于,不然会缺少颜色报错 var colorList = [ { colorStart: '#488BFF', colorEnd: '#9abffd' }, { colorStart: '#26CEBA', colorEnd: '#8efaed' }, { colorStart: '#FFC069', colorEnd: '#fadfba' }, { colorStart: '#FD6865', colorEnd: '#f8b2b1' }, { colorStart: '#bdc2e8', colorEnd: '#e6dee9' }, { colorStart: '#faada6', colorEnd: '#f5efef' }, { colorStart: '#ef025e', colorEnd: '#ef025e' }, { colorStart: '#a7876d', colorEnd: '#bdc0a8' }, { colorStart: '#a6bce8', colorEnd: '#a6bce8' }, { colorStart: '#6dc1f1', colorEnd: '#bcf1f2' }, { colorStart: '#55abc1', colorEnd: '#77cbb1' } ] return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ // 左、下、右、上 offset: 0, color: colorList[list.dataIndex]['colorStart'] }, { offset: 1, color: colorList[list.dataIndex]['colorEnd'] }]) } } ``` #### 温柔梦幻的渐变配色 ``` #feada6-->#f5efef #a8edea-->#fed6e3 #bdc2e8-->#e6dee9 #a1c4fd-->#c2e9fb #E3FDF5-->#FFE6FA #fddb92-->#d1fdff #fff1eb-->#ace0f9 #e9defa-->#fbfcdb ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
TeachingNote
这一生多幸运赶上过你.
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
36篇
后端
5篇
ORM
16篇
前端
48篇
随笔
13篇
移动开发
6篇
数据库
6篇
英语
3篇
rabbitmq
1篇
.net core
5篇
unity
1篇
k8s
1篇
云服务
1篇
DDD
1篇
网络
1篇
更多
mysql
1篇
python
2篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术