echarts 水球图自定义水球颜色

项目中有一个水球图表示电池电量的需求：电量20%以下时显示红色，20%－30%时显示为黄色，30%以上显示蓝色


var option = {series: [{type: 'liquidFill',data: [0.6, {value: 0.5,direction: 'left',itemStyle: {normal: {color: eval("if(data.value<0.2){'red'}else if(data.value<0.3){'yellow'}else{'blue'}")}}}, 0.4, 0.3]}]
};

color不支持function，在此用到了eval()方法，eval()方法接受一个要计算的javascript表达式或者要执行的语句。

注意：if条件代码块里不能return！

好多人说尽量不要用eval()方法，因为涉及到安全问题，eval()会接受传给他的任意代码。

所以设置color这个问题，如果有别的更好的方法，也欢迎赐教！

echarts 水球图自定义水球颜色相关推荐

echarts雷达图自定义射线颜色、边框效果和背景样式
目录 1.在官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比 1.在官网找样例样例地址:Examples - Apache ECharts 2.初 ...
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录 1.官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比碎碎念: UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅. ...
echarts社区水球图、echart水球图动态水球图
目录普通水球图 3/4环形图 4层波浪水球图普通水球图 var value = 0.45; var value1 = 0.76; var data = [value, value1]; var o ...
echarts折线图分段显示颜色
echarts折线图分段显示颜色 - vue技术交流群(864583465) 1.直接上代码 option = {xAxis: {type: 'category',data: ['Mon', 'Tue ...
Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件每个图形元素 ...
Echarts雷达图自定义样式
效果图: setLeiDaChart(){let myChart = this.$echarts.init(document.getElementById('andonType'));let opti ...
echarts折线图修改背景颜色_不会美化Excel图表？学会这招！小白也能轻松做出高逼格的折线图...
好多人都觉得做一个好看的数据图表是件困难的事,所以很多时候都是选择插入一个图表寥寥完事.短期对我们的工作来说是可以按时完成任务,但从长远角度来讲,对我们的职业能力没有提升,所以今天就来和小编一起学习制 ...
Echarts环形图自定义图例
项目场景: 在展示图表的时候有的时候需要图例也展示出一些内容来,例如这样子: 描述普通的图例一般只是这样但我们希望展示更多的信息,于是需要使用一个东西:字符串模板:formatter 解决方案: ...
echarts折线图、echarts折线图自定义样式
html 页面引用js <script type="text/javascript" src="assets/js/echarts.min.js"> ...

echarts 水球图自定义水球颜色

echarts 水球图自定义水球颜色相关推荐

最新文章

热门文章

echarts 水球图 自定义水球颜色

echarts 水球图 自定义水球颜色相关推荐

最新文章

热门文章

echarts 水球图自定义水球颜色

echarts 水球图自定义水球颜色相关推荐