前端ECharts环形图代码

以下是一个基本的ECharts环形图的代码示例：

HTML代码：

<div id="chart-container"></div>

JavaScript代码：

// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('chart-container'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '环形图示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '数据1'},
                {value: 310, name: '数据2'},
                {value: 234, name: '数据3'},
                {value: 135, name: '数据4'},
                {value: 1548, name: '数据5'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这个示例中，我们创建了一个环形图，其中包含了五个数据点，每个数据点的名称和值都可以自定义。通过设置 radius 属性，我们可以控制内外圆环的大小，通过设置 legend 属性，我们可以在图表下方显示数据项的说明。最终，使用 setOption 方法将配置项和数据应用到图表中。