<div id="main" v-if="isShowEcharts"></div>
<script lang="ts" setup>
let isShowEcharts = ref(true);
onUnmounted(() => {
isShowEcharts.value = false;
})
option = {
series: [
{
type: "gauge",
startAngle: 190,
endAngle: -10,
min: dashboardData.minNumber,
max: dashboardData.maxNumber,
axisLine: {
lineStyle: {
width: 15,
color: [
[0.3, "#91BB7E"],
[0.7, "#F7DD6F"],
[1, "#D66474"]
]
}
},
pointer: {
//指针
icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
length: "60%", //指针长度
width: 5,
offsetCenter: [0, "-60%"],
itemStyle: {
color: "auto"
}
},
axisTick: {
show: false,
distance: -30,
length: 8,
lineStyle: {
color: "#fff",
width: 2
}
},
splitLine: {
show: false,
distance: -20,
lineStyle: {
color: "#fff",
width: 4
}
},
axisLabel: {
distance: 30,
fontSize: 12,
formatter: function (value: any) {
if (value === 0) {
return dashboardData.lowerThresholdNumber + "%";
} else if (value === dashboardData.upperThresholdNumber) {
return dashboardData.upperThresholdNumber + "%";
} else {
return "";
}
}
},
detail: {
fontSize: 20,
valueAnimation: true,
color: "auto",
show: true,
offsetCenter: [0, -30],
formatter: function (value: any) {
return value + "%";
}
},
data: [
{
value: dashboardData.valueNumber,
name: dashboardData.title,
title: {
lineHeight: 20,
offsetCenter: [0, 0],
fontSize: 12
}
}
]
}
]
};
var chartDom = document.getElementById('main') as HTMLElement;
var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
</script>
Vue3 Echarts 仪表盘 第一次展示,再次进入页面,不展示
最新推荐文章于 2024-08-26 16:24:56 发布
本文介绍如何使用ECharts库创建一个动态的仪表盘,通过 TypeScript 实现数据驱动的视觉反馈。核心内容包括设置系列类型为'gauge',自定义指针样式,以及动态调整轴标签和详情显示。适合监控和数据分析应用。
摘要由CSDN通过智能技术生成