echarts

1、下载

npm install echarts --save

2、main.js引入

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

3、页面

<div class="bgColor">
    <h1>告警来源</h1>
    <div class="echart" id="alertSource"></div>
</div>
//请求后端接口获取数据
getStatisticsAlertSource({}).then((res) => {
        // console.log(res);
        if (res.code == 200) {
            let alertSourceArr = [];
            res.data.forEach((item) => {
                alertSourceArr.push(item.name);
            });

            let myChart = this.$echarts.init(document.getElementById('alertSource'));
            var fontColor = '#fff';
            var data = res.data;
            let option = {
                color: ['#5f45ff', '#0120ec', '#944eff', '#eb811b', '#7bcbfe', '#ff008f', '#ffd300', '#00ebcc', '#ff5452'],
                grid: {
                    bottom: '10%',
                    left: '10%',
                    right: '10%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}个({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: '50%',
                    top: '20%',
                    height: 100,
                    textStyle: {
                        color: '#7fc4ff',
                        fontSize: 12
                    },
                    icon: 'circle',
                    itemHeight: 8,
                    itemWidth: 8,
                    data: data
                },
                series: [
                    // 主要展示层的
                    {
                        radius: ['40%', '75%'],
                        center: ['30%', '50%'],
                        type: 'pie',
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false,
                                length: 30,
                                length2: 55
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: data
                    },
                    // 边框的设置
                    {
                        radius: ['30%', '35%'],
                        center: ['30%', '50%'],
                        type: 'pie',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        animation: false,
                        tooltip: {
                            show: false
                        },
                        data: [
                            {
                                value: 1,
                                itemStyle: {
                                    color: 'rgba(250,250,250,0.3)'
                                }
                            }
                        ]
                    },
                    {
                        name: '外边框',
                        type: 'pie',
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        center: ['30%', '50%'],
                        radius: ['85%', '85%'],
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {
                                value: 9,
                                name: '',
                                itemStyle: {
                                    normal: {
                                        borderWidth: 2,
                                        borderColor: '#0b5263'
                                    }
                                }
                            }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
    });