echarts中渐变色的使用

引用：https://blog.csdn.net/juhaotian/article/details/78242415

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient。截至目前(2019-10-15), echarts的官方API中都没有对这个API添加说明文档, 故用本篇文章来简略说明其用法。

为方便讲解, 先上示例代码:

{type: 'bar',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#000'},{offset: 0.5, color: '#888'},{offset: 1, color: '#ddd'}])}}
}

此配置是一个常见的柱状图配置代码, 柱子的color配置使用了echarts.graphic.LinearGradient来声明渐变色. 可以看到, 使用时传入了5个参数.

其中, 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.

第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了. 像示例代码的配置则表示:

整个渐变过程是从正上方向正下方变化

起始(offset: 0)颜色为#000, 变化到正中间(offset: 0.5)位置时颜色为#888, 变化到结束(offset: 1)位置时颜色为#ddd, 效果图如下:

通过修改前4个参数, 可以实现不同的渐变方向, 如:

0 1 0 0代表从正下方向正上方渐变;

1 0 0 1代表从右上方向左下方渐变, 如下图:

echarts中渐变色的使用相关推荐

echarts之渐变色设置
前言: 用过echarts的朋友们应该都知道,里边的一般都是单色的,但是如果UI把它设计成了渐变色,前端该怎么处理呢? 法一:echarts.graphic.LinearGradient echart ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
echarts中的世界地图
echarts中的世界地图:https://blog.csdn.net/mm_hello11/article/details/82989883
echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
echarts中如何使用timeline组件
1.吃碗面这里关于echarts3 官网的示例我不得不吐槽一下,逼格真高!一小部分示例动不动数据就是国家统计局搞出来的,你脸真大.当然他们做的示例的确是很好,这一点毫无疑问.当我看了echarts3 ...
html颜色渐变讲解,20个网页设计中渐变色运用实例欣赏
原标题:20个网页设计中渐变色运用实例欣赏出处:设计之家链接:http://www.sj33.cn/digital/wysj/201608/46001.htmlWP Crew https://wp ...
html文件在echarts中,老师，echarts中所有的案例都是.html属性的文件吗？
置顶老师参与老师,echarts中所有的案例都是.html属性的文件吗? 我是管理员大大发表于2019年11月26日如下是echarts中的实例,想请教一下,这是什么属性的文件? app.ti ...
小例子：在 ECharts 中实现日历图
在 ECharts 发布的 3.5 版本中,新增了日历坐标系,用于在日历中绘制图表.如何快速写出一个日历图呢? 通过以下三个步骤即可实现上述效果: 第一步:引入js文件下载的最新完整版本 echa ...
echarts中y轴设置刻度_xAxis 配置
设置ECharts中y轴刻度线的样式在上节内容中我们提到了 ECharts 中 y 轴刻度线样式的设置,那么在本节我们就来详细介绍一下 yAxis 中 axisTick.lineStyle 所包含的 ...

echarts中渐变色的使用

echarts中渐变色的使用相关推荐

最新文章

热门文章