| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 5934 人关注过本帖
标题:PHP用echarts图表做动态时间轴(timeline),如何传入动态数据?
只看楼主 加入收藏
if先生
Rank: 1
等 级:新手上路
帖 子:20
专家分:0
注 册:2022-7-20
结帖率:20%
收藏
已结贴  问题点数:20 回复次数:5 
PHP用echarts图表做动态时间轴(timeline),如何传入动态数据?
想用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);

图片附件: 游客没有浏览图片的权限,请 登录注册
搜索更多相关主题的帖子: data bar type 动态 name 
2022-09-13 23:36
apull
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:三体星系
等 级:版主
威 望:216
帖 子:1509
专家分:9241
注 册:2010-3-16
收藏
得分:20 
ajax获取json的回调里拼这个option.options,执行mychart.setOption(option);
2022-09-14 11:00
if先生
Rank: 1
等 级:新手上路
帖 子:20
专家分:0
注 册:2022-7-20
收藏
得分:0 
回复 2楼 apull
版主,JSON数据倒是回调整出来了,就是不知道怎样去拼接,还请指教一下,谢谢哈!
2022-09-14 22:57
apull
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:三体星系
等 级:版主
威 望:216
帖 子:1509
专家分:9241
注 册:2010-3-16
收藏
得分:0 
你不放出你的json内容格式没法整。
2022-09-14 23:41
if先生
Rank: 1
等 级:新手上路
帖 子:20
专家分:0
注 册:2022-7-20
收藏
得分:0 
回复 4楼 apull
我只不过是回调了图表所需的数据而已,类似于原文档的 data: [10, 20, 5, 9, 3],
图片附件: 游客没有浏览图片的权限,请 登录注册
2022-09-15 03:12
pvm2000
Rank: 6Rank: 6
等 级:贵宾
威 望:24
帖 子:180
专家分:312
注 册:2022-12-22
收藏
得分:0 
echarts很强
2023-03-24 01:42
快速回复:PHP用echarts图表做动态时间轴(timeline),如何传入动态数据?
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.019285 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved