echarts的渐变色配置 LinearGradient，饼图默认渐变颜色设置不同的角度

// 0, 0, 0, 1 代表右/下/左/上
// offset 范围0-1 表示什么时候开始使用对应颜色
color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{offset: 0, color: 'red'}, // 开始位置// {offset: 0.5, color: 'green'},{offset: 1, color: 'skyblue'} // 结束位置] )

示例 :
1,0,0,0 从右开始 (红色开始色)

1,1,0,0 右上(红色开始色)

1,0,1,0 右左不存在, 所以不显示
空

1,0,0,1 右下(红色开始色)

1,1,1,0 右上左(红色开始色) 效果等同 0,1,0,0

1,0,1,1 右左下(红色开始色) 效果等同 0,0,0,1

1,1,0,1 右上下(红色开始色) 效果等同 1,0,0,0

案例：

option = {legend: {top: 'bottom'},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: 'Nightingale Chart',type: 'pie',radius: [50, 250],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 8},data: [{ value: 40, name: 'rose 1' ,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1,0,0,0, [{offset: 0,color: '#5845ec'}, {offset: 1,color: '#0cb5fd'}]),}}},{ value: 38, name: 'rose 2',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [{offset: 0,color: '#5845ec'}, {offset: 1,color: '#0cb5fd'}]),}} },{ value: 32, name: 'rose 3',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [{offset: 0,color: '#5845ec'}, {offset: 1,color: '#0cb5fd'}]),}} },{ value: 30, name: 'rose 4',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [{offset: 0,color: '#5845ec'}, {offset: 1,color: '#0cb5fd'}]),}} },{ value: 28, name: 'rose 5' ,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1,0,0,0, [{offset: 0,color: '#5845ec'}, {offset: 1,color: '#0cb5fd'}]),}}},{ value: 26, name: 'rose 6',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1,0,0,0, [{offset: 0,color: '#5845ec'}, {offset: 1,color: '#0cb5fd'}]),}} },{ value: 22, name: 'rose 7' ,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0,1, 0, [{offset: 0,color: '#5845ec'}, {offset: 1,color: '#0cb5fd'}]),}}},{ value: 18, name: 'rose 8',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset: 0,color: '#5845ec'}, {offset: 1,color: '#0cb5fd'}]),}} }]}]
};

刚刚开始写文章，有什么问题或疑问可以给我留言或者私信，我们可以互相学习与进步，把自己开发中遇到的小问题进行总结，让有同样困惑的人，可以快速解决。 -------彩虹兔子

在开发过程中记录下自己遇到的问题，希望在自己解决的结果可以帮助更多人，互相帮助，提升自己。

echarts的渐变色配置 LinearGradient，饼图默认渐变颜色设置不同的角度相关推荐

echarts的渐变色配置 LinearGradient
// 0, 0, 0, 1 代表右/下/左/上 // offset 范围0-1 表示什么时候开始使用对应颜色 color: new echarts.graphic.LinearGradient( 0, ...
Qt Qss 渐变颜色设置
1.渐变颜色设置有:qlineargradient(线性渐变颜色设置),qradialgradient(辐射渐变),qconicalgradient(圆锥形渐变). QLinearGradient:显 ...
html中怎么设置渐变颜色设置,css中渐变色怎么设置
这篇文章主要介绍了css3编写浏览器背景渐变背景色的方法,现在分享给大家,也给大家做个参考. css中渐变色怎么设置 css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之间的线性 ...
echarts饼图指示器文字颜色设置不同
学习记录,平时开发时遇到过的问题 echarts饼图label文字颜色
echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）
配置效果配置每个柱子不同颜色的代码 itemStyle: {normal: {// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,分别表示右,下,左,上.例如(0, ...
【SeeMusic】音符方块颜色设置 ( 单一颜色设置 | 多彩音符设置 | 定时变色设置 | 渐变颜色 | 分轨道提示 )
SeeMusic 系列文章目录 [SeeMusic]下载安装并注册 SeeMusic 软件 [SeeMusic]购买付费版本 ( 进入购买页面 | 购买流程 ) [SeeMusic]创建 SeeMus ...
echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...
Python Matplotlib绘制渐变色柱状图（bar）并加边框和配置渐变颜色条（colorbar）
热力图是数据分析的常用方法,通过色差.亮度来展示数据的差异.易于理解.目前,常见的是看数据表里多个特征两两的相关度热力图. 基于此思想,做出柱状热力图,用于展现单个特征针对整体的相关度,以此列出所有特 ...
echarts 柱状图渐变色背景
如何制作柱状图渐变色背景,我们可以先参考 echarts 柱状图颜色设置.接下来我们来实战一下,看看这次的效果图吧. 首先我们可以看到,X 轴表示数据,Y轴表示类别.柱状图上有该地区的数量,同时柱状图 ...

echarts的渐变色配置 LinearGradient，饼图默认渐变颜色设置不同的角度

echarts的渐变色配置 LinearGradient，饼图默认渐变颜色设置不同的角度相关推荐

最新文章

热门文章

echarts的渐变色配置 LinearGradient， 饼图默认渐变颜色设置不同的角度

echarts的渐变色配置 LinearGradient， 饼图默认渐变颜色设置不同的角度相关推荐

最新文章

热门文章

echarts的渐变色配置 LinearGradient，饼图默认渐变颜色设置不同的角度

echarts的渐变色配置 LinearGradient，饼图默认渐变颜色设置不同的角度相关推荐