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柱形图渐变样式设置相关推荐

1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
设置echarts 的网格样式颜色
设置echarts的网格样式颜色参考API文档:http://echarts.baidu.com/option.html#xAxis.splitLine option = {xAxis: {type ...
Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
设置标题背景颜色以及设置副标题和标题加边框, 设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码 <!DOCTYPE html> <html lang="en&q ...
echarts饼图 mouseover中间部分文字样式设置，默认显示总和
需求描述需求要求利用echarts的饼图对企业数量进行统计,要求默认饼图中间显示全部企业数量,鼠标移动上去,则显示对应部分的企业数量,并且设置样式. 效果图具体代码 let TrendCha ...
echarts折线图拐点样式设置
echarts折线图拐点样式设置代码详情: series: [{name: '发文篇数',type: 'line',// smooth: true,showSymbol: true,symbol: ...
Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
echarts配置项属性值设置
echarts各配置项属性说明一.图表标题二.legend图例三.值域四.tooltip提示框五.dataZoom区域缩放控制器六.grid网格七.生成一个适合你的列表八.数值型坐标轴 ...
echarts雷达图样式配置
雷达图背景颜色雷达图网格颜色 indicator文字颜色数据区域边框颜色雷达图内部射线颜色雷达图的圈数雷达图每圈具体数值的显示具体数值拐点样式 function getRadarChart ...
echarts 柱形图
echarts 柱形图官网:Documentation - Apache ECharts ****************** 配置属性 <script type="text/jav ...

echarts柱形图渐变样式设置

echarts柱形图渐变样式设置相关推荐

最新文章

热门文章