144 lines
4.1 KiB
Vue
144 lines
4.1 KiB
Vue
<template>
|
||
<div ref="chartRef" :style="{ height, width }"></div>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
|
||
import { useECharts } from '/@/hooks/web/useECharts';
|
||
import { GaugeChart } from 'echarts/charts';
|
||
import { cloneDeep } from 'lodash-es';
|
||
export default defineComponent({
|
||
name: 'Gauge',
|
||
props: {
|
||
chartData: {
|
||
type: Object as PropType<Object>,
|
||
default: () => [],
|
||
},
|
||
option: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
minValue: {
|
||
type: Number as PropType<number>,
|
||
default: 0,
|
||
},
|
||
maxValue: {
|
||
type: Number as PropType<number>,
|
||
default: 50,
|
||
},
|
||
width: {
|
||
type: String as PropType<string>,
|
||
default: '100%',
|
||
},
|
||
height: {
|
||
type: String as PropType<string>,
|
||
default: 'calc(50vh - 80px)',
|
||
},
|
||
// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
|
||
seriesColor: {
|
||
type: String,
|
||
default: '#1890ff',
|
||
},
|
||
// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
|
||
},
|
||
setup(props) {
|
||
const chartRef = ref<HTMLDivElement | null>(null);
|
||
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||
const option = reactive({
|
||
//backgroundColor: '#2e303e',
|
||
title: {
|
||
text : "",
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
fontWeight : 'normal'
|
||
},
|
||
top : '10',
|
||
right : '10',
|
||
},
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
min: props.minValue, // 设置y轴最小值为数据最小值
|
||
max: props.maxValue, // 设置y轴最大值为数据最大值
|
||
// startAngle: 180,
|
||
// endAngle: 0,
|
||
// splitNumber: 10,
|
||
progress: {
|
||
show: true,
|
||
width: 7,
|
||
},
|
||
itemStyle: {
|
||
borderRadius: [30,30,30,30] // 分别设置左上、右上、右下、左下的圆角
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 8,
|
||
},
|
||
},
|
||
// axisTick: {
|
||
// show: false,
|
||
// },
|
||
splitLine: {
|
||
length: 12,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#fff',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
distance: 12,
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
},
|
||
anchor: {
|
||
show: true,
|
||
showAbove: true,
|
||
size: 5,
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
color: '#fff',
|
||
},
|
||
},
|
||
title: {
|
||
color: '#fff',
|
||
fontSize: 13,
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
fontSize: 18,
|
||
color:'#fff',
|
||
formatter: '{value}℃',
|
||
// offsetCenter: [0, '60%'],
|
||
},
|
||
data: [
|
||
{
|
||
value: 0,
|
||
name: '',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
});
|
||
|
||
watchEffect(() => {
|
||
props.chartData && initCharts();
|
||
});
|
||
|
||
function initCharts() {
|
||
echarts.use(GaugeChart);
|
||
if (props.option) {
|
||
Object.assign(option, cloneDeep(props.option));
|
||
}
|
||
option.title.text = props.chartData.name;
|
||
// option.series[0].data[0].name = props.chartData.name;
|
||
option.series[0].data[0].value = props.chartData.value;
|
||
// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
|
||
option.series[0].color = props.seriesColor;
|
||
// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
|
||
setOptions(option);
|
||
}
|
||
return { chartRef };
|
||
},
|
||
});
|
||
</script>
|