Django开发 员工管理系统：数据统计-饼图（初学，第六天）（2）

Django开发 员工管理系统：数据统计-柱状图（初学，第六天）-优快云博客文章浏览阅读93次。Django开发 员工管理系统：数据统计-柱状图（初学，第六天）https://blog.youkuaiyun.com/m0_65788436/article/details/145950634?fromshare=blogdetail&sharetype=blogdetail&sharerId=145950634&sharerefer=PC&sharesource=m0_65788436&sharefrom=from_link书接上回

1.选择示例

在实例中选择一种饼图，点击

编写html 

编写JS

根据样例，直接使用，id（m3）要和上面card里加的<div>的id一致，进行一个初步展示，后续再调整数据 ，记得加myChart.setOption(option);

代码中我调整了下图例的位置

/**
         * 初始化饼图
         */
        function initPie() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('m3'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                 },
                tooltip: {
                    trigger: 'item'
                 },
                legend: {
                    bottom: 0
                },
                series: [
                    {
                      name: 'Access From',
                      type: 'pie',
                      radius: '50%',
                      data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                      ],
                      emphasis: {
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                ]
            };
            myChart.setOption(option);

        }

效果

2.删除自带数据

修改你自己的标题和副标题

3.编写ajax

由于上面的模板，只需从后台获取一项内容，即series列表下，第一个字典，其中的data键，所以代码为：option.series[0].data = res.data;

根据ajax的内容，编写url以及对应的视图函数

第一步：创建表

python manage.py makemigrations
python manage.py migrate

手动插入数据

第二步：编写url以及对应的视图函数

效果

学习：【最新Python的web开发全家桶（django+前端+数据库）】 https://www.bilibili.com/video/BV1rT4y1v7uQ/?p=97&share_source=copy_web&vd_source=31eaa5489347e638b4f0e6f61610e06e