echarts类似排行榜的百分比分布图

ECharts是一个强大的JavaScript数据可视化库，可以创建各种图表类型，包括类似排行榜的百分比分布图。这种类型的图表通常用于展示每个分类在总和中所占的比例，比如销售额排行、用户占比等。在ECharts中，你可以通过饼图（pie chart）或环形图（donut chart）来实现这个效果。

以下是制作这样的百分比分布图的基本步骤：

1. **准备数据**：确保数据包含类别名称和对应的百分比值。

[
    {name: 'A', value: 30},
    {name: 'B', value: 45},
    {name: 'C', value: 25}
]

2. **初始化配置**：创建一个新的ECharts实例，并设置其类型为饼图或环形图。

var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption({
    type: 'pie',
    // 或者 type: 'ring'
});

3. **配置选项**：添加必要的系列配置，包括数据数组和显示百分比标签。

option = {
    series: [{
        name: '排名榜',
        data: [
            {value: 30, name: 'A'},
            {value: 45, name: 'B'},
            {value: 25, name: 'C'}
        ],
        label: {
            normal: {
                show: true,
                position: 'center',
                formatter: '{b} ({d}%): {c}'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        }
    }]
};

4. **渲染图表**：最后，使用`setOption`方法将配置应用到图表上。

myChart.setOption(option);