echarts缩放饼图

ECharts是一个强大的JavaScript数据可视化库，它支持创建各种类型的图表，包括缩放饼图（也称为环形图）。缩放饼图用于展示部分和整体之间的比例关系，用户可以通过鼠标滚轮或交互式缩放功能查看每个部分的详细信息。

在ECharts中，要创建一个缩放饼图，你需要做以下步骤：

1. 引入ECharts库和相关组件：

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>

2. 创建一个HTML容器用于放置图表：

<div id="pieChart" style="width: 600px;height: 400px;"></div>

3. 在JavaScript中初始化并配置饼图：

var myChart = echarts.init(document.getElementById('pieChart'));

// 配置数据
var data = [
    { value: 335, name: '直接访问' },
    { value: 310, name: '邮件营销' },
    { value: 234, name: '联盟广告' },
    { value: 135, name: '视频广告' },
    { value: 1548, name: '搜索引擎' }
];

// 配置缩放饼图参数
var option = {
    series: [{
        type: 'pie',
        radius: '55%', // 缩放范围
        center: ['50%', '60%'], // 圆心位置
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false, // 避免文字重叠
            },
            emphasis: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
            }
        },
        data: data,
        emphasis: { // 鼠标悬停时的样式
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }],
    zoom: {
        enable: true, // 开启缩放
        start: 100, // 初始放大级别
        end: 200 // 最大放大级别
    }
};

// 绘制图表
myChart.setOption(option);