echarts象形柱图整体颜色渐变 |
您所在的位置：网站首页 › ps圆柱渐变颜色怎么设置透明 › echarts象形柱图整体颜色渐变 |
echarts象形柱图整体颜色渐变
|
@独孤求败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，阿狸呀卡通，面对疾风吧，办法总比困难多。 |
【本文地址】