用echarts绘制一个饼图

以下是使用 echarts 绘制饼图的示例代码：

HTML 代码：

<div id="pie-chart" style="width: 600px; height: 400px;"></div>

JavaScript 代码：

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

// 配置图表参数
var option = {
    title: {
        text: '饼图示例',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['苹果', '香蕉', '橘子', '西瓜', '葡萄']
    },
    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: '苹果'},
                {value: 310, name: '香蕉'},
                {value: 234, name: '橘子'},
                {value: 135, name: '西瓜'},
                {value: 1548, name: '葡萄'}
            ]
        }
    ]
};

// 设置图表配置项并渲染图表
myChart.setOption(option);

上述代码将生成一个饼图，其中包含五种水果的数量占比。图表参数包括：

- 标题：饼图示例；
- 提示框：当鼠标悬停在图表上时，会显示数据信息；
- 图例：五种水果的名称；
- 系列：饼图数据。包括每种水果的数值和名称，以及饼图的样式和标签设置。

可以根据实际需求修改图表参数，以满足自己的需求。