社区
JavaScript
帖子详情
echarts 异步切换数据显示问题
lunyueli4974
2017-09-15 04:59:06
第一遍请求是正常的 第二遍的时候就有问题 不知道是什么情况
有没有人知道的 每次ajax都重新渲染了图图表
...全文
410
7
打赏
收藏
echarts 异步切换数据显示问题
第一遍请求是正常的 第二遍的时候就有问题 不知道是什么情况 有没有人知道的 每次ajax都重新渲染了图图表
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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
数据
通过下拉框
异步
刷新echart
数据
,原文地址http://blog.csdn.net/kebi007/article/details/52887570
ECharts
在React+Antd用法及常见错误
最近项目中开始使用
ECharts
做图表,在React+Antd中使用Echart还是遇到了很多坑,希望记录下解决办法可以帮助到大家。由于初次使用,很多代码优化空间很大,希望大家能帮我提出,感恩~ 最终效果 1、实现点击折线图上的点联动两个饼图
数据
2、处理
ECharts
饼图
数据
为0或者是空时饼图消失
问题
2、 在对
ECharts
图表进行init // 饼图初始option const initPieOption = { // tooltip: { // show: false, // }, dataset: { dimensions: ['de
Echarts
入门到精通(附SSM项目源代码)
掌握
Echarts
折线图,柱状图,饼图,南丁格尔图,地图,K线图的使用方法与技巧;从简单的静态图开始,对各种图表样式设置进行了全面深入的讲解;逐步深入到后台调用
数据
库生成有商业意义的各种图表;通过全国手机销量统计,全国各省分污染指数,学生考试成绩统计等案例,使用ajax
异步
调用,生成符合各种图表
显示
的json格式
数据
,生成丰富精美的图表。图表自适应电脑,IPAD,手机等各种终端屏幕大小,还有丰富的
Echarts
工具条,随便
切换
不同图形
显示
,支持图表下载等功能。项目开发技术:java,jsp,mysql,MyBatis,SpringMVC,jquery,ajax,json项目运行环境:jdk1.7及以上版本,tomcat6.0及以上版本,mysql5.5及以上版本项目开发工具: 本项目开发工具是Eclipse,也支持myEclipse,Intellij Idea等其他版本开发工具
Echarts
异步
数据
加载遇到的
问题
看了
Echarts
官网
异步
加载
数据
的Demo var myChart =
echarts
.init(document.getElementById('main')); //
显示
标题,图例和空的坐标轴 myChart.setOption({ title: { text: '
异步
数据
加载示例' }, tooltip: {}, ...
echarts
异步
数据
获取、通过
切换
搜索条件后重复渲染
问题
、添加loading
1.同一坐标系渲染多条折线
问题
:在
数据
请求回来之前已经开始画线,导致线条画不上的
问题
解决: // 曲线图1 actulePriceList1(){ return new Promise((resolve, reject) => { priceClient.findActulePriceListByName(StringValue.of(this.condition.varietyNameCode)).then(res=>{
JavaScript
87,921
社区成员
224,619
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章