echart图标日环图

效果图：

 代码实例：

<template>
    <div id="chart-alarm" class="chartStyle"></div>
</template>
<script>
import echarts from 'echarts'
export default {
    name:'alarm',
    data(){
        return{
            chart:null
        }
    },
    mounted(){
        this.warningStatistics()
        // this.initChartAlarm()
    },
    methods:{
        // 获取告警数据统计
        warningStatistics() {
            this.Api.warningStatistics({}, response => {
                if (response.code == 0) {
                    let alarmCount = {
                        face:0,
                        imsi:0,
                        mac:0,
                        vehicle:0,
                        body:0,
                    }
                    response.data.forEach(item => {
                        switch(item.type){
                            case 'face':
                                alarmCount.face += item.total;
                                break;
                            case 'imsi':
                                alarmCount.imsi += item.total;
                                break;
                            case 'mac':
                                alarmCount.mac += item.total;
                                break;
                            case 'vehicle':
                                alarmCount.vehicle += item.total;
                                break;
                            case 'body':
                                alarmCount.body += item.total
                        }
                    })
                    let data = [{
                            name: "人脸",
                            value: alarmCount.face
                        },
                        {
                            name: "热点",
                            value: alarmCount.imsi+alarmCount.mac
                        },
                        {
                            name: "车辆",
                            value: alarmCount.vehicle
                        },
                        {
                            name: "人体",
                            value: alarmCount.body
                        }
                    ];
                    this.initChartAlarm(data)
                } else {
                    this.Utils.message(response.msg, 'error')
                }
            });
        },
        initChartAlarm(data){
            let chart = echarts.init(document.getElementById('chart-alarm'));
            let arrName = getArrayValue(data, "name"),
                arrValue = getArrayValue(data, "value"),
                sumValue = eval(arrValue.join('+')),
                objData = array2obj(data, "name"),
                optionData = getData(data)

            function getArrayValue(array, key) {
                var key = key || "value";
                var res = [];
                if (array) {
                    array.forEach(function(t) {
                        res.push(t[key]);
                    });
                }
                return res;
            }

            function array2obj(array, key) {
                var resObj = {};
                for (var i = 0; i < array.length; i++) {
                    resObj[array[i][key]] = array[i];
                }
                return resObj;
            }

            function getData(data) {
                var res = {
                    series: [],
                    yAxis: []
                };
                for (let i = 0; i < data.length; i++) {
                    // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
                    res.series.push({
                        name: '报警类型',
                        type: 'pie',
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [73 - i * 18 + '%', 68 - i * 18 + '%'],
                        center: ["30%", "50%"],
                        label: {
                            show: false
                        },
                        itemStyle: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false
                            },
                            borderWidth: 5,
                        },
                        data: [{
                            value: data[i].value,
                            name: data[i].name
                        }, {
                            value: sumValue - data[i].value,
                            name: '',
                            itemStyle: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0
                            },
                            tooltip: {
                                show: false
                            },
                            hoverAnimation: false
                        }]
                    });
                    res.series.push({
                        name: '',
                        type: 'pie',
                        silent: true,
                        z: 1,
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [73 - i * 18 + '%', 68 - i * 18 + '%'],
                        center: ["30%", "50%"],
                        label: {
                            show: false
                        },
                        itemStyle: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false
                            },
                            borderWidth: 5,
                        },
                        data: [{
                            value: 7.5,
                            itemStyle: {
                                color: "#032e69",
                                borderWidth: 0
                            },
                            tooltip: {
                                show: false
                            },
                            hoverAnimation: false
                        }, {
                            value: 2.5,
                            name: '',
                            itemStyle: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0
                            },
                            tooltip: {
                                show: false
                            },
                            hoverAnimation: false
                        }]
                    });
                    res.yAxis.push(data[i].name + '   ' +data[i].value);
                }
                return res;
            }

            let option = {
                legend: {
                    show: true,
                    icon:"circle",
                    top: "50%",
                    left: '70%',
                    data: arrName,
                    width:50,
                    padding: [0, 5],
                    itemGap: 15,
                    formatter: function(name) {
                        let num = (objData[name].value / sumValue * 100).toFixed(2)
                        if(num == NaN || num == 'NaN'){
                            num = 0
                        }
                        return num + "%"
                    },
                    textStyle: {
                        color:'#fff'
                    },
                },
                tooltip: {
                    show: true,
                    trigger: "item",
                    formatter: "{a}<br>{b}:{c}({d}%)"
                },
                color: ['#0b5fff', '#05cbb4', '#ff8d00', '#ff4e0e'],
                grid: {
                    top: '10%',
                    bottom: '53%',
                    left: "30%",
                    containLabel: false
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        inside: true,
                        textStyle: {
                            color: "#fff",
                        },
                        show: true
                    },
                    data: optionData.yAxis
                }],
                xAxis: [{
                    show: false
                }],
                series: optionData.series
            };
            chart.setOption(option);
            window.addEventListener('resize', function(){
                chart.resize()
            })
        }
    }
}
</script>