<template>
<div>
<div id="lawPowerChart" style="width:100%;height:70%"></div>
<div>
</template>
<script>
/**
* export const handleDebounce = (() => {
let obj = {}
return function (cb, type, delay = 1000) {
let timer = obj[type]
clearTimeout(timer)
obj[type] = setTimeout(() => {
cb()
}, delay)
}
})()
*/
import { handleDebounce } from "@/utils"
export default {
name: '',
data () {
return {
chart: null,
option: {
title: {
text: '{a|1109}{c|\n' + '执法装备' + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 22,
fontWeight: 'bold',
color: 'rgba(0, 180, 255, 1)',
},
c: {
fontSize: 12,
color: '#fff',
},
},
},
},
series: [
{
type: 'pie',
name: '外圆环',
radius: ['90%', '100%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0.85, color: 'rgba(0, 180, 255, 0.1)' // 0% 处的颜色
},
{
offset: 0.9, color: 'rgba(0, 180, 255, 0.3)' // 0% 处的颜色
},
{
offset: 0.93, color: 'rgba(0, 180, 255, 0.5)' // 0% 处的颜色
},
{
offset: 0.96, color: 'rgba(0, 180, 255, 0.8)' // 0% 处的颜色
},
{
offset: 1, color: 'rgba(0, 180, 255, 1)' // 100% 处的颜色
},
],
global: false // 缺省为 false
}
},
},
label: {
show: false,
},
data: [100],
},
{
// 刻度
name: "",
type: 'gauge',
splitNumber: 30, //刻度数量
radius: '98%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, '#0dc2fe']
]
}
},
axisTick: {
show: false,
lineStyle: {
color: 'auto',
width: 2
},
length: 20,
splitNumber: 5
},
splitLine: {
show: true,
length: 5,
lineStyle: {
width: 5,
color: "rgba(0, 180, 255, 1)",
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: 0,
},
},
{
type: 'pie',
name: '内环',
startAngle: 90,
radius: ['63%', '65%'],
center: ['50%', '50%'],
hoverAnimation: false,
clockWise: false,
label: {
show: false,
},
data: [
{
value: 75,
itemStyle: {
normal: {
color: 'rgba(0, 180, 255, 0.3)',
},
},
},
{
value: 25,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
},
},
},
],
},
{
// 刻度
name: "",
type: 'gauge',
splitNumber: 15, //刻度数量
radius: '82%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90,
z: 10,
endAngle: 0,
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, '#0dc2fe']
]
}
},
axisTick: {
show: false,
lineStyle: {
color: 'auto',
width: 2
},
length: 20,
splitNumber: 5
},
splitLine: {
show: true,
length: 2,
lineStyle: {
width: 2,
color: "rgba(0, 180, 255, 1)",
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: 0,
},
},
{
type: 'pie',
name: '内环',
startAngle: 90,
radius: ['0', '64%'],
center: ['50%', '50%'],
hoverAnimation: false,
clockWise: false,
label: {
show: false,
},
data: [
{
value: 75,
itemStyle: {
normal: {
color: 'rgba(0, 180, 255, 0)',
},
},
},
{
value: 25,
itemStyle: {
normal: {
// color: 'rgba(0, 180, 255, 0.3)',
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(0, 180, 255, 0.3)",
},
{
offset: 0.4,
color: "rgba(0, 180, 255, 0.1)",
},
{
offset: 1,
color: "rgba(0, 180, 255, 0)",
},
]),
},
},
},
],
},
],
},
}
},
mounted () {
this.getData()
},
methods: {
getData () {
this.ininChart()
},
ininChart () {
this.chart = this.$echarts.init(document.getElementById("lawPowerChart"));
this.chart.setOption(this.option, true);
window.addEventListener("resize", this.handleResize);
this.$once("hook:beforeDestroy", () => {
window.removeEventListener("resize", this.handleResize);
});
},
handleResize() {
handleDebounce(() => {
const chart = this.$echarts.init(
document.getElementById("lawPowerChart")
);
chart.resize();
}, "lawPowerChart");
},
}
}
</script>
