php接入ECharts表格

清疚 2022-02-25 05:22 320阅读 0赞

添加前端显示容器

引入`JS`文件

后台取对应格式的`json`数据并绘图：

public function echart(){
            $customer=M('Customer');
            $male=$customer->where("sex='1'")->count();
            $female=$customer->where("sex='0'")->count();
    
    
            $info=array(array('value'=>$male,'name'=>'男'),array('value'=>$female,'name'=>'女'));
            $this->ajaxReturn($info);
        }
    
     <script>
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'), 'shine');
            $.get("/Admin/Echart/echart").done(function (data) {
                console.log(data);
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '会员性别分布',
                        subtext: '真实数据',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['男', '女']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            });
    </script>