var dataArr = 44;
var colorSet = {
color: 'rgba(238, 238, 238, 1)'
};
var color1 = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(238, 238, 238, 1)"
},
{
offset: 1,
color: "rgba(238, 238, 238, 1)"
}
],
global: false
}
var color2 = color2 = [
[1 / 6, '#41D5A4'],
[2 / 6, '#FBC436'],
[3 / 6, '#FD9522'],
[4 / 6, '#FA5F5D'],
[5 / 6, '#B47BF7'],
[1, '#C43458'],
]
option = {
// backgroundColor: '#0E1327',
backgroundColor: '#ffffff',
tooltip: {
show: false
},
series: [
{
name: "内部进度条",
type: "gauge",
// center: ['20%', '50%'],
radius: '62%',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0, colorSet.color],
[1, colorSet.color]
],
width: 2
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
color: "rgba(234, 234, 234, 1)"
},
detail: {
show: false,
formatter: function (value) {
if (value !== 0) {
var num = Math.round(value);
return parseInt(num).toFixed(0) + "%";
} else {
return 0;
}
},
offsetCenter: [0, 67],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 18,
fontWeight: '700',
color: '#ffffff'
}
},
title: { //标题
show: false,
offsetCenter: [0, 46], // x, y,单位px
textStyle: {
color: "rgba(0,0,0,0)",
fontSize: 14, //表盘上的标题文字大小
fontFamily: 'PingFangSC'
}
},
data: [{
name: "",
value: dataArr,
}],
pointer: {
show: true,
length: '70%',
radius: '20%',
width: 3 //指针粗细
},
animationDuration: 4000,
},
{
name: "内部小圆",
type: "gauge",
// center: ['20%', '50%'],
radius: '56%',
splitNumber: 30,
axisLine: {
lineStyle: {
color: color2,
width: 30
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
},
{
name: '外部刻度',
type: 'gauge',
// center: ['20%', '50%'],
radius: '40%',
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 5, //刻度数量
startAngle: 225,
endAngle: -45,
axisLine: {
show: false,
}, //仪表盘轴线
axisLabel: {
show: false,
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 3,
lineStyle: {
color: color1, //用颜色渐变函数不起作用
width: 1,
},
length: -6
}, //刻度样式
splitLine: {
show: true,
length: -12,
lineStyle: {
color: color1, //用颜色渐变函数不起作用
}
}, //分隔线样式
detail: {
show: false
}
},
{ //指针上的圆
type: 'pie',
tooltip: {
show: false
},
hoverAnimation: false,
legendHoverLink: false,
radius: ['0%', '10%'],
center: ['50%', '50%'],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 120,
itemStyle: {
normal: {
color: "rgba(238, 238, 238, 1)",
},
}
}]
},
{
name: "内部进度条",
type: "gauge",
// center: ['20%', '50%'],
radius: '40%',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr / 100, colorSet.color],
[1, colorSet.color]
],
width: 1
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
color: "#ffffff"
},
detail: {
formatter: function (value) {
return 'AQI'
},
offsetCenter: [0, 200],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 32,
color: "#B6B6B6"
}
},
title: { //标题
show: true,
offsetCenter: [0, 140], // x, y,单位px
textStyle: {
color: "#404040",
fontSize: 66, //表盘上的标题文字大小
fontWeight: 500,
fontFamily: 'MicrosoftYaHei'
}
},
data: [{
name: dataArr,
value: dataArr,
itemStyle: {
color: "rgba(174, 174, 174, 1)",
fontFamily: "MicrosoftYaHei",
fontSize: 14
}
}],
pointer: {
show: true,
length: '80%',
radius: '20%',
width: 4 //指针粗细
},
animationDuration: 4000,
}
]
};
echarts 仪表盘参数
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16244.html
相关文章
-
java——HTML、css、JavaScript、jQuery 详细介绍,web开发权威
-
html css javascript jquery bootstarp响应式旅行社旅游平台网站模板(14页)
-
vue echart4.0 按需引入
-
echarts的x轴或者y轴文本太长省略号后鼠标浮上显示内容
-
Taro3 Vue3使用echarts
-
echarts中树图节点文字太长如何换行
-
4.18-echarts -分辨率适配-echart 渐变内置生成器`echarts.graphic.LinearGradient`-echart图表通用代码结构- 折线图,实现点击切换数据值
-
Vue 3 Pinia 实现网页刷新功能
-
vue3.0, vue2.0项目h5,pc端实现扫描二维码(qrcode-reader-vue3 , @zxing/library和vue-qrcode-reader)
-
el-table实现固定列,及解决固定列导致部分滚动条无法拖动的问题
发布的文章
php保存
2024-08-27 16:08:00
jQuery NiceScroll 插件
2024-08-27 09:08:49
探索jQuery Template:一款强大的HTML模板引擎
2024-08-27 09:08:48
jQuery Tocify.js 开源项目教程
2024-08-27 09:08:41
推荐文章:jQuery IFrame 运输 —— 优雅的文件上传解决方案
2024-08-27 09:08:41
java——HTML、css、JavaScript、jQuery 详细介绍,web开发权威
2024-06-24 23:06:14
html css javascript jquery bootstarp响应式旅行社旅游平台网站模板(14页)
2024-06-20 00:06:22
vue echart4.0 按需引入
2024-08-27 09:08:28
echarts的x轴或者y轴文本太长省略号后鼠标浮上显示内容
2024-08-27 09:08:21
Taro3 Vue3使用echarts
2024-08-27 09:08:49
大家推荐的文章