Echart结合圆形实现仪表盘的绘制详解
作者：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仪表盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！