【Echarts 实战指南】让饼图活起来，接收实时数据，小白必看使用场景：显示不同区间的实时数据，比如需要监控空调温度0

使用场景：显示不同区间的实时数据，比如需要监控空调温度0-60度正常、60-80警告、80-100报警，不同的区间用不同的颜色区分即可，图表会根据实时数据变化。

template

<template>
    <a-card shadow="none" style="margin:20px 0 0 20px" title="">
        <div class="item" ref="chartContainer"></div>
    </a-card>
</template>

script

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'

let intervalId
let chartContainer = ref(null)
var color_percent0 = '', color_percent1 = '', dotArray = []
function calculateDot(data) {
    if (data <= 60) {
        dotArray.push(80)
        color_percent0 = 'rgba(12,255,0,1)'
        color_percent1 = 'rgba(12,255,0,.3)'
    } else if (data > 60 && data <= 80) {
        dotArray.push(...[80, 80, 80])
        color_percent0 = 'rgba(255,123,0,1)'
        color_percent1 = 'rgba(255,123,0,.3)'
    } else if (data > 80 && data <= 100) {
        dotArray.push(...[80, 80, 80, 80, 80])
        color_percent0 = 'rgba(255,0,36,1)'
        color_percent1 = 'rgba(255,0,36,.3)'
    }
}
function updateChart() {
    var percent = (Math.random() * 100).toFixed(2);
    calculateDot(percent)
    const chart = echarts.init(chartContainer.value);
    const options = {
        title: {
            x: '50%',
            y: '45%',
            textAlign: "center",
            top: "78%",
            text: 'High Press',
            textStyle: {
                fontWeight: 'normal',
                color: '#FFF',
                fontSize: 12
            },

        },
        xAxis: {
            show: false,
            min: function (value) {
                return value.min - 7;
            },
            max: function (value) {
                return value.max + 7;
            },
            splitLine: {
                lineStyle: {
                    show: true,
                    type: 'dashed'
                }
            },
            axisLabel: {
                interval: 0,
                rotate: 40,
                textStyle: {
                    fontSize: 12,
                    color: '#000'
                },
            },
            data: ['1', '2', '3', '4', '5']
        },
        yAxis: {
            show: false,
            name: '万元',
            max: 200,
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                startAngle: 225,
                color: [{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0.4,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: color_percent0
                    }, {
                        offset: 1,
                        color: color_percent1
                    }],
                    globalCoord: false
                }, 'none'],
                hoverAnimation: false,
                legendHoverLink: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 75,
                    name: '1'
                }, {
                    value: 25,
                    name: '2'
                }]
            },
            {
                name: ' ',
                type: 'pie',
                radius: ['48%', '47%'],
                avoidLabelOverlap: false,//是否启用防止标签重叠策略
                startAngle: 225,
                hoverAnimation: false,
                legendHoverLink: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 75,
                    name: '1'
                }, {
                    value: 25,
                    name: '2'
                }]
            },
            {
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                startAngle: 315,
                color: ['rgba(34,34,34,.9)', "#ff7a00", "transparent"],
                hoverAnimation: false,
                legendHoverLink: false,
                clockwise: false,//饼图的扇区是否是顺时针排布。
                itemStyle: {
                    normal: {
                        borderColor: "transparent",
                        borderWidth: "20"
                    },
                    emphasis: {
                        borderColor: "transparent",
                        borderWidth: "20"
                    }
                },
                z: 10,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },

                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: (100 - percent) * 270 / 360,
                        label: {
                            formatter: percent + `\n{unit|${'bar'}}`,
                            position: 'center',
                            show: true,
                            color: '#fff',
                            fontSize: 26,
                            rich: {
                                unit: {
                                    color: '#7a8c9f',
                                    fontSize: 10,
                                },
                            },
                        },
                        name: ''
                    },
                    {
                        value: 1,
                        name: ''
                    },
                    {
                        value: 100 - (100 - percent) * 270 / 360,
                        name: ''
                    }
                ]
            },
        ]
    };
    chart.setOption(options);
}
onMounted(() => {
    updateChart()
    intervalId = setInterval(updateChart, 5000);
});

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
});
</script>