`

echarts饼状图实现步骤：

    博客分类：
  • css
JavaScript 
阅读更多
<head> 
    <meta charset="utf-8"> 
    <title>Charts demo</title> 
     <script src="js/esl.js"></script> 
</head> 
<body> 
    <div id="picturePlace"></div> 
     <script type="text/javascript"> 
        // 路径配置 
        require.config({ 
            paths:{  
                'echarts' : 'js/echarts', 
                'echarts/chart/pie' : 'js/echarts' 
            } 
        }); 
         
         // 使用 
        require( 
            [ 
                'echarts', 
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载 
            ], 
            function (ec) { 
                // 基于准备好的dom，初始化echarts图表 
                var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));  
                 
                option = { 
                        title : { 
                            text: '某站点用户访问来源', 
                            subtext: '纯属虚构', 
                            x:'center' 
                        }, 
                        tooltip : { 
                            trigger: 'item', 
                            formatter: "{a} <br/>{b} : {c} ({d}%)" 
                        }, 
                        legend: { 
                            orient : 'vertical', 
                            x : 'left', 
                            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] 
                        }, 
                        toolbox: { 
                            show : true, 
                            feature : { 
                                mark : {show: true}, 
                                dataView : {show: true, readOnly: false}, 
                                restore : {show: true}, 
                                saveAsImage : {show: true} 
                            } 
                        }, 
                        calculable : true, 
                        series : [ 
                            { 
                                name:'访问来源', 
                                type:'pie', 
                                radius : '55%', 
                                center: ['50%', '60%'], 
                                data:[ 
                                    {value:335, name:'直接访问'}, 
                                    {value:310, name:'邮件营销'}, 
                                    {value:234, name:'联盟广告'}, 
                                    {value:135, name:'视频广告'}, 
                                    {value:1548, name:'搜索引擎'} 
                                ] 
                            } 
                        ] 
                    }; 
         
                // 为echarts对象加载数据  
                myChart.setOption(option);  
            } 
        ); 
    </script> 
</body> 
分享到：
| tomcat的配置utf-8配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics