You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
579 lines
15 KiB
579 lines
15 KiB
<template>
|
|
<div
|
|
ref="charts"
|
|
style="min-width: 12vw;max-height:220px;height:220px;"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import { debounce } from '@/utils'
|
|
|
|
export default {
|
|
props: {
|
|
config: Object
|
|
},
|
|
watch: {
|
|
config: {
|
|
handler: function(val) {
|
|
this.$nextTick(() => {
|
|
this.init()
|
|
})
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
}
|
|
},
|
|
computed: {
|
|
option() {
|
|
let percent = 0;
|
|
if (this.config.total === 0) {
|
|
percent = 0
|
|
} else {
|
|
percent = ((this.config.value / this.config.total) * 100).toFixed(2)
|
|
}
|
|
const center = ['50%', '55%']
|
|
const self = this
|
|
return {
|
|
grid: {
|
|
left: '0',
|
|
top: '0',
|
|
right: '0',
|
|
bottom: '0',
|
|
containLabel: false
|
|
},
|
|
// backgroundColor: '#0E1327',
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
|
|
angleAxis: {
|
|
show: false,
|
|
max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度
|
|
type: 'value',
|
|
startAngle: 225, //极坐标初始角度
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
barMaxWidth: '11%', //圆环宽度
|
|
radiusAxis: {
|
|
show: false,
|
|
type: 'category'
|
|
},
|
|
//圆环位置和大小
|
|
polar: {
|
|
center: center,
|
|
radius: '100%'
|
|
},
|
|
|
|
series: [
|
|
|
|
// 最外圈的边框(左右)
|
|
{
|
|
name: '内部透明起始结束的圆边',
|
|
type: 'gauge',
|
|
center: center,
|
|
radius: '80%',
|
|
splitNumber: 10,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: [
|
|
// 右/下/左/上
|
|
[0.3, new echarts.graphic.LinearGradient(
|
|
1, 0, 0, 0,
|
|
[{
|
|
offset: 0.4,
|
|
color: this.config.opacityBorder[0]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.opacityBorder[1]
|
|
}]
|
|
)],
|
|
[0.7, new echarts.graphic.LinearGradient(
|
|
0, 0, 1, 0,
|
|
[{
|
|
offset: 0,
|
|
color: this.config.opacityBorder[0]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.opacityBorder[0]
|
|
}]
|
|
)],
|
|
[1, new echarts.graphic.LinearGradient(
|
|
0, 0, 1, 0,
|
|
[{
|
|
offset: 0.4,
|
|
color: this.config.opacityBorder[0]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.opacityBorder[1]
|
|
}]
|
|
)]
|
|
],
|
|
width: 2
|
|
}
|
|
},
|
|
z: 4,
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
//仪表盘详情，用于显示数据。
|
|
detail: {
|
|
show: true,
|
|
offsetCenter: [0, '95%'],
|
|
color: '#fff',
|
|
formatter(params) {
|
|
return `{t1|${self.config.valueLabel}}\n{t2|${self.config.totalLabel}}`
|
|
},
|
|
rich: {
|
|
t1: {
|
|
fontFamily: 'PingFang TC',
|
|
fontSize: '5%',
|
|
color: '#C6CEEC',
|
|
lineHeight: 18
|
|
},
|
|
t2: {
|
|
fontFamily: 'PingFang TC',
|
|
fontSize: '10%',
|
|
color: '#FFFFFF',
|
|
lineHeight: 18
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
},
|
|
title: {
|
|
//标题
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
name: percent + '%',
|
|
value: percent
|
|
}
|
|
]
|
|
},
|
|
|
|
// 带有阴影的边框
|
|
{
|
|
name: 'border',
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: '70%',
|
|
center: center,
|
|
animation: false,
|
|
z: 0,
|
|
data: [{
|
|
value: 0,
|
|
color: 'transparent',
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
disabled: true
|
|
},
|
|
select: {
|
|
disabled: true
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: '#071422',
|
|
shadowColor: this.config.shadowColor,
|
|
shadowBlur: 25,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: -25
|
|
}
|
|
}]
|
|
},
|
|
// 阴影的边框(中间)
|
|
{
|
|
name: '内部透明起始结束的圆边',
|
|
type: 'gauge',
|
|
center: center,
|
|
radius: '70%',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: [
|
|
// 右/下/左/上
|
|
[0.4, new echarts.graphic.LinearGradient(
|
|
1, 0, 0, 0,
|
|
[{
|
|
offset: 0,
|
|
color: this.config.opacityBorder[0]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.opacityBorder[1]
|
|
}]
|
|
)],
|
|
[0.6, new echarts.graphic.LinearGradient(
|
|
1, 0, 0, 0,
|
|
[{
|
|
offset: 0,
|
|
color: this.config.opacityBorder[0]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.opacityBorder[0]
|
|
}]
|
|
)]
|
|
],
|
|
width: 2
|
|
}
|
|
},
|
|
z: 4,
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
detail: {
|
|
show: false
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
},
|
|
title: {
|
|
//标题
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
name: percent + '%',
|
|
value: percent
|
|
}
|
|
]
|
|
},
|
|
|
|
// 刻度
|
|
{
|
|
name: '外部刻度',
|
|
type: 'gauge',
|
|
center: center,
|
|
radius: '75%',
|
|
min: 0, //最小刻度
|
|
max: 100, //最大刻度
|
|
splitNumber: 10, //刻度数量
|
|
startAngle: 225,
|
|
endAngle: -45,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: [
|
|
[1, 'rgba(0,0,0,0)']
|
|
]
|
|
}
|
|
},
|
|
//仪表盘轴线
|
|
axisLabel: {
|
|
show: false
|
|
}, //刻度标签。
|
|
axisTick: {
|
|
show: true,
|
|
splitNumber: 4,
|
|
lineStyle: {
|
|
//用颜色渐变函数不起作用
|
|
color: '#6DCBFF',
|
|
width: 1
|
|
},
|
|
length: 1
|
|
},
|
|
//刻度样式
|
|
splitLine: {
|
|
show: true,
|
|
length: 2,
|
|
lineStyle: {
|
|
//用颜色渐变函数不起作用
|
|
color: '#6DCBFF'
|
|
}
|
|
}, //分隔线样式
|
|
detail: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
// 最宽的圆环，上层, 显示彩色的进度条
|
|
{
|
|
type: 'bar',
|
|
data: [
|
|
{
|
|
value: percent,
|
|
itemStyle: {
|
|
//图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 1,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: this.config.progressBar[0]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.progressBar[1]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
],
|
|
barGap: '-100%', //柱间距离,上下两层圆环重合
|
|
coordinateSystem: 'polar',
|
|
roundCap: true, //顶端圆角从 v4.5.0 开始支持
|
|
//圆环层级，同zindex
|
|
z: 2
|
|
},
|
|
// 最宽的圆环，下层, 显示底色的进度条
|
|
{
|
|
type: 'bar',
|
|
data: [
|
|
{
|
|
value: 100,
|
|
itemStyle: {
|
|
color: this.config.progressBarBG
|
|
}
|
|
}
|
|
],
|
|
barGap: '-100%',
|
|
coordinateSystem: 'polar',
|
|
roundCap: true,
|
|
z: 1
|
|
},
|
|
|
|
{
|
|
name: '内部透明起始结束的圆边',
|
|
type: 'gauge',
|
|
center: center,
|
|
radius: '40%',
|
|
splitNumber: 10,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: [
|
|
[0, new echarts.graphic.LinearGradient(
|
|
0, 1, 0, 0,
|
|
[{
|
|
offset: 0,
|
|
color: this.config.circle2Color[0]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.circle2Color[1]
|
|
}]
|
|
)],
|
|
[0.2, new echarts.graphic.LinearGradient(
|
|
0, 1, 0, 0,
|
|
[{
|
|
offset: 0,
|
|
color: this.config.circle2Color[0]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.circle2Color[1]
|
|
}]
|
|
)],
|
|
[0.8, new echarts.graphic.LinearGradient(
|
|
0, 0, 1, 0,
|
|
[{
|
|
offset: 0,
|
|
color: this.config.circle2Color[1]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.circle2Color[1]
|
|
}]
|
|
)],
|
|
[1, new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[{
|
|
offset: 0,
|
|
color: this.config.circle2Color[1]
|
|
}, {
|
|
offset: 1,
|
|
color: this.config.circle2Color[0]
|
|
}]
|
|
)]
|
|
],
|
|
width: 1
|
|
}
|
|
},
|
|
z: 4,
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
detail: {
|
|
show: false
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
},
|
|
title: {
|
|
//标题
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
name: percent + '%',
|
|
value: percent
|
|
}
|
|
]
|
|
},
|
|
|
|
// 内圆的边框
|
|
{
|
|
name: '外边框',
|
|
type: 'pie',
|
|
clockWise: false,
|
|
hoverAnimation: false,
|
|
radius: ['35%', '35%'],//边框大小
|
|
center: center,//边框位置
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 1,//设置边框粗细
|
|
borderColor: this.config.circle2Color[1]//边框颜色
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
|
|
// 内圆
|
|
{
|
|
type: 'pie',
|
|
radius: '35%',
|
|
center: center,
|
|
z: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.RadialGradient(.5, .5, .8, [
|
|
{
|
|
offset: 0,
|
|
color: this.config.innerCircle[0]
|
|
},
|
|
{
|
|
offset: .5,
|
|
color: this.config.innerCircle[1]
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: this.config.innerCircle[2]
|
|
}
|
|
],
|
|
false
|
|
),
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'center',
|
|
color: '#4c4a4a',
|
|
formatter: `{t1|${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`,
|
|
rich: {
|
|
t1: {
|
|
fontFamily: 'PingFang TC',
|
|
fontSize: '5%',
|
|
color: '#C6CEEC',
|
|
lineHeight: 14
|
|
},
|
|
t2: {
|
|
fontFamily: 'PingFang TC',
|
|
fontSize: '10%',
|
|
color: '#FFFFFF',
|
|
lineHeight: 14,
|
|
fontWeight: 600
|
|
},
|
|
t3: {
|
|
fontFamily: 'PingFang TC',
|
|
fontSize: '5%',
|
|
color: '#C6CEEC',
|
|
lineHeight: 14
|
|
}
|
|
}
|
|
},
|
|
emphasis: {//中间文字显示
|
|
show: true
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: [100]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('resize', debounce(() => {
|
|
this.chart?.resize()
|
|
}, 200))
|
|
|
|
},
|
|
methods: {
|
|
init() {
|
|
if (!this.chart) {
|
|
this.chart = echarts.init(this.$refs.charts)
|
|
}
|
|
this.chart.setOption(this.option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
|
|
</style>
|
|
|