88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<template>
|
|
<view style="width: 200px; min-height: 200px">111</view>
|
|
<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>
|