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仪表盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了深入了解Hybrid App技术的相关知识，Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下2019-07-07
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
这篇文章主要介绍了JavaScript DOM节点操作,结合实例形式总结分析了JS操作DOM实现新建与删除HTML元素的具体步骤与相关技巧,需要的朋友可以参考下2017-01-01
mongodb的数据存储格式是一种由于MongoDB的文档结构为BJSON格式（BJSON全称：Binary JSON），而BJSON格式本身就支持保存二进制格式的数据，因此可以把文件的二进制格式的数据直接保存到MongoDB的文档结构中2012-11-11
在前端开发过程中,通过使用JS的正则表达式来校验输入的邮箱或者手机号是否正确,这也是一个非常常见的业务情景需求,下面这篇文章主要给大家介绍了关于利用JS正则表达式验证邮箱和手机号的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了JavaScript获取DOM元素的11种方法总结,本文用分4大类11个方法总结如何获取DOM元素,需要的朋友可以参考下2015-04-04
本篇文章主要是对textarea 控制输入字符字节数的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了button选择颜色简单实例，有需要的朋友可以参考一下2013-11-11
这篇文章介绍了GRID拖拽行的实例代码，有需要的朋友可以参考一下2013-07-07
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
这篇文章主要实现了无需Flash无需依赖任何JS库实现文本复制与剪切，是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，叫clipboard.js，感兴趣的小伙伴们可以参考一下2015-10-10
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
这篇文章主要为大家详细介绍了ajax实现加载页面、删除、查看详细信息，利用bootstrap美化页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论