简单的可视化图表——“饼图”

ECharts饼图

基础模板参考：https://echarts.apache.org/handbook/zh/get-started/

例图：

下附简单代码：

let option = {
    // 鼠标移入
    tooltip: {
        trigger: 'item'
    },
    // 顶部提示
    legend: {
        bottom: '5%',
        left: 'center'
    },
    // 标题
    title: {
        text: 'demo',
        left: '10',
        top: '10',
    },
    color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
    series: [
        {
            name: 'text',   //鼠标放上去
            type: 'pie',
            radius: ['50%', '60%'], //内圈大小，外圈大小
            avoidLabelOverlap: true, // 调整重叠
            // 饼样式
            itemStyle: {
                borderRadius: 15,
                borderColor: '#fff',
                borderWidth: 2
            },
            // 文本样式
            label: {
                show: false,
                position: 'center'
            },
            // 移入高亮样式
            emphasis: {
                // 文本
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            // 连接线
            labelLine: {
                show: false
            },
            // 数据
            data: [
                { value: 1048, name: 'demo1' },
                { value: 735, name: 'demo2' },
                { value: 580, name: 'demo3' },
                { value: 484, name: 'demo4' },
            ]
        }
    ]
};