您的位置：首页 > Web前端 > JavaScript

基于ECharts-JS图表库实现饼形图数据详细显示

2015-11-16 11:33 645 查看

在<head>中采用标签式单文件引入：
<script type="text/javascript" src="http://sunyanweblog.blog.163.com/blog/ECharts/echarts-all.js"></script>
在<body>中为饼形图的存放准备一个具备宽高的<div>：
<div id="container" style="height:550px;margin-top:20px;"></div>
在<body>中为分类数据详细展示准备一个<div>：
<div id="showContent" style="width:450px;height:500px;margin-top:210px;margin-left:250px;position:absolute;"></div>
在自定义js文件中基于准备好的<div>初始化echarts图表：
var myChart = echarts.init(document.getElementById('container'));
自定义option数据：
option = {

            tooltip : {

                trigger: 'item',

                textStyle : {

                    fontSize : '20',

                    color:'white',

                    fontFamily:'幼圆'

                },

                formatter: "{b} : {c}个约 {d}%",

            },

            legend: {

                orient : 'vertical',

                x : 'right',

                textStyle : {

                    fontSize : '20',

                    color:'white',

                    fontFamily:'幼圆'

                },

                data:['掌握得很好','掌握得良好','掌握得一般','掌握得不好','未掌握']

            },

            toolbox: {

                show : false,

            },

            calculable : true,

            series : [{

                name:'',

                type:'pie',

                radius : [20, 150],

                center : ['50%', 200],

                roseType : 'radius',

                width: '40%',

                max: 60,

                itemStyle : {

                    normal : {

                        label : {

                            show : false

                        },

                        labelLine : {

                            show : false

                        }

                    },

                    emphasis : {

                        label : {

                            show : true,

                            textStyle : {

                                fontSize : '20',

                                fontFamily:'幼圆'

                            }

                        },

                        labelLine : {

                            show : true,

                        }

                    }

                },

                data:[

                    {value:levelArr[4], name:'掌握得很好',content:knowledgeArr[4]},

                    {value:levelArr[3], name:'掌握得良好',content:knowledgeArr[3]},

                    {value:levelArr[2], name:'掌握得一般',content:knowledgeArr[2]},

                    {value:levelArr[1], name:'掌握得不好',content:knowledgeArr[1]},

                    {value:levelArr[0], name:'未掌握',content:knowledgeArr[0]},

                ]

            }]

        };

为echarts对象加载数据：
myChart.setOption(option);
绑定点击事件：
var ecConfig = echarts.config;

        myChart.on(ecConfig.EVENT.CLICK, function (param){

            var val = option.series[param.seriesIndex].data[param.dataIndex].value;

            var name = option.series[param.seriesIndex].data[param.dataIndex].name;

            var content = option.series[param.seriesIndex].data[param.dataIndex].content;

            var addHtml = "<p style='font-size:25;color:#FFFFFF;font-family:\"幼圆\";'>"+name+"的知识点   "+val+"个</p><br><hr style='margin-top:-5px;color:#FFFFFF;'><br>";

            addHtml += "<p style='font-size:20;color:#00FFFF;font-family:\"幼圆\";'>"+content+"</p>";

            document.getElementById('showContent').innerHTML = addHtml;

        });

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航