Echart结合圆形实现仪表盘的绘制详解
更新时间：2022年03月17日 14:48:04 作者：Ciao_Traveler
EChart开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文将利用EChart实现仪表盘的绘制，感兴趣的可以学习一下
效果图
注意：使用startAngle: 200,endAngle: -20,在数据为零时，会出现一个实心圆，需要调整一下角度。
效果
代码
var option = {
series: [
{
type: "gauge",
center: ["50%", "50%"],
radius: "80%",
startAngle: 190,
endAngle: -10,
// minAngle:10,
min: 0,
max: 100,
z: 5,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#65e1fb",
},
{
offset: 1,
color: "#2e70f6",
},
]),
},
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 5
},
pointer: {
show: false
},
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, "-5%"],
fontSize: "14px",
ffontFamily: "Impact",
formatter: "{value} %",
color: "#fff",
},
data: data
},
]
};
效果图
主要使用：echarts中的仪表盘、和三个圆进行实现
代码
var option = {
series: [
{
type: "gauge",
center: ["50%", "50%"],
radius: "95%",
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
z: 5,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#65e1fb",
},
{
offset: 1,
color: "#2e70f6",
},
]),
},
},
progress: {
show: true,
roundCap: true,
width: 5
},
pointer: {
show: false
},
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, "2%"],
fontSize: 12,
// fontWeight: "bolder",
formatter: "{value} %",
color: "#fff",
},
data: [
{
value: this.props.data || 100
}
]
},
{
name: "数量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: ["70%", "70%"],
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
borderWidth: 1,
borderType: "dotted",//dotted 虚线
borderColor: "#78d7ff",// 虚线颜色
opacity: 0.5,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
},
{
name: "数量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: ["65%", "65%"],
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
borderWidth: 1,
borderType: "dotted",//dotted 虚线
borderColor: "#78d7ff",// 虚线颜色
opacity: 0.5,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
},
{
name: "数量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: "55%",
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
color: "#53bcf9",
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
}
]
};
到此这篇关于Echart结合圆形实现仪表盘的绘制详解的文章就介绍到这了,更多相关Echart仪表盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了利用PHP实现记录代码运行时间的封装类的相关教程，文中给出了详细的示例代码供大家参考学习，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了JS实现的N多简单无缝滚动代码,包含了文字及图文等多种滚动效果,涉及JavaScript递归调用及定时函数触发实现页面元素动态变换的相关技巧,需要的朋友可以参考下2015-11-11
今天抽空用原生javascript写了个返回顶部效果，由于本人水平有限，如有问题请指出,在下很乐意接受，有需要的朋友可以参考下2013-01-01
这篇文章主要介绍了使用zrender.js绘制体温单效果,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
本文主要介绍了js中函数的length是多少，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文主要对javascript工厂模式和构造函数模式创建对象方法进行解析，具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
今天小编就为大家分享一篇防止Layui form表单重复提交的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了js实现移动端轮播图滑动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要为大家详细介绍了JavaScript实现简易飞机大战，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了js 获取扫码枪输入数据的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
最新评论