echarts 异步切换数据显示问题

Question

第一遍请求是正常的 第二遍的时候就有问题 不知道是什么情况
有没有人知道的  每次ajax都重新渲染了图图表

Answer 1

发问题麻烦发下你的代码。BUG会有很多 谁知道你的是什么BUG

Answer 2

 $(function () {
        var myChart_ = document.getElementById('rain');
        var myChart = echarts.init(document.getElementById('rain'));        var myChartContainer = function () {            var width = $("#right-cont .map",window.parent.document).width()+"px";
            var height = ($("#right-cont .map",window.parent.document).height())+"px";
            myChart_.style.width =width
            myChart_.style.height =height
        };
        myChartContainer();        var   option = {
            tooltip: {                trigger: 'axis'
            },            grid: {            },
            xAxis: [                {
                    type: 'category',
                    data:['周一', '周二', '周三', '周四', '周五', '周六', '周七'],
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: "#ffffff"
                        }
                    },
                }
            ],            itemStyle:{                normal:{
                    color:'#2C98A0'
                }
            },
            yAxis: [
                {
                    type: 'value',
                    axisLine:{
                        lineStyle:{
                            color:'#ffffff',
//                            width:1,//这里是为了突出显示加上的
                        }
                    },
                    splitLine: {
                        show: false
                    },
                }
            ],
            
            series: [
                {
                    name:'流量',
                    type:'line',
//                     smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    Line: {
                        symbol: ['none', 'none'],
                      /*   label: {
                            normal: {show: false}
                        }, */
                        lineStyle: {
                            normal: {
                                type:"solid",
                                color: 'red',
                                width: 1
                            }
                        },
                        data: [{
                            yAxis: 300
                        }]
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(30,142,104)'
                        }
                    },                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(39,88,164)'
                            }, {
                                offset: 1,
                                color: 'rgb(37,137,160)'
                            }])
                        }
                    },
                    data: ['12','45','87','69','195','98']
                },
                {
//                     smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    },
                    lineStyle:{
                        normal:{
                            type:"dotted",                        }
                    },
                    type:"line",
                    data:[,,,,,98,35]
                }
            ]
        };
        myChart.setOption(option);
        myChartContainer();
        myChart.resize();
          var button = $(".button",window.parent.document);
              /* var code = $(".button .active_",window.parent.document).attr("id");
          console.log(code)
            var url = "../rest/rthyinfo/core/river/station"
            
            $.ajax({
                url:url,
                type:"post",
                data:{'code':code},
                dataType:"json",
               
                success:function (data) {
                  var data = eval(data);
                  
                        
                        var xData = [];
                        var yData = [];
                        for (var i = 0;i<data.data.list.length;i++){
                        xData.push(data.data.list[i].tm);
                        yData.push(data.data.list[i].q);
                        }
                   myChart.setOption({
                  xAxis: {
             
              
                data: xData.map(function (str) {
                    return str.replace(' ', '\n')
                    }),
              
            },
                series: [{
                    // 根据名字对应到相应的系列
                  
                     data: yData
                }],
               
            });
//                     console.log(xData) 
                }
            });
    */
        button.click(function () {
          var code = $(".button .active_",window.parent.document).attr("id");
          console.log(code)
            var url = "../rest/rthyinfo/core/river/station"
            
            $.ajax({
                url:url,
                type:"post",
                data:{'code':code},
                dataType:"json",
               
                success:function (data) {
                  var data = eval(data);
                  
                        
                        var xData = [];
                        var yData = [];
                        for (var i = 0;i<data.data.list.length;i++){
                        xData.push(data.data.list[i].tm);
                        yData.push(data.data.list[i].q);
                        }
                   myChart.setOption({
                  xAxis: {
             
              
                data: xData.map(function (str) {
                    return str.replace(' ', '\n')
                    }),
              
            },
                series: [{
                    // 根据名字对应到相应的系列
                  
                     data: yData
                }],
               
            });
//                     console.log(xData) 
                }
            });
        });
        window.onresize = function () {            myChartContainer();
            myChart.resize();
        };
    })

Answer 3

我是通过iframe 吧图表嵌入进去的  父页面点击按钮 子页面监听到了点击获取参数 发送ajax 第一次是正常 再点击另个按钮渲染图表的是会出现上面的情况 而且每个图表都是同样的情况 当我点击一个没有参数的图表的时候 echarts 没有渲染 就只有x和y轴的时候 在点击有参数的按钮 又正常了 再点点击又有问题

Answer 4

这是由于，你for循环以下子发送两个请求，至于哪一个先到是不确定的。如果push 的data有明确的标识属性，可以等数据全部请求到之后排序，然后再setOption这样就没问题了。