149 lines
3.1 KiB
Vue
149 lines
3.1 KiB
Vue
<template>
|
|
<div class="bigscreen-echarts-gauge">
|
|
<div :id="eId" :style="styles"></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts/core';
|
|
import { GaugeChart } from 'echarts/charts';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
export default {
|
|
name: "echartsRadarWrap",
|
|
props: {
|
|
eId: {
|
|
type: String
|
|
},
|
|
styles: {
|
|
type: String
|
|
},
|
|
colorList: {
|
|
type: [Array, String],
|
|
default: ["#27d0ec"]
|
|
},
|
|
option: {
|
|
stype: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
};
|
|
},
|
|
created() {
|
|
this.chart = null;
|
|
echarts.use([GaugeChart, CanvasRenderer]);
|
|
},
|
|
mounted() {
|
|
this.drawLine();
|
|
},
|
|
methods: {
|
|
drawLine() {
|
|
if (!this.chart) {
|
|
this.chart = echarts.init(document.getElementById(this.eId));
|
|
}
|
|
const options = {
|
|
series: [
|
|
{
|
|
type: "gauge",
|
|
color: this.colorList,
|
|
min: 0,
|
|
max: 100,
|
|
progress: {
|
|
show: true,
|
|
width: 3
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 3
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
distance: 2,
|
|
length: '3',
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#dcdcdc'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
distance: 7,
|
|
color: '#999',
|
|
fontSize: 5
|
|
},
|
|
pointer: {
|
|
offsetCenter: [0, '0%'],
|
|
length: '60%',
|
|
width: '1',
|
|
itemStyle: {
|
|
// color: '#000'
|
|
}
|
|
},
|
|
anchor: {
|
|
show: true,
|
|
showAbove: true,
|
|
size: 6,
|
|
itemStyle: {
|
|
borderWidth: 1
|
|
}
|
|
},
|
|
title: {
|
|
show: false,
|
|
text: "今日报警"
|
|
},
|
|
grid: {
|
|
left: "10",
|
|
right: "10",
|
|
bottom: "5",
|
|
top: 50,
|
|
containLabel: true,
|
|
},
|
|
axisLine: {
|
|
// 坐标轴线
|
|
lineStyle: {
|
|
// 属性lineStyle控制线条样式
|
|
width: 4,
|
|
// color: [
|
|
// [1, "#1A3F81"]
|
|
// ]
|
|
}
|
|
},
|
|
|
|
detail: {
|
|
color: this.colorList[0] || "#27d0ec",
|
|
valueAnimation: true,
|
|
fontSize: 18,
|
|
offsetCenter: ['0', '80%']
|
|
},
|
|
data: [
|
|
{
|
|
value: this.option
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.chart.setOption(options);
|
|
}
|
|
},
|
|
watch: {
|
|
option(val, oldVal) {
|
|
this.chart = null;
|
|
this.drawLine();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.bigscreen-echarts-gauge {
|
|
height: calc(100% - 30px);
|
|
height: calc(100% - 15px);
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|