90 lines
1.7 KiB
Vue
90 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<v-chart ref="ring" :option="option" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { use } from "echarts/core";
|
||
|
|
import { CanvasRenderer } from "echarts/renderers";
|
||
|
|
import { LegendComponent } from "echarts/components";
|
||
|
|
import { PieChart } from "echarts/charts";
|
||
|
|
|
||
|
|
import VChart from "vue-echarts";
|
||
|
|
import { ref, reactive, onMounted } from "vue";
|
||
|
|
|
||
|
|
use([
|
||
|
|
CanvasRenderer,
|
||
|
|
LegendComponent,
|
||
|
|
PieChart
|
||
|
|
]);
|
||
|
|
|
||
|
|
const option = reactive({
|
||
|
|
legend: {
|
||
|
|
bottom: '5%',
|
||
|
|
left: 'center',
|
||
|
|
selectedMode: false,
|
||
|
|
itemGap: 15,
|
||
|
|
itemWidth: 35,
|
||
|
|
itemHeight: 20,
|
||
|
|
textStyle: {
|
||
|
|
color: 'white',
|
||
|
|
fontSize: 16
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['40%', '70%'],
|
||
|
|
startAngle: 180,
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: 'center'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
scaleSize: 25,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: 'white',
|
||
|
|
fontSize: '28',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
formatter: '{c}\n\n{b}'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ value: 15, name: '北 斗' },
|
||
|
|
{ value: 10, name: 'G P S' },
|
||
|
|
{ value: 15, name: '格洛纳斯' },
|
||
|
|
{ value: 17, name: '伽 利 略' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
let highlightIndex = -1
|
||
|
|
const ring = ref(null)
|
||
|
|
const COUNT = option.series[0].data.length
|
||
|
|
const highlight = () => {
|
||
|
|
ring.value.dispatchAction({
|
||
|
|
type: 'downplay',
|
||
|
|
dataIndex: highlightIndex
|
||
|
|
})
|
||
|
|
|
||
|
|
highlightIndex++
|
||
|
|
if (highlightIndex >= COUNT) highlightIndex = 0
|
||
|
|
|
||
|
|
ring.value.dispatchAction({
|
||
|
|
type: 'highlight',
|
||
|
|
dataIndex: highlightIndex
|
||
|
|
})
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
setInterval(highlight, 3000)
|
||
|
|
})
|
||
|
|
|
||
|
|
const update = console.log
|
||
|
|
|
||
|
|
|
||
|
|
defineExpose({ update })
|
||
|
|
</script>
|