社区
JavaScript
帖子详情
echarts 异步切换数据显示问题
lunyueli4974
2017-09-15 04:59:06
第一遍请求是正常的 第二遍的时候就有问题 不知道是什么情况
有没有人知道的 每次ajax都重新渲染了图图表
...全文
418
7
打赏
收藏
echarts 异步切换数据显示问题
第一遍请求是正常的 第二遍的时候就有问题 不知道是什么情况 有没有人知道的 每次ajax都重新渲染了图图表
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用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
下拉框选择事件动态加载echart
数据
这个过程涉及到
异步
请求、
数据
处理、
ECharts
配置项设置等多个环节,是Web前端开发中常见的
数据
可视化应用场景。通过不断学习和实践,你可以更加熟练地掌握这些技能,为用户提供更加生动、交互性强的
数据
展示体验。
echarts
全国地图与各省地图
切换
实例.zip
ECharts
支持
异步
加载
数据
,可以通过 AJAX 或 Fetch 等方式向后端发送请求,获取省份的
数据
,然后在回调函数中处理这些
数据
,更新地图的样式或内容。例如,可以用省份的 GDP
数据
来改变地图区域的颜色或大小。 6. *...
echarts
各省json
数据
-用于
数据
下钻.zip
在
ECharts
中,下钻功能是一种
数据
层次展示的方式,允许用户在不同级别的
数据
集之间进行
切换
,以查看更详细的信息。例如,用户可能首先看到全国层面的总览
数据
,然后通过点击或选择某个区域,进一步深入到省级、市级...
Echarts
地图省级联动,动态加载
数据
,右键返回,并附有省市json地图。
在省级联动事件触发后,可以
异步
请求城市
数据
,然后调用`load`方法将
数据
注入到
Echarts
中。 三、右键返回功能 在
Echarts
地图中添加右键菜单可以提供更丰富的交互体验。
Echarts
本身并不直接支持右键菜单,但我们可以...
echarts
-convert.zip
"
echarts
-convert"可能包含处理动态
数据
流,如Ajax
异步
请求,以及如何更新
ECharts
实例的代码片段。 5. 多源
数据
融合:在复杂的可视化场景中,可能需要整合多个
数据
源。"
echarts
-convert"可能包含合并不同
数据
集的...
JavaScript
87,996
社区成员
224,708
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章