ECharts动态获取数据

时间:2022-12-26 16:11:18
如图,我在用ECharts做一个表格,从后端向前台穿了一个json格式的列表,在前台接收到后想要将这个列表的数据放在ECharts表格中series中的第一个data中去(这个折线图有两条折线),现在我在console.log( option.series[0].data);中看到我已经将数据写进去了,可是图表中怎么还是没有数据。具体情况如下图,望大佬解答,保证有分。 ECharts动态获取数据ECharts动态获取数据ECharts动态获取数据

2 个解决方案

#1


把myChart.setOption(option)放到函数里

#2


在函数里边啊 ECharts动态获取数据
function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main1'));

                var option = {

                    title: {
                        text: '销售量数据统计',
                        subtext: '模拟数据'
                    },
                    tooltip: {
                        trigger: 'axis',
                        type: 'time'
                        {#trigger: 'item'#}
                    },
                    legend: {
                        data: ['月销售量', '周销售量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            {#mark: {show: true},#}
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            {#saveAsImage: {show: true}#}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号',
                                '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号',
                                '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号']
                        },
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一号', '七号', '十三号', '十九号', '二十五号', '三十一号']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '月销售量',
                            type: 'line',
                            data: [],
                            markPoint: {
                                data: [
                                    {name: '月最低', xAxis: 7, yAxis: 10}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '周销售量',
                            type: 'line',
                            xAxisIndex: 1,
                            data: [],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                    ]
                };
                $('.month_span').click(function () {
                    var mon_id = $(this).next().text();
                    console.log(mon_id);
                    $.post('/ajax_mon_mun/', {'mon_id': mon_id}, function (res) {
                        {#debugger;#}
                        var resdata = eval(res);
                        console.log('这是后台渠道的数据',resdata);
                        option.series[0].data=resdata;
                        {#newdata = resdata;#}
                        console.log( '这是图中的数据:',option.series[0].data);
                    });
                });
                myChart.showLoading();
                // 为echarts对象加载数据
                myChart.setOption(option);
            }

#1


把myChart.setOption(option)放到函数里

#2


在函数里边啊 ECharts动态获取数据
function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main1'));

                var option = {

                    title: {
                        text: '销售量数据统计',
                        subtext: '模拟数据'
                    },
                    tooltip: {
                        trigger: 'axis',
                        type: 'time'
                        {#trigger: 'item'#}
                    },
                    legend: {
                        data: ['月销售量', '周销售量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            {#mark: {show: true},#}
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            {#saveAsImage: {show: true}#}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号',
                                '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号',
                                '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号']
                        },
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一号', '七号', '十三号', '十九号', '二十五号', '三十一号']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '月销售量',
                            type: 'line',
                            data: [],
                            markPoint: {
                                data: [
                                    {name: '月最低', xAxis: 7, yAxis: 10}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '周销售量',
                            type: 'line',
                            xAxisIndex: 1,
                            data: [],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                    ]
                };
                $('.month_span').click(function () {
                    var mon_id = $(this).next().text();
                    console.log(mon_id);
                    $.post('/ajax_mon_mun/', {'mon_id': mon_id}, function (res) {
                        {#debugger;#}
                        var resdata = eval(res);
                        console.log('这是后台渠道的数据',resdata);
                        option.series[0].data=resdata;
                        {#newdata = resdata;#}
                        console.log( '这是图中的数据:',option.series[0].data);
                    });
                });
                myChart.showLoading();
                // 为echarts对象加载数据
                myChart.setOption(option);
            }