echarts饼状统计图示例源码

基本信息

源码名称：echarts饼状统计图示例源码

源码大小：0.14M

文件格式：.zip

开发语言：js

更新时间：2019-04-22

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>echarts饼状统计图DEMO下载</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    </head>
    <body>
        <div class="container">
            <div class="demo">
                <h2 class="title"><a href="#">教程：echarts饼状统计图DEMO下载</a></h2>
                <div id="chart_area" style="height:480px;"></div>
            </div>
        </div>
        <script type="text/javascript" src="js/echarts.min.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var chart_area = echarts.init(document.getElementById('chart_area'));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    left: 'center',
                    bottom: 0,
                    data: ['直达', '其它外链', '搜索引擎', '直接输入网址或书签', 'shouce.ren', 'qq微博', '新浪微博', '百度', '谷歌', '邮箱', '必应', '其他']
                },
                series: [
                    {
                        name: '访问来源', //内环
                        type: 'pie',
                        selectedMode: 'single', //单一选中模式
                        radius: [0, '30%'], //饼图的半径 [内半径，外半径]
                        label: {
                            normal: {
                                position: 'inner' //内置文本标签
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false	 //不需要设置引导线
                            }
                        },
                        data: [
                            {value: 335, name: '直达', selected: true},
                            {value: 679, name: '其它外链'},
                            {value: 1548, name: '搜索引擎'}
                        ]
                    },
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        data: [
                            {value: 335, name: '直接输入网址或书签'},
                            {value: 310, name: 'shouce.ren'},
                            {value: 234, name: '新浪微博'},
                            {value: 135, name: '微信'},
                            {value: 1048, name: '百度'},
                            {value: 251, name: '谷歌'},
                            {value: 147, name: '360'},
                            {value: 42, name: 'qq微博'},
                            {value: 60, name: '其他'}
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            chart_area.setOption(option);
        </script>
 </body>
</html>