<template>
<div>
<div ref="chinaMap" style="height: 400px; width: 100%"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const chinaMap = ref();
onMounted(() => {
drawChina();
pieAnimation();
});
let index = 0;
const pieAnimation = () => {
var myChart = echarts.init(chinaMap.value);
setInterval(() => {
if (index > 4) {
index = 0;
}
myChart.dispatchAction({
type: "select",
seriesIndex: 0,
dataIndex: index,
});
index++;
}, 2000);
};
const colorList = [
"#8DF5D2",
"#4FAFF8",
"#438BEF",
"#EA33F7",
"#FD866A",
"#9E87FF",
"#58D5FF",
];
const drawChina = () => {
var myChart = echarts.init(chinaMap.value);
const option = {
tooltip: {
trigger: "item",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["60%", "70%"],
avoidLabelOverlap: false,
label: {
show: true,
formatter(param) {
return param.name + " (" + param.percent * 2 + "%)";
},
color: "#7784B4",
},
labelLine: {
show: true,
lineStyle: {
color: "#7784B4",
},
},
itemStyle: {
normal: {
color: function (params) {
return colorList[params.dataIndex];
},
},
},
selectedMode: "single",
selectedOffset: 40,
// 选中的样式
select: {
label: {
show: true,
},
},
data: [
{
name: "低危",
value: 1.45,
},
{
name: "高危",
value: 2.93,
},
{
name: "严重",
value: 3.15,
},
{
name: "中危",
value: 4.78,
},
],
},
],
};
myChart.setOption(option);
};
</script>
<style scoped lang="less"></style>
实现每隔2s切换一个高亮