echarts 仪表盘渐变问题

您所在的位置:网站首页 vue-echarts不能设置渐变色 echarts 仪表盘渐变问题

echarts 仪表盘渐变问题

2023-09-30 23:28| 来源: 网络整理| 查看: 265

这是我参与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