echarts饼图自定义设置颜色的三种方式

第一种方式
option下

color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'],

整体代码如下：

option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'],series: [{name: '城市',type: 'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 1048, name: '北京'},{value: 735, name: '上海'},{value: 580, name: '广州'},{value: 484, name: '深圳'},{value: 300, name: '杭州'},{value:456,name:"雄安"}]}]
};

效果如下：

第二种方式
series下

itemStyle: {normal: {color: function(colors) {var colorList = ['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'];return colorList[colors.dataIndex]}}
},

整体代码如下：

option = {backgroundColor: '#2c343c',title: {text: 'Customized Pie',left: 'center',top: 20,textStyle: {color: '#ccc'}},tooltip: {trigger: 'item'},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '50%'],data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 274, name: '联盟广告'},{value: 235, name: '视频广告'},{value: 400, name: '搜索引擎'}].sort(function (a, b) { return a.value - b.value; }),roseType: 'radius',label: {color: 'rgba(255, 255, 255, 0.3)'},labelLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20},itemStyle: {normal: {color: function(colors) {var colorList = ['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'];return colorList[colors.dataIndex]}},shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]
};

效果如下：

第三种方式
data下

itemStyle: {color:"black"}

整体代码如下：

option = {title: {text: '某站点用户访问来源',subtext: '纯属虚构',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',},series: [{name: '访问来源',type: 'pie',radius: '50%',data: [{value: 1048, name: '搜索引擎',itemStyle: {color:"black"}},{value: 735, name: '直接访问'},{value: 580, name: '邮件营销'},{value: 484, name: '联盟广告'},{value: 300, name: '视频广告'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};

效果如下：

echarts饼图自定义设置颜色的三种方式相关推荐

Compose 设置颜色的三种方式
文章目录前言一.直接设置二.使用colors.xml中的颜色三.使用compose主题中的颜色前言下文三种的color都是替换下列代码中的color Text(text = "T ...
Allegro自定义设置快捷键的三种方法
Allegro自定义设置快捷键的三种方法: 1.在Allegro PCB editor 命令窗口直接定义 2.通过修改用户变量env文件来设置快捷键 3.定义笔画为快捷键 1.在Allegro PCB ...
response设置编码的三种方式以及比较
https://blog.csdn.net/u010653908/article/details/53994021 response设置编码的三种方式以及比较 2017年01月03日 14:12:46 ...
html正方形边框,详解HTML设置边框的三种方式
HTML设置边框的三种方式 border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green b ...
HTML设置边框的三种方式
HTML设置边框的三种方式文章目录 HTML设置边框的三种方式 1.边框的组成: 2.复合样式 3.单一设置这样代表上边框右边框下边框左边框分别对四条边框进行设置两个值代表:上下边框左 ...
html中常见表达颜色的三种方式
html中常见表达颜色的三种方式网页中经常应用到各种颜色,这关乎界面美观以及整体的设计感,那么,具体应用到哪几种表达方式,接下来让我们一起看看: 1 英文单词表示(局限):red(红),blue(蓝 ...
LaTeX中设置字体颜色的三种方式
以下的三种方式都需要导入color包,即\usepackage{color}. 实验环境:window10,TexLive2019. 1.使用系统自定义的颜色使用语法: \textcolor{red ...
iOS-改变UITextField的Placeholder颜色的三种方式
转自:http://blog.csdn.net/mazy_ma/article/details/51775670 有时,UITextField自带的Placeholder的颜色太浅或者不满足需求,所以 ...
详解PyTorch编译并调用自定义CUDA算子的三种方式
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达在上一篇教程中,我们实现了一个自定义的CUDA算子add2,用来实现两个Tensor的相加.然后用Py ...

echarts饼图自定义设置颜色的三种方式

echarts饼图自定义设置颜色的三种方式相关推荐

最新文章

热门文章