<template>
<div>
<div id="chartId" class="chartRef" style="width: 600px; height: 400px;"></div>
</div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from 'vue';
const colorStyle = [[1,new echarts.graphic.LinearGradient(
0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(22, 148, 255, 0.1)',
},
{
offset: 1,
color:'rgba(63, 250, 250, 0.9)',
}
]
)]]
const option = {
backgroundColor: "#0b3c66",
series: [
//最外的圆圈(外层刻度)
{
type: 'gauge',
center: [
'50%',
'55%'
],
radius: '90%',
startAngle: 220,
endAngle: -40,
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
width: 3,
color:colorStyle
}
},
axisLabel: {
show: 0
},
axisTick: {
lineStyle: {
color:'rgba(63,250,250,0.7)',
width: 1
},
length: 5
},
splitLine: {
length: 8,
lineStyle: {
color:'rgba(63,250,250,0.8)',
width: 3
}
},
},
// 外围刻度(第二层)
{
type: 'gauge',
center: [
'50%',
'55%'
],
radius: '80%', // 1行3个
min: 0,
max: 100,
startAngle: 220,
endAngle: -40,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: colorStyle,
fontSize: 20,
width: 2,
opacity: 1, //刻度背景宽度
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
},
// 外围刻度(中间有背景颜色那块,包括里面的刻度)
{
type: 'gauge',
center: [
'50%',
'55%'
],
radius: '85%', // 1行3个
splitNumber: 10,
min: 0,
max: 100,
startAngle: 220,
endAngle: -40,
//分隔线样式
axisTick: {
lineStyle: {
color:'rgba(63,250,250,0.8)',
width: 1
},
length: 5
},
//刻度样式
axisLine: {
show: true,
lineStyle: {
width: 95,
color: colorStyle
}
},
//整数分隔线
splitLine: {
show: true,
length: 7,
lineStyle: {
color:'rgba(63, 250, 250, 0.8)',
width: 2
}
},
//刻度数字
axisLabel: {
show: true,
distance: 1,
textStyle: {
color:'rgba(63, 250, 250, 0.8)',
fontSize: '18',
fontWeight: 'bold'
}
},
},
//从外数第三条线
{
type: 'gauge',
center: [
'50%',
'55%'
],
radius: '60%', // 1行3个
splitNumber: 10,
min: 0,
max: 100,
startAngle: 220,
endAngle: -40,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: colorStyle,
fontSize: 20,
width: 2,
opacity: 1, //刻度背景宽度
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
// 内侧指针、数值显示
{
name: '',
center: [
'50%',
'50%'
],
type: 'gauge',
radius: '80%', // 1行3个
splitNumber: 10,
min: 0,
max: 100,
startAngle: 220,
endAngle: -40,
axisLine: {
show: true,
lineStyle: {
width: 50,
color: [
[
1,
new echarts.graphic.LinearGradient(
0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(0, 199, 187, 0)',
},
{
offset: 1,
color: 'rgba(0, 199, 187, 0)',
}
]
)
],
]
}
},
axisTick: {
show: 0,
},
splitLine: {
show: 0,
},
axisLabel: {
show: 0
},
pointer: {
show: true,
length: '102%',
width: 8,
itemStyle: {
color:colorStyle
}
},
data: [
{
value: 22.8,
name: '消耗电能\nKWh',
title: {
offsetCenter: ['0%', '50%'],
fontSize: 18,
color:'#4fe8d6'
},
detail: {
offsetCenter: ['0%', '20%'],
valueAnimation: true,
fontSize: 40,
color:'#4fe8d6'
}
}
]
}
]
};
onMounted(() => {
let myChart = echarts.init(document.getElementById("chartId"));
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
})
</script>
vue3 echarts 仪表盘,完整代码
最新推荐文章于 2024-07-03 09:19:13 发布