注册 登录
编程论坛 PHP技术论坛

PHP用echarts图表做动态时间轴(timeline),如何传入动态数据?

if先生 发布于 2022-09-13 23:36, 5910 次点击
想用PHP做动态图表的时间轴,找了个例子,但是百思不得其解,底部变量options数据,怎样才能做成动态数据?我的后台已经生成出JSON格式,就是不知道如何传参进去?
有大佬指点一下吗?

程序代码:

var option = {
                //timeline基本配置都写在baseoption 中
                baseOption: {
                    timeline: {
                        //loop: false,         
                        axisType: 'category',
                        show: true,
                        autoPlay: true,
                        playInterval: 1000,
                        data: ['Account Management', 'Application', 'Client H/W', 'Client S/W', 'HPI打印机']
                    },
                    grid: {
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['第一周', '第二周', '第三周', '第四周', '第五周']
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '数量',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }],
                    series: [{
                        type: 'line',
                    }, ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器,坐标轴触发有效
                            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                },

                //变量则写在options中
                options: [
                    //Account Management
                    {
                        series: [{
                            name: '故障',
                            type: 'bar',
                            data: [20, 12, 31, 34, 31]
                        }, {
                            name: '请求',
                            type: 'bar',
                            data: [10, 20, 5, 9, 3]
                        }]
                    },
                    //Application
                    {
                        series: [{
                            name: '故障',
                            type: 'bar',
                            data: [20, 22, 34, 14, 21]
                        }, {
                            name: '请求',
                            type: 'bar',
                            data: [10, 20, 5, 9, 3]
                        }]
                    },
                    //Client H/W
                    {
                        series: [{
                            name: '故障',
                            type: 'bar',
                            data: [19, 2, 3, 14, 51]
                        }, {
                            name: '请求',
                            type: 'bar',
                            data: [10, 20, 5, 9, 3]
                        }]
                    },
                    //Client S/W
                    {
                        series: [{
                            name: '故障',
                            type: 'bar',
                            data: [9, 27, 35, 4, 1]
                        }, {
                            name: '请求',
                            type: 'bar',
                            data: [10, 20, 5, 9, 3]
                        }]
                    },
                    //HPI打印机
                    {
                        series: [{
                            name: '故障',
                            type: 'bar',
                            data: [19, 21, 33, 8, 42]
                        }, {
                            name: '请求',
                            type: 'bar',
                            data: [10, 20, 5, 9, 3]
                        }]
                    },
                ]
            }
            var mychart = echarts.init(document.getElementById('container'));
            mychart.setOption(option);

只有本站会员才能查看附件,请 登录
5 回复
#2
apull2022-09-14 11:00
ajax获取json的回调里拼这个option.options,执行mychart.setOption(option);
#3
if先生2022-09-14 22:57
回复 2楼 apull
版主,JSON数据倒是回调整出来了,就是不知道怎样去拼接,还请指教一下,谢谢哈!
#4
apull2022-09-14 23:41
你不放出你的json内容格式没法整。
#5
if先生2022-09-15 03:12
回复 4楼 apull
我只不过是回调了图表所需的数据而已,类似于原文档的 data: [10, 20, 5, 9, 3],
只有本站会员才能查看附件,请 登录
#6
pvm20002023-03-24 01:42
echarts很强
1