使用Echarts实现圆环图

实现如图效果：

 首先先在 HTML 中定义有宽度和高度的父容器，图表的大小默认即为该节点的大小

<div class="pieChart" id="pieChart"></div>

const pieChart = echarts.init(document.getElementById('pieChart'));

注：在调用echarts.init()时需保证容器已经有宽度和高度了

请求接口：

$.ajax({
    url: baseUrl+'/api/data-visualization/analysis/statistic/media/source',
    type: 'post',
    data: {
        beginDate: beginDate,
        endDate: currentDate,
        keywords: '',
    },
    success(res) {
        if(res.code === 200){
            // 请求成功调用函数
            initPieChart(res.data)
        }
    },
    error(err) {
        console.log(err);
    }
})

配置项 

const initPieChart = pieChartData => {
    pieChart.setOption({
        tooltip: {
            trigger: 'item',
            className: 'pieTooltip',
            enterable: true,
            formatter: (params) => {
                let strDOM = params.marker.replace('border-radius:10px;', '').replace(/4|10/g, '5')
                let { name, percentage } = params.data
                return `${strDOM} ${name}：${percentage}%`
            }
        },
        legend: {
            orient: 'vertical',
            // 图例位置
            right: 'right',
            top: 'center',
            // 右侧图例宽度
            itemWidth: 10,
            // 右侧图例长度
            itemHeight: 10,
            itemStyle: {
                borderWidth: 0,
            },
            /*  字体样式  */
            textStyle: {
                color: '#fff'
            }
        },

        series: [{
            /* 样式 */
            itemStyle: {
                borderWidth: 1,
                borderColor: '#fff'
            },
            /*  图表名称  */
            name: '',
            /*  类型  */
            type: 'pie',
            /*  圆 大小  内环圆  外圆 */
            radius: ['40%', '70%'],
            /*  数据  */
            data: pieChartData,
            /*  指引线 */
            labelLine: {
                show: false
            },
            /*  提示 */
            label: {
                show: false
            },
            /*  移入样式  */
            emphasis: {
                scale: false,
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.9)'
                }
            }
        }]
    });
}