echarts饼图的常用实现

最新推荐文章于 2024-09-26 11:01:02 发布

前端小妹

最新推荐文章于 2024-09-26 11:01:02 发布

阅读量245

点赞数

分类专栏： echarts 文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_51545524/article/details/121406916

版权

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用Echarts库在前端项目中创建饼图，包括数据配置、样式定制和交互功能设置，帮助开发者更好地展示数据比例和分布。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        title:{               //标题
            text:'饼图',
            subtext:'pie',
            left:'center'
        },
        tooltip:{             //提示
            trigger:'item',
        },
        legend:{          //图例
            orient:'vertical',
            left:'left',
            bottom:'10'
        },
        toolbox:{         //工具（保存图片，还原，数据视图等等）
            show:true,
            feature:{
                saveAsImage:{
                    show:true,
                    backgroundColor:'yellow',
                    title:'保存图片'
                },
                restore: {
                    show:true,
                    title:'会还原了'
                },
                dataView:{           //数据视图
                    show:true,
                },
            }
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })
</script>
</body>
</html>