fastadmin 引入echart饼图

最新推荐文章于 2024-09-21 10:03:59 发布

原创最新推荐文章于 2024-09-21 10:03:59 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#fastadmin #echart

本文档介绍了如何在项目中引入ECharts饼图，首先在HTML中添加图表容器，然后在JavaScript文件中通过AJAX获取控制器数据，并初始化ECharts图表。在不同事件触发时，如本周和上周按钮点击，会根据传入参数更新图表数据。控制器接收POST请求，返回数据用于更新图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需要新建页面引入echart饼图

1、打开/application/admin/view/classification/index.html，添加echart标签

<div class="chart tab-pane active" id="bar-chart" style="position: relative; height: 400px;"></div>

2、打开/public/assets/js/backend/classification.js，通过ajax获取控制器的数据。

新建函数，函数名自取，如果需要传数据就自定义字段名，在success函数中初始化echart，echart的图形定义可参考echart文档

url是控制器的路径

然后在index函数中调用上述新建函数方法。如果需要点击传参改变数据，就要函数里面重新调用传参。

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Table, Form, Template, Echarts) {

    var Controller = {
        index: function () {
            let weeks = '';
            Controller.change(weeks);
            $(document).on("click", ".btn-theWeek", function () {
                console.log('本周');
                weeks = "YEARWEEK( date_format( q.createtime,'%Y-%m-%d' ) ) = YEARWEEK( now() )";
                Controller.change(weeks);
            });
            $(document).on("click", ".btn-lastWeek", function () {
                console.log('上周');
                weeks = "YEARWEEK( date_format( q.createtime,'%Y-%m-%d' ) ) = YEARWEEK( now() ) - 1";
                Controller.change(weeks);
            });
        },
        change: function (weeks){
            $.ajax({
                url:"rectification/index",
                type:"POST",
                data:{
                    weeks: weeks
                },
                dataType:"json",
                success:function (row){
                    console.log(row);
                    let one = [];
                    let one_a = {};
                    for(let i=0;i<row.rows.length;i++){
                        one_a = {
                            value: row.rows[i].rate,
                            name: row.rows[i].village
                        };
                        one.push(one_a);
                    }
                    //这句话在多选项卡统计表时必须存在，否则会导致影响的图表宽度不正确
                    $(document).on("click", ".charts-custom a[data-toggle=\"tab\"]", function () {
                        var that = this;
                        setTimeout(function () {
                            var id = $(that).attr("href");
                            var chart = Echarts.getInstanceByDom($(id)[0]);
                            chart.resize();
                        }, 0);
                    });

                    var pieChart = Echarts.init(document.getElementById('pie-chart'), 'walden');
                    option = {
                        title: {
                            show: true,
                            text: '问题整改率',
                            x:'center',
                            y: 'top',
                        },
                        series : [
                            {   
                                name: '问题整改率',
                                type: 'pie',
                                radius: '55%',
                                data: one,
                                roseType: 'angle',
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b}: {c}%'
                                    }
                                },
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    pieChart.setOption(option);
                }
            });
        }
    };
    return Controller;
});

3、控制器获取传参数据，查询。请求类型是post。