echarts 异步切换数据显示问题

lunyueli4974 2017-09-15 04:59:06
第一遍请求是正常的 第二遍的时候就有问题 不知道是什么情况
有没有人知道的 每次ajax都重新渲染了图图表
...全文
410 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
lunyueli4974 2017-09-26
  • 打赏
  • 举报
回复
怎么样才算明显的标识?
m0_37397627 2017-09-26
  • 打赏
  • 举报
回复
学习下!!!!!!!!!!
VIctor_Ye 2017-09-19
  • 打赏
  • 举报
回复
这是由于,你for循环以下子发送两个请求,至于哪一个先到是不确定的。如果push 的data有明确的标识属性,可以等数据全部请求到之后排序,然后再setOption这样就没问题了。
lunyueli4974 2017-09-15
  • 打赏
  • 举报
回复
lunyueli4974 2017-09-15
  • 打赏
  • 举报
回复
我是通过iframe 吧图表嵌入进去的 父页面点击按钮 子页面监听到了点击获取参数 发送ajax 第一次是正常 再点击另个按钮渲染图表的是会出现上面的情况 而且每个图表都是同样的情况 当我点击一个没有参数的图表的时候 echarts 没有渲染 就只有x和y轴的时候 在点击有参数的按钮 又正常了 再点点击又有问题
lunyueli4974 2017-09-15
  • 打赏
  • 举报
回复
$(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', markLine: { 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(); }; })
qq_28222405 2017-09-15
  • 打赏
  • 举报
回复
发问题麻烦发下你的代码。BUG会有很多 谁知道你的是什么BUG

87,921

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧