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

最新推荐文章于 2024-07-22 16:21:22 发布

狂奔的蜗牛sunyan

最新推荐文章于 2024-07-22 16:21:22 发布

阅读量3.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u012836851/article/details/49863671

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在<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+"的知识点&nbsp;  "+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;
        });

效果图：