echart-渐变色背景

先上图

为了优化界面，设计采用了 渐变色来填充柱状图 

配置项 series 

    series : [{name: '数量',type: 'bar',itemStyle: {normal: {//颜色设置color: function(params) {// 渐变色 设置var color1=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "#52ce98" // 0% 处的颜色},{offset: 1,color: "#89fac9" // 100% 处的颜色}], false)var color2=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "#ffd835" // 0% 处的颜色}, {offset: 1,color: "#f6f479" // 100% 处的颜色}], false)var colorList = [color2,color1// '#7B68EE','#A020F0' 纯色设置];return colorList[params.dataIndex]},//以下为是否显示，显示位置和显示格式的设置了label: {show: true,position: 'top',formatter: '{b}\n{c}'}}},//设置柱的宽度，要是数据太少，柱子太宽不美观~barWidth:30,data: [26, 74]}]

　　 渐变色 方向控制

0, 0, 1, 0  分别指的是 右/下/左/上四个方位.   0, 0, 1, 0代表从左边开始向右边渐变

　　　　　　　　　　　　　　　　　　　　　　　　　1， 0 ，0 ，1 代表从右上方向左下方渐变
因为展示的柱状图是 横向的 所以使用了 0, 0, 1, 0，意思是渐变色从左边开始向右边渐变 

offset 是0——1之间的数字 0， 0.5 ，1 来分别设置渐变色的颜色，和css的gradient的用法一样。

new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "#52ce98" // 0% 处的颜色},{offset: 1,color: "#89fac9" // 100% 处的颜色}], false)

这样就实现了

转载于:https://www.cnblogs.com/GoTing/p/11231821.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！