ECharts画饼图实例

最新推荐文章于 2023-10-21 16:41:50 发布

连接数据库

最新推荐文章于 2023-10-21 16:41:50 发布

阅读量482

点赞数 1

分类专栏：学习笔记文章标签： JavaScript 画图 echarts.js

学习笔记专栏收录该内容

31 篇文章 1 订阅

订阅专栏

首先要到官网下载两个js：

（1） echarts.js
（2） jquery.js

Main.html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Test</title>  
<script src="jquery.js"></script>  
<script src="echarts.js"></script>  
</head>  
<body>  
<div id="echartsPie" style="width:600px;height:400px;"></div>  
<script type="text/javascript">  
    var echartsPie;  
    var json = [  
                {value:21,name:'gznc_pcc'},  
                {value:26,name:'pcc'},  
                {value:24,name:'张三'}  
                ];  
    var option = {  
            title : {  
                text: 'XXX年龄分布',  
                subtext: '独家报道',  
                x:'center'  
            },  
            tooltip : {  
                trigger: 'item',  
                formatter: "{a} <br/>{b} : {c} 岁"  
            },  
            legend: {  
                orient : 'vertical',  
                x : 'left',  
                data:['gznc_pcc','pcc','张三']  
            },  
            toolbox: {  
                show : true,  
                feature : {  
                    mark : {show: true},  
                    dataView : {show: true, readOnly: false},  
                    magicType : {  
                        show: true,   
                        type: ['pie', 'funnel'],  
                        option: {  
                            funnel: {  
                                x: '25%',  
                                width: '50%',  
                                funnelAlign: 'center',  
                                max: 1548  
                            }  
                        }  
                    },  
                    restore : {show: true},  
                    saveAsImage : {show: true}  
                }  
            },  
            calculable : true,  
            series : [  
                {  
                    name:'年龄',  
                    type:'pie',  
                    radius : '65%',//饼图的半径大小  
                    center: ['50%', '60%'],//饼图的位置  
                    data:json  
                }  
            ]  
        };   

    echartsPie = echarts.init(document.getElementById('echartsPie'));  
    $(function(){  
        echartsPie.setOption(option);  

    });                       
</script>  
</body>  
</html>

效果图：
这里写图片描述

连接数据库

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts画饼图实例

首先要到官网下载两个js：（1） echarts.js （2） jquery.jsMain.html页面&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt...
复制链接

扫一扫