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 = {xAxis: {type: 'category',data: ['渐变色']},yAxis: {},series: [{data: [120],type: 'bar',itemStyle:{color:new echarts.graphic.LinearGradient( 1, 0, 0, 0, [{offset: 0, color: 'red'},// {offset: 0.5, color: 'green'},{offset: 1, color: 'skyblue'}] )}}]
};

echarts的渐变色配置 LinearGradient相关推荐

echarts的渐变色配置 LinearGradient，饼图默认渐变颜色设置不同的角度
// 0, 0, 0, 1 代表右/下/左/上 // offset 范围0-1 表示什么时候开始使用对应颜色 color: new echarts.graphic.LinearGradient( 0, ...
echarts legend文字配置多个颜色（转）
困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色 legend: { data: [ { name:'直接访问', icon : 'circle', textSt ...
eCharts省份地图配置及方法
eCharts省份地图配置及方法文章目录: 广东地图使用方法广东地图使用方法 var geoCoordMap = { "广州":[113.30,23.20] }; var co ...
echarts关系图配置，及超出范围处理 + a、b两个节点互相指向时线上的字重叠问题
情景:由于人物关系复杂,可以有几个 --几十个(上百个),所以固定范围内(如:500高度)可能放不下,或者太空.所以可以根据node节点(也可根据其他判断条件)来动态修改 div / canvas高度 ...
Echarts 柱状图渐变色自定义配置
最近在做图表,不做不知道,里边的细节点好多--记录下这些配置,方便后续使用~~~ 渐变色详解参考:https://zhuanlan.zhihu.com/p/183893861 效果图: 遇到的问题: ...
echarts中渐变色的使用
引用:https://blog.csdn.net/juhaotian/article/details/78242415 在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内 ...
echarts之渐变色设置
前言: 用过echarts的朋友们应该都知道,里边的一般都是单色的,但是如果UI把它设计成了渐变色,前端该怎么处理呢? 法一:echarts.graphic.LinearGradient echart ...
Echarts 柱状图渐变色设置
渐变色的设置是通过在series属性中的itemStyle属性设置的.其中主要是echarts.graphic.LinearGradient方法. series: [{type: 'bar', bar ...
echarts 柱状图渐变色背景
如何制作柱状图渐变色背景,我们可以先参考 echarts 柱状图颜色设置.接下来我们来实战一下,看看这次的效果图吧. 首先我们可以看到,X 轴表示数据,Y轴表示类别.柱状图上有该地区的数量,同时柱状图 ...

echarts的渐变色配置 LinearGradient

echarts的渐变色配置 LinearGradient相关推荐

最新文章

热门文章