2020-10-08

他还年轻°

于 2020-10-08 16:55:18 发布

阅读量77

点赞数

分类专栏：文献文章标签： jquery

本文链接：https://blog.csdn.net/A206699/article/details/108965381

版权

文献专栏收录该内容

29 篇文章 0 订阅

订阅专栏

罗培发于2020年10月开发了一篇专题技术总结，介绍了使用MVC架构在网页上创建饼状图的方法，通过AJAX请求数据并结合外部插件，展示了学术数据的可视化。文章详细讲解了如何引用插件、设计数据绑定的图表容器和最终效果展示。

摘要由CSDN通过智能技术生成

文献种类：专题技术总结文献
开发工具与关键技术： MVC
作者：罗培发；年级： 1903 ；撰写时间：2020 年 10 月6日
文献编号：归档时间：年月日

用代码写出饼状图

开发工具与关键技术： MVC
作者：罗培发 
撰写时间：2020.10.6
一．引用外部插件
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008165409865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0EyMDY2OTk=,size_16,color_FFFFFF,t_70#pic_center)

  注：这个外部插件可以直接复制，拿去用！！！
二．设计好的容器
（代码可直接用！但是要绑定数据）
function createChart() {
            //获取参数
            var academeID = $("#searchAcademeID").val();
            var specialtyID = $("#searchSpecialtyID").val();
            var gradeID = $("#searchGradeID").val();
            var classID = $("#searchClassID").val();

            var layerIndex = layer.load();
            //请求数据
            $.post("@Url.Content("~/StatisticalChart/Pie/GetPieChartData")",
                {
                    academeID: academeID,
                    specialtyID: specialtyID,
                    gradeID: gradeID,
                    classID: classID,
                },
                function (jsonData) {
                    layer.close(layerIndex);
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: jsonData.title,
                            subtext: '副标题',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: jsonData.legendData
                        },
                        series: [
                            {
                                name: '学生人数',
                                type: 'pie',//指定饼图
                                //radius: '70%',//指定圆的半径
                                radius:['50%','70%'],//[内部空白圆的半径，外部圆的半径]
                                center: ['50%', '50%'],//指定圆心的位置
                                data: jsonData.chartData
                            }

                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myBarChart.setOption(option);
                });
        }

三．最后的效果图
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008165449522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0EyMDY2OTk=,size_16,color_FFFFFF,t_70#pic_center)