<template>
<div>
<div class="gauge-chart" ref="gaugechart"></div>
</div>
</template>
<script>
export default {
name: "GaugeChart",
data() {
return {
}
},
props:[
'type'
],
mounted() {
this.draw();
},
methods: {
draw() {
let axisTickLength = 20; //刻度线宽度
let value = Math.floor(Math.random() * 100)
let colorRegionRate = (value / 100).toFixed(2)
let index = (value >= 66 ? 0 : (value > 33 ? 1 : 2))
let startColor = ['#34da62', '#fed95f', '#f56c6c'][index]
let endColor = ['#14a661', '#ff8e02', '#f44444'][index]
let option = {
title: {
textStyle: {
color: '#b1977d'
}
},
backgroundColor: "#ffffff",
series: [{
type: 'gauge',
name: '外层半透明边框圈',
radius: '90%',
startAngle: '225',
endAngle: '-45',
splitNumber: '100',
pointer: {
show: false
},
detail: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: [
[1, 'rgba(0,0,0,0.1)']
],
8,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
},
axisLabel: {
show: false
}
},
{
type: 'gauge',
name: '第二层',
radius: '86%',
startAngle: '225',
endAngle: '-45',
splitNumber: 4,
pointer: {
show: true,
length: '53%'
},
// 仪表盘指针样式。
itemStyle: {
color: '#000000'
},
data: [{
value: value,
name: '评值'
}],
title: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: [
// 有数值的部分
[colorRegionRate, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: startColor // 0% 处的颜色
},
{
offset: 1,
color: endColor // 100% 处的颜色
}
])],
// 底色
[1, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(255,255,255,0.1)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255,255,255,0.1)' // 100% 处的颜色
}
])]
],
50,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
detail: {
show: false
},
axisLabel: {
show: false,
},
animationDuration: 2000,
},
{
name: '第三层渐变圈',
type: 'gauge',
radius: '70%',
startAngle: '225',
endAngle: '-45',
splitNumber: 4,
pointer: {
show: false
},
data: [{
value: value,
name: '评值'
}],
axisLine: {
show: true,
lineStyle: {
color: [
// 有数值的部分
[colorRegionRate, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: startColor // 0% 处的颜色
},
{
offset: 1,
color: endColor // 100% 处的颜色
}
])],
// 底色
[1, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(255,255,255,0.1)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255,255,255,0.1)' // 100% 处的颜色
}
])]
],
axisTickLength, // 刻度线宽度
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
},
// 仪表盘指针样式。
itemStyle: {
color: '#f6fefe'
},
title: {
show: false,
},
detail: {
show: false
},
axisLabel: {
show: false,
},
animationDuration: 2000,
},
{
name: '与div背景色相同模拟axisTick',
type: 'gauge',
radius: '70%',
startAngle: '225',
endAngle: '-45',
splitNumber: 1,
pointer: {
show: false
},
title: {
show: false,
},
detail: {
show: true,
offsetCenter: [0, '80%'],
formatter: (value) => {
return [
`{a|${this.type}${value}}{b|分}`,
`{c|建议${value >= 66 ? '买入' : (value > 33 ? '维持现状' : '卖出')}}`
].join('
')
},
rich: {
a: {
color: '#353c60',
fontWeight: 500,
fontSize: 14,
},
b: {
color: '#353c60',
fontWeight: 500,
fontSize: 14,
},
c: {
color: '#353c60',
fontWeight: 500,
fontSize: 14,
},
}
},
data: [{
value: value,
name: '评值'
}],
axisLine: {
show: false,
lineStyle: {
1,
opacity: 0
}
},
axisTick: {
show: true,
splitNumber: 50,
length: axisTickLength, // 刻度线宽度
lineStyle: {
// 与div背景色相同
color: '#C0C0C0',
1,
}
},
splitLine: {
show: false,
},
axisLabel: {
show: false
}
},
]
};
let gaugeChart = this.$echarts.init(this.$refs.gaugechart);
// 使用刚指定的配置项和数据显示图表。
gaugeChart.setOption(option);
}
}
}
</script>
<style scoped>
.gauge-chart {
height: 100%;
100%;
}
</style>
参考自https://www.makeapie.com/