@huyuchen/visual
Version:
## 组件环境
462 lines (461 loc) • 10 kB
JavaScript
import * as s from "echarts";
const a = function(o = 99, e = 160) {
return {
// backgroundColor:'#021434',
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: "最外部进度条以及外圈的刻度",
type: "gauge",
radius: "90%",
center: ["50%", "47%"],
splitNumber: 8,
axisLine: {
lineStyle: {
color: [
[
e,
new s.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "rgba(61, 174, 255, 0)"
},
{
offset: 0.5,
color: "rgba(124, 255, 250, 0.2)"
},
{
offset: 1,
color: "rgba(124, 255, 250, 0.8)"
}
])
],
[1, "rgba(61, 174, 255, 0)"]
],
width: 3
}
},
axisLabel: {
show: !1
},
axisTick: {
show: !0,
splitNumber: 7,
length: 3,
// 长
distance: 3,
// 距离外圈
lineStyle: {
color: "rgba(69, 145, 255, 0.8)",
//用颜色渐变函数不起作用
width: 1
}
},
//刻度样式
splitLine: {
show: !1
},
itemStyle: {
show: !1
},
detail: {
// 当前速度--最大的文字
valueAnimation: !0,
offsetCenter: [0, "80%"],
height: 5,
formatter: [`{a|${o}}{b|km/h}`, "{c|平均车速}"].join(`
`),
rich: {
a: {
color: "#7CFFFA",
fontSize: 22,
lineHeight: 10,
fontFamily: "Akrobat-SemiBold, Akrobat"
},
b: {
color: "#7CFFFA",
fontSize: 10,
fontWeight: "normal",
lineHeight: 10
},
c: {
fontSize: 14,
color: "#fff",
fontWeight: "normal"
}
}
},
title: {
//标题
show: !1
},
data: [
{
name: "title",
value: o
}
],
pointer: {
show: !1
},
animationDuration: 4e3
},
{
name: "内部当前值的阴影",
type: "gauge",
// center: ['20%', '50%'],
center: ["50%", "47%"],
radius: "80%",
z: 4,
splitNumber: 8,
axisLine: {
lineStyle: {
color: [
[
o / e,
new s.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "rgba(89, 157, 255,0)"
},
{
offset: 0.5,
color: "rgba(89, 157, 255,0.1)"
},
{
offset: 1,
color: "rgba(89, 157, 255,0.6)"
}
])
],
[1, "rgba(89, 157, 255,.0)"]
],
// width: '50%',
width: 40
}
},
axisLabel: {
show: !1
},
axisTick: {
show: !1
},
splitLine: {
show: !1
},
itemStyle: {
show: !1
},
detail: {
show: !1
},
title: {
//标题
show: !1
},
pointer: {
show: !1
}
},
{
name: "内部指针以及值",
type: "gauge",
z: 5,
min: 0,
max: e,
splitNumber: 8,
radius: "80%",
center: ["50%", "47%"],
axisLine: {
show: !1
},
tooltip: {
show: !1
},
axisLabel: {
show: !1
},
axisTick: {
show: !1
},
splitLine: {
show: !1
},
itemStyle: {
show: !1
},
detail: {
show: !1
},
title: {
//标题
show: !1
},
data: [
{
name: "title",
value: o
}
],
pointer: {
// show: true,
length: "80%",
// radius: '20%',
width: 3,
//指针粗细
itemStyle: {
borderWidth: 1,
color: "#FF546E"
}
},
animationDuration: 4e3
},
{
name: "内部的阴影",
type: "gauge",
z: 3,
min: 0,
max: e,
splitNumber: 8,
radius: "80%",
center: ["50%", "47%"],
tooltip: {
show: !1
},
axisLabel: {
show: !1
},
axisTick: {
show: !1
},
axisLine: {
// show: false
lineStyle: {
color: [[1, "#061D44"]],
width: 50
}
},
splitLine: {
show: !1
},
itemStyle: {
show: !1
},
detail: {
show: !1
},
title: {
//标题
show: !1
},
// data: [
// {
// name: 'title',
// value: dataArr,
// },
// ],
pointer: {
show: !1
},
animationDuration: 4e3
},
{
name: "内部圈",
type: "gauge",
z: 6,
min: 0,
max: e,
splitNumber: 8,
radius: "80%",
center: ["50%", "47%"],
axisLine: {
lineStyle: {
color: [
[
e,
new s.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "rgba(61, 174, 255, .1)"
},
{
offset: 0.5,
color: "rgba(124, 255, 250, 1)"
},
{
offset: 1,
color: "rgba(124, 255, 250, 1)"
}
])
],
[1, "rgba(61, 174, 255, .1)"]
],
width: 3,
shadowColor: "rgba(145,207,255,.5)",
shadowBlur: 6,
shadowOffsetX: 0
}
},
tooltip: {
show: !1
},
axisLabel: {
show: !1
},
axisTick: {
show: !1
},
splitLine: {
show: !1
},
itemStyle: {
show: !1
},
detail: {
show: !1
},
title: {
//标题
show: !1
},
pointer: {
show: !1
},
animationDuration: 4e3
},
{
name: "内部刻度",
type: "gauge",
radius: "75%",
center: ["50%", "47%"],
min: 0,
//最小刻度
max: e,
//最大刻度
splitNumber: 8,
//刻度数量
startAngle: 225,
endAngle: -45,
z: 7,
axisLine: {
show: !1
},
//仪表盘轴线
axisLabel: {
show: !0,
distance: -4,
color: "#fff",
fontSize: 8
},
//刻度标签。
axisTick: {
show: !0,
splitNumber: 7,
length: 3,
// 长
distance: -4,
// 距离外圈
lineStyle: {
color: "RGBA(73, 126, 204, 1)",
//用颜色渐变函数不起作用
width: 1
}
},
//刻度样式
splitLine: {
show: !0,
length: 8,
lineStyle: {
color: "#1C3164"
//用颜色渐变函数不起作用
}
},
//分隔线样式
detail: {
show: !1
},
pointer: {
show: !1
},
anchor: {
// 指针小圆点
show: !0,
showAbove: !0,
size: 20,
itemStyle: {
borderWidth: 3,
color: "#0B2D62",
borderColor: "#3DAEFF"
}
}
},
{
name: "最底部的弧线",
type: "gauge",
radius: 90,
center: ["50%", 215],
startAngle: 140,
endAngle: 40,
z: -1,
axisLabel: {
show: !1
},
//刻度标签。
axisLine: {
lineStyle: {
color: [
[
e,
new s.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "rgba(61, 174, 255, 0)"
},
{
offset: 0.5,
color: "rgba(124, 255, 250, 0.2)"
},
{
offset: 1,
color: "rgba(124, 255, 250, 1)"
}
])
],
[1, "rgba(61, 174, 255, 0)"]
],
width: 3,
shadowColor: "rgba(10, 30, 116, 1)",
// 下弧线的阴影
shadowBlur: 3,
shadowOffsetX: 0,
shadowOffsetY: 10
}
},
axisTick: {
show: !1,
splitNumber: 7
},
//刻度样式
splitLine: {
show: !1
},
//分隔线样式
detail: {
show: !1
},
pointer: {
show: !1
},
anchor: {
// 指针小圆点
show: !1
}
}
]
};
};
export {
a as speedOption
};