86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
|
<template>
|
||
|
<view style="height: 300px; width: 200px; background-color: aqua">
|
||
|
<view id="lineChartRef" :style="{ width: '200px', height: '200px' }" />
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script setup>
|
||
|
import { ref, onMounted } from 'vue';
|
||
|
import * as echarts from 'echarts';
|
||
|
|
||
|
const option = {
|
||
|
series: [
|
||
|
{
|
||
|
type: 'gauge',
|
||
|
min: 0, // 最小刻度
|
||
|
max: 12,
|
||
|
radius: '35%',
|
||
|
progress: {
|
||
|
show: true,
|
||
|
width: 18,
|
||
|
roundCap: true,
|
||
|
itemStyle: {
|
||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
{
|
||
|
offset: 0,
|
||
|
color: '#A65FFB'
|
||
|
},
|
||
|
{
|
||
|
offset: 1,
|
||
|
color: '#3163F5'
|
||
|
}
|
||
|
])
|
||
|
}
|
||
|
},
|
||
|
axisLine: {
|
||
|
lineStyle: {
|
||
|
width: 18
|
||
|
},
|
||
|
roundCap: true
|
||
|
},
|
||
|
axisTick: {
|
||
|
show: false
|
||
|
},
|
||
|
splitLine: {
|
||
|
show: false
|
||
|
},
|
||
|
pointer: {
|
||
|
show: false
|
||
|
},
|
||
|
axisLabel: {
|
||
|
show: false
|
||
|
},
|
||
|
anchor: {
|
||
|
show: false
|
||
|
},
|
||
|
title: {
|
||
|
offsetCenter: [0, '-30%'],
|
||
|
fontSize: 20
|
||
|
},
|
||
|
detail: {
|
||
|
valueAnimation: true,
|
||
|
formatter: '{value} 分\n正常',
|
||
|
color: 'inherit'
|
||
|
},
|
||
|
data: [
|
||
|
{
|
||
|
value: 1,
|
||
|
name: '累计积分'
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
]
|
||
|
};
|
||
|
|
||
|
// 在组件挂载后初始化ECharts实例并设置选项
|
||
|
onMounted(() => {
|
||
|
// const lineChartContainer = lineChartRef.value;
|
||
|
const lineChartContainer = document.getElementById('lineChartRef');
|
||
|
if (lineChartContainer) {
|
||
|
const myChart = echarts.init(lineChartContainer);
|
||
|
myChart.setOption(option);
|
||
|
}
|
||
|
});
|
||
|
</script>
|
||
|
|
||
|
<style></style>
|