前言：
掘友们 ，大家晚上好啊 。今天突然的看到之前的同学 ，在宿舍群里询问关于echarts水球图的问题 ，刚好 ，小编在之前做大屏可视化的时候 ，关于电脑磁盘空间的存储量做了水球图的展示 ，我就简单的给他分享了制作过程 。
示例:
水球图的应用场景很广泛 ，一般最多的就是应用于容量大小的展示 ，使用空间的多少 。这里先编以自己的项目为例 ，向大家展示 。
简介:
echarts已经升级到了V5版本 ，但是我们从官方文档找水球图的使用条件时 ，并没有这个示例 。这里小编也是github找到了水球图的插件 ，它是基于echarts实现的 。
文档地址:github.com/ecomfe/echa…
代码实现
echarts-liquidfill是基于echarts实现的 ，它是echarts的一款插件 ，我们需要安装使用
使用npm安装echarts和echarts-liquidfill
安装的过程中 ，我们要注意版本兼容 。
echarts-liquidfill@3 与 echarts@5 兼容 echarts-liquidfill@2 与 echarts@4 兼容 。根据echarts版本按需安装echarts-liquidfill 。
npm install echarts
npm install echarts-liquidfill
项目文件中引入
import * as echarts from echarts;
import echarts-liquidfill
声明实例 ，设置参数 ，绘制水球图
设置data数组 ，内置多个波纹对象 。
var chartDom = document.getElementById(disk);
var myChart = echarts.init(chartDom);
option = {
series: [{
type: liquidFill,
name: Liquid Fill,
radius: 70%,
itemStyle: {
opacity: 0.55,
},
data: [{
name: score,
direction: right,
value: 0.32,
itemStyle: {
// opacity: 0.55,
normal: {
color: #02CDF6,
}
},
},
{
name: scores,
direction: right,
value: 0.69,
itemStyle: {
opacity: 0.55,
normal: {
color: #134892
}
}
},
{
name: scorex,
direction: right,
value: 0.45,
itemStyle: {
opacity: 0.55,
normal: {
// color: red
}
}
}],
backgroundStyle: { // 设置水球图内部背景色
// borderColor: #4348EC,
// borderWidth: 10,
color: "transparent",//水球图内部背景色
},
itemStyle: {
opacity: 0.55,
// shadowBlur: 50,
// shadowColor: rgba(0, 0, 0, 0.4),
},
label: { // 设置百分比展示
color: #02CDF6,
normal: {
textStyle: {
fontSize: 20,
},
formatter: function (param) {
return param.value * 100 + %;
}
}
},
// outline: { // 是否显示外圈
// show: false
// }
}],
}
option && myChart.setOption(option); // 更新option渲染页面
设置缩放
给窗口添加resize事件 ，侦听窗口缩小 ，触发echarts缩放事件 。
window.addEventListener(resize, function () {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
总结：
大家也可以参考echarts-liquidfill官方的文档 ，有更多的api ，可以根据创意 ，设置不同的水球图 。
以上就是JavaScript实现echarts水球图百分比展示大屏可视化的详细内容 ，更多关于JS echarts水球图大屏可视化的资料请关注本站其它相关文章！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
