需求:产品要求制作一个刻度圆环,并存在点击事件
思路:使用echarts中的圆环和仪表盘叠加,并为chart添加点击效果
代码展示:
<script>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF']
let echartData = [
{
name: 'A',
value: '3720'
},
{
name: 'B',
value: '2920'
},
{
name: 'C',
value: '2200'
},
{
name: 'D',
value: '1420'
},
{
name: 'E',
value: '1820'
}
]
let option: any
let chart: any
const refChart = ref<HTMLElement | undefined>(undefined)
const initChart = () => {
option = {
color: color,
title: false,
series: [
{
type: 'gauge',
radius: '70%',
startAngle: '0',
endAngle: '-359.99',
splitNumber: '30',
pointer: {
show: false
},
title: {
show: false
},
detail: {
show: false
},
axisLine: {
lineStyle: {
width: 20,
opacity: 0
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 48,
lineStyle: {
color: '#082b4b',
width: 3,
type: 'solid'
}
},
axisLabel: {
show: false
},
zlevel: 1
},
{
type: 'pie',
radius: ['45%', '60%'],
center: ['50%', '50%'],
data: echartData,
hoverAnimation: false,
label: false
}
]
}
chart.setOption(option)
}
const clickDialog = (params: any) => {
console.log('获取到了', params.data.name)
}
onMounted(() => {
chart = echarts.init(refChart.value!)
chart.on('click', clickDialog)
initChart()
})
</script>
<template>
<div class="chart" ref="refChart"></div>
</template>
<style lang="less" scoped>
@import '@/styles/mixin.less';
.chart {
width: 600px;
height: 600px;
}
</style>
成品展示: