echarts 仪表盘渐变问题 |
您所在的位置:网站首页 › vue-echarts不能设置渐变色 › echarts 仪表盘渐变问题 |
这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战 问题:echarts仪表盘下半圆隐约存在 原因:目前设置的axisLine.lineStyle.color,不是只是分段颜色设置,为了渐变衔接的效果,有一部分点是叠加了两层颜色设置。 先全长度铺了一层绿色,从左往右透明度降低;再从0.8的位置到结束,铺了一层黄色,从左往右透明度升高。 大致的axisLine.lineStyle.color数组设置如下: axisLine.lineStyle.color = [ [ 0, "rgba(255,255,255,0.2)" ], ...... [ 0.9975, "rgba(0, 255, 0,0.005)" ], [ 0.8, "rgba(255, 255, 0,0.01)" ], ...... [ 0.998, "rgba(255, 255, 0,1)" ], [ 1, "rgb(255,0,0)" ] ]这样可以做出自然的过度,但是仔细查看,echarts仪表盘下半圆隐约存在。 解决办法:PS:可直接跳到最后,看第6个解决方案:“6、完美的echarts仪表盘渐变设置方案” 1、对color数组排序 axisLine.lineStyle.color = [ [ 0, "rgba(255,255,255,0.2)" ], ...... [ 0.8, "rgba(255, 255, 0,0.01)" ], ...... [ 0.9975, "rgba(0, 255, 0,0.005)" ], ...... [ 0.998, "rgba(255, 255, 0,1)" ], [ 1, "rgb(255,0,0)" ] ]现象: echarts仪表盘下半圆消失,但是过度明显不自然,出现条纹。 2、排序后去重原因: 因为有像0.96这类点有两个颜色设置,去重操作,留下第一个或者第二个。 现象: echarts仪表盘下半圆消失,但是过度明显不自然,仍然出现条纹。 于是想到第三个方法,重复点不能直接去掉而是取中间值。 3、重复点取颜色中间值 const uniqueArr = (oldArr) => { let newArray = [] for (let i = 0; i < oldArr.length; i++) { if (i > 0) { if (oldArr[i][0] !== oldArr[i - 1][0]) { newArray.push(oldArr[i]) } else { let co1 = newArray[newArray.length - 1][1] let co2 = oldArr[i][1] let aaa = co1.split(',')[3].replace(')', '') let bbb = co2.split(',')[3].replace(')', '') let opacity = (parseFloat(aaa) + parseFloat(bbb)) / 2 newArray[newArray.length - 1][1] = 'rgba(128, 255, 0, ' + opacity + ')' } } } return newArray }现象: echarts仪表盘下半圆消失,但是过度明显不自然,仍然出现条纹。 4、不进行颜色叠加现象: echarts仪表盘下半圆消失,但是过度明显不自然。 5、用axisTick.lineStyle.color.image属性设置渐变刻度。此方法用刻度当调图,无法再设置坐标轴线样式axisLine.lineStyle.color,因为已被覆盖。 注意:确保img节点已挂载 axisTick: { show: true, length: 30, splitNumber: 100, lineStyle: { color: { image: document.getElementById('bg_img'), repeat: 'no-repeat' }, width: 3 } },现象: echarts仪表盘下半圆消失,过度很自然,但是无法再设置坐标轴线样式,无法动态置灰某段值,且指针不能随当前坐标轴点颜色改变而改变。 6、完美的echarts仪表盘渐变设置方案使用series即可!!! 每个series的样式一模一样,值也一样,能不显示就不显示,但是颜色axisLine.lineStyle.color必须设置不一样,每一个series设置一个单独的从头到尾的渐变即可。 注意: 虽然多个series只是为了叠加颜色,但是必须充填数据项和值,不然提示框组件tooltip、指针显示不同步,打不到叠加颜色的指针效果。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |