@独孤求败12138

象形柱图整体颜色渐变

echarts中的象形柱图颜色渐变只能局部内部渐变，但是我想要实现整体渐变，怎么做呢？经过我大量的搜索和官方文档及API的研究，好像并不提供这一功能，那只能换个思路实现了。

另一种思路

换种思路，先画出一个圆点象形柱图，把圆点设置成白色，把背景色设置成效果图的背景色（这里以紫色为例），把一个数据项设为100，然后截图截取下来，用ps把圆点p成透明色，再重新绘制一个颜色渐变的普通柱状图z值设为0，再加一个象形柱图把symbol设为这张图片，z值设为1，大功告成，具体步骤如下：

绘制一个背景颜色为紫色，圆点为白色，数据为100的象形柱图

series:[{type: 'pictorialBar',symbol: 'circle', barGap: '-100%',symbolSize: [15, 15],symbolMargin: 2,symbolRepeat: true,itemStyle: {normal: {color: 'white'//'#101634'}},tooltip: {show: false},data: data,//z: 1,zlevel: 2}]

只截取一个完整柱图的截图，用ps把中间的圆点变成透明色，不会p成透明的参考图片背景变透明，非常简单。
在绘制一个普通的带有渐变色的普通柱状图和象形柱图，重叠在一起，象形柱图的symbol设置为上面p的图片，并且用symbolSize和symbolOffset这两个属性慢慢调整位置，可以实现完全重叠，再设置下普通柱状图的圆角。关于代码中的testImg:图片要一个base64编码的格式，具体可以看图片base64编码，也可以直接在线转换。

var testImg = “image://” + base64编码
series: [{
name: ‘贫困户人均纯收入’,
type: ‘bar’,
barWidth: ‘15’,
barGap: ‘-100%’,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [
{ offset: 0, color: ‘#EB1C27’ },
{ offset: 1, color: ‘#3195FA’ }
]
)
},
},
data: data,
z: 0
},{
type: ‘pictorialBar’,
symbol: testImg,
barGap: ‘-100%’,
symbolSize: [15, 15],
symbolMargin: 2,
symbolRepeat: true,
itemStyle: {
normal: {
color: ‘white’//’#101634’
}
},
tooltip: {
show: false
},
data: data,
z: 1,
}]
调整好位置之后，就能实现象形柱图整体的颜色渐变啦。其实就是把一个图片象形柱图覆盖在普通柱状图上面以达到象形柱图整体渐变效果。
如果大家有什么疑问，欢迎留言哦，我会在第一时间为您解答。
飘移、飘移、飘移，哈撒k，阿狸呀卡通，面对疾风吧，办法总比困难多。

echarts象形柱图整体颜色渐变相关推荐

echarts象形柱图自定义样式（类似柱状图）
象形柱图是可以设置各种具象图形元素(如图片.SVG PathData 等)的柱状图,往往用在信息图中,用于有至少一个类目轴或时间轴的直角坐标系上. 先上一个简单的效果: 其实实现思路主要在于:绘制具有 ...
echarts 象形柱图pictorialBar
象形柱图可以被想象为是个柱状图,但是柱状图的柱子并不显示,这些柱子称为基准柱,根据基准柱来定位和显示各种象形图形1.配置datadata:[{value:n,symbol:'circle', 自定义图 ...
echarts象形柱图的图标怎么更改
在echarts官网找一个例子,如上图示: 下载好需要的图标,搜索base64图片在线转码,上传本地下载的图片(这边是随便找了一个),将转码后的Ctrl+A全部复制(编码太多了echarts官网容易卡 ...
echarts分段式的象形柱图
最近做项目UI那边那边提了个比较少见的需求,如图: 我一开始想到的自然是用element ui的进度条来做,但找了许久都没找到这种的样式效果. 于是考虑用柱状图,如果这三个数据只用一个柱状图自然很难实 ...
echarts 柱状图圆柱_ECharts象形柱图
象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示,它利用图片和形状表现数据,具体来说它既可以用图形的长宽变形表现数据,也可以用图形的个数.甚至是图形的颜色.透明度 ...
Echarts 自定义象形柱图Spirits
** Echarts 自定义象形柱图Spirits 效果封装的组件,使用时可直接换spirit与spirit1改变图片 ** //外部调用方法 <echarts2 class="pe ...
迪赛智慧数——柱状图（象形柱图）：水果VC含量排行榜
效果图水果和蔬菜一样都含有丰富的维生素,我们人体如果缺少了某样维生素,补充的方法最好是从天然食物中摄取,吃水果是最好的选择,水果里面富含丰富的维生素C.维生素B族.维生素E等.下面是给大家整理的富含 ...
从繁到简so easy，象形柱图尽显数据可视化直观、炫酷本色
一提到数据可视化.excel数据生成图表.数据可视化处理等等,大家第一时间想到的是饼图.折线图.柱形图等,有那么一个组件它一直低调的存在着,但却是所有组件中对数据的呈现最形象.最直观的,它就是象形柱图 ...
特殊的象形柱图echarts
效果图 html <!DOCTYPE html> <html> <head><meta charset="UTF-8"><ti ...

echarts象形柱图整体颜色渐变

象形柱图整体颜色渐变

另一种思路

echarts象形柱图整体颜色渐变相关推荐

最新文章

热门文章