echarts可视化教程四-饼图的绘制

ECharts是一个强大的JavaScript数据可视化库，它能够创建各种图表，包括饼图。饼图常用于展示各个部分占整体的比例。下面是如何使用ECharts绘制一个基础的饼图的步骤：

1. 首先，你需要在HTML文件中引入ECharts的JS库和CSS样式：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/theme/macarons.min.css">

2. 然后，在JavaScript中初始化一个饼图实例并设置数据：

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

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

myChart.setOption({
    series: [{
        name: '访问来源',
        type: 'pie', // 饼图类型
        radius: ['40%', '70%'], // 设置内外半径
        data: data,
        label: {
            show: true, // 显示标签文字
            position: 'center' // 标签居中显示
        },
        emphasis: {
            shadowBlur: 10, // 强调状态下的阴影模糊度
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }]
});