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）