双层环形就是两个环形饼图叠加。
<template>
<div id="smoke-pie">
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
var smokeOption = {
tooltip: {
// trigger: 'item'
trigger: 'none',
},
series: [
{
name: '智能烟感报警数据',
type: 'pie',
hoverAnimation: false, //鼠标移入变大
color: ["#53f1f2", "#082c5f"],
radius: [67, 77], //内外半径
label: {
show: false, //去除标签
},
itemStyle: {
borderRadius: 10
},
data: [
{
value: 75, name: '状态正常',
},
{
value: 25, name: '状态异常',
},
],
},
{
name: '智能烟感报警数据',
type: 'pie',
hoverAnimation: false, //鼠标移入变大
color: ["#FFCA29", "#082c5f"],
itemStyle: {
borderRadius: 10
},
radius: [42, 52],
label: {
show: false,
},
data: [
{
value: 25, name: '状态异常',
itemStyle: {
color: "#FFCA29",
},
},
{
value: 75, name: '状态正常',
itemStyle: {
color: "#082c5f",
},
},
]
}
],
};
onMounted(() => {
var chartPie: any = document.getElementById('smoke-pie');
var smokeChart = echarts.init(chartPie);
smokeOption && smokeChart.setOption(smokeOption);
});
</script>
<style lang="less" scoped>
#smoke-pie{
width: 160px;
height: 160px;
}
</style>