Echarts异步获取数据,刷新实例

Stella981
• 阅读 602
function orgEcharts(){
    var echartsData = [["年份"],["新训"],["复训"]];
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    $.ajax({
        url:'list/data.do',
        data:{
            trainingunitId :$('#tree').val()
        },
        type:'post',
        dataType:'json',
        success:function(data){
            for(var i=0;i<data.length;i++){
                echartsData[0].push(data[i].year);
                echartsData[1].push(data[i].registerCount);
                echartsData[2].push(data[i].driverRegisterCount);
            }
            option = null;
            option = {
                legend : {},
                tooltip : {},
                dataset : {
                    source : echartsData
                },
                
                xAxis : [ {
                    type : 'category',
                    gridIndex : 0
                }, {
                    type : 'category',
                    gridIndex : 1
                } ],
                yAxis : [ {
                    gridIndex : 0
                }, {
                    gridIndex : 1
                } ],
                grid : [ {
                    bottom : '55%'
                }, {
                    top : '55%'
                } ],
                series : [
                // These series are in the first grid.
                {
                    type : 'bar',
                    seriesLayoutBy : 'row'
                }, {
                    type : 'bar',
                    seriesLayoutBy : 'row'
                }, 
                // These series are in the second grid.
                {
                    type : 'bar',
                    xAxisIndex : 1,
                    yAxisIndex : 1
                }, {
                    type : 'bar',
                    xAxisIndex : 1,
                    yAxisIndex : 1
                }, {
                    type : 'bar',
                    xAxisIndex : 1,
                    yAxisIndex : 1
                } ],
                label : {
                    show : true,
                    position : 'top'
                }
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
        
    });
}

先设置了一个数组 echartsData,ajax请求吧数据导入到数据,然后赋值给dataset.source,实现数据赋予 运行orgEcharts()方法,重新请求数据,如果数据改变,就刷新图像

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皮卡皮卡皮 皮卡皮卡皮
2年前
javaScript. Dom 基本操作
DOM节点查找jsdocument.getElementById()//通过id查找document.getElementsByTagName()//通过标签名document.getElementsByName()//通过name名查找document.getElementsByClassName("类名")//通过类名获取元素对象documen
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
全国招聘远程教学
您好我们这边新上的IT培训平台,功能上提供直播录播、在线编程、devops在线实训系统,现在寻求大佬们入驻成为讲师,看可感兴趣。
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
黎明之道 黎明之道
3年前
Python Numpy鸢尾花实训,数据处理
PythonNumpy鸢尾花实训,数据处理本文所用数据下载地址——本实训读取iris数据集中鸢尾花的萼片、花瓣长度数据,并对其进行排序,去重,并求出和、累计和、均值、标准差、方差、最小值、最大
Stella981 Stella981
2年前
ECharts使用:this.dom.getContext is not a function
echarts画图报错this.dom.getContextisnotafunction;原因:因为在初始化echarts的时候,echarts.js规定只能使用dom原生方法获取标签,即document.getElementById('main');错误写法:varmyCommentLineChartecharts
Wesley13 Wesley13
2年前
Java日期时间API系列31
  时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数,是所有时间的基础,其他时间可以通过时间戳转换得到。Java中本来已经有相关获取时间戳的方法,Java8后增加新的类Instant等专用于处理时间戳问题。 1获取时间戳的方法和性能对比1.1获取时间戳方法Java8以前
Stella981 Stella981
2年前
IE7、IE8、IE9对min
问题:    IE7、IE8、IE9对minheight不识别,其他无问题解决:   box{width:100px;height:35px;}   htmlbodybox{width:auto;height:auto;width:100px;minheight:35px;} 实例: