echarts柱形图渐变样式设置
Posted 算法与编程之美
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts柱形图渐变样式设置相关的知识，希望对你有一定的参考价值。
1 问题描述
绘制柱形图时，单一的颜色往往不能满足需求，在这里就可以引用渐变的样式使整个页面看起来不那么单调。
2 算法描述
这里需要用到的是渐变内置生成器echarts.graphic.LinearGradient。
渐变函数的四个参数表示的四个位置为右下左上，即这里的0，1，1，1为位置，offset: 0.5表示位置，指的是坐标为0.5的颜色，其中offset的范围为0-1，color表示颜色。
| series: [ name: "柱形图", type: "bar", barCategoryGap: "60%", label: show: true, position: "right", fontSize: 12, color: "#188df0", emphasis: color: "#e6b600" , itemStyle: normal: color: new echarts.graphic.LinearGradient( 0, 1, 1, 1, [ offset: 0, color: '#b0c2f9', //渐变头部色 offset: 0.5, color: '#188df0', offset: 1, color: '#185bff' ] ) , emphasis: color: new echarts.graphic.LinearGradient( 0, 1, 1, 1, [ offset: 0, color: '#b0c2f9', offset: 0.7, color: '#e6b600', offset: 1, color: '#ceac09' ] ) ] |
3 结语
设置渐变样式是我们平时设计页面时有可能遇到的一个较为简单的改动，不仅是柱形图可以设置为这个样式，折线图设置样式也是大同小异的，要学会多加应用和迁移，用这里学到的知识来完成相同类型的设置。
实习编辑：王晓姣
稿件来源：深度学习与文旅应用实验室（DLETA）
以上是关于echarts柱形图渐变样式设置的主要内容，如果未能解决你的问题，请参考以下文章