Echarts怎么用后台传来的json数据

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>ECharts</title>

    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>

    <script type="text/javascript" src="js/echarts.js"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));

// 显示标题，图例和空的坐标轴

myChart.setOption({

    title: {

        text: '异步数据加载示例'

    },

    tooltip: {},

    legend: {

        data: ['销量']

    },

    xAxis: {

        data: []

    },

    yAxis: {},

    series: [{

        name: '销量',

        type: 'bar',

        data: []

    }]

});

myChart.showLoading(); // 数据加载完之前先显示一段简单的loading动画

var names = []; // 类别数组（实际用来盛放X轴坐标值）

var nums = []; // 销量数组（实际用来盛放Y坐标值）

$.ajax({

    type: "post",

    async: true,

    // 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

    url: "file_ashx/Czmj.ashx",

    // 请求发送到TestServlet处

    data: {},

    dataType: "json",

    // 返回数据形式为json

    success: function(result) {

        // 请求成功时执行该函数内容，result即为服务器返回的json对象

        if (result) {

            for (var i = 0; i < result.length; i++) {

                names.push(result[i].scabbr); // 挨个取出类别并填入类别数组

            }

            for (var i = 0; i < result.length; i++) {

                nums.push(result[i].je1); // 挨个取出销量并填入销量数组

            }

            myChart.hideLoading(); // 隐藏加载动画

            myChart.setOption({ // 加载数据图表

                xAxis: {

                    data: names

                },

                series: [{

                    // 根据名字对应到相应的系列

                    name: '销量',

                    data: nums

                }]

            });

        }

    },

    error: function(errorMsg) {

        // 请求失败时执行该函数

        alert("图表请求数据失败!");

        myChart.hideLoading();

    }

})

</script>

</body>

</html>

参考资料

Echarts怎么用后台传来的json数据的更多相关文章

  1. 通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...

  2. Highcharts接收后台传来的json对象值无法显示

    在highcharts接收后台传来的json对象网上已经有很多的介绍,在此不多做说明,这里想记录一笔的是在接收的json解析后的value值是String类型的,而highcharts里的data数组 ...

  3. Ajax处理后台返回的Json数据

    // 处理后台传来的Json字符串装换成Json对象 var dataJson = JSON.parse(data); // 此时可以从Json对象中取值 if(dataJson.result == ...

  4. c# 动态获取http通过post传来的json数据

    //获取http通过post传来的json数据 using Newtonsoft.Json; public HttpResponseMessage Query() { var request=Syst ...

  5. 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

      先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面 ...

  6. PHP+MySQL+Easyui tree菜单从后台加载json数据(一)

    实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...

  7. ajax传递json数据，springmvc后台就收json数据

    1.ajax数据的封装 var json = {"token":token};//封装json数据 $.ajax({ url:'', data:JSON.stringify(jso ...

  8. ajax获取后台传递的json数据

      最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简 ...

  9. ASP.NET前台table通过Ajax获取绑定后台查询的json数据

    上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax  J ...

随机推荐

  1. grafana模板

    1.安静了这么久,换了一家公司,还有过年,去了上海,去了苏州,去了杭州,认识了一个人,跟老司机他们一起学k8s,所以很累很累,这是监控,也是在老司机的帮助下熟悉使用,3q!

  2. 使用L2正则化和平均滑动模型的LeNet-5MNIST手写数字识别模型

    使用L2正则化和平均滑动模型的LeNet-5MNIST手写数字识别模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献Tensorflow实战Google深度学习框架 实验平台: T ...

  3. 嵌入式 视频编码（H264）hi3518

    这几天在编写视频录制模块,所以,闲暇之余,又粗粗的整理了一下,主要是API,以备不时之用    摄像头获取的模拟信号通过经芯片处理(我们使用的是CX25825),将模拟信号转成数字信号,产生标准的IT ...

  4. sql server常用函数、常用语句

    一.常用函数 1.字符串函数 : charindex(':','abc:123')    --寻找一个字符在一段字符串中起始的位置 len('zhangsan')   --获取一段字符串的长度 lef ...

  5. ① 设计模式的艺术-01.单例（Singleton）模式

    单例模式为何要出现 在工作过程中,发现所有可以使用单例模式的类都有一个共性,那就是这个类没有自己的状态,换句话说,这些类无论你实例化多少个,其实都是一样的. 如果我们不将这个类控制成单例的结构,应用中 ...

  6. Spring Session加Redis

    session是一个非常常见的概念.session的作用是为了辅助http协议,因为http是本身是一个无状态协议.为了记录用户的状态,session机制就应运而生了.同时session也是一个非常老 ...

  7. 51Nod - 1006 最长公共子序列Lcs模板

    给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的).   比如两个串为:   abcicba abdkscab   ab是两个串的子序列,abc也是,abca也是,其中abca是这 ...

  8. C语言实现线性表(链式存储方式)

    #include <stdio.h> #include <stdlib.h> //提供malloc()原型 typedef struct LNode *List; typede ...

  9. Sublime之快捷键（二）

    1. 在使用Sublime的时候,经常用到选中文件中相同的一些字段,那怎么办呢? 快捷键: ctrl + d 可以快速的选择,你所选中的文字,每次按下该快捷键,就会自动的寻找相同的字段: Alt + ...

  10. Sublime删除项目删不掉？

    最近用sublime进行项目的开发,感觉懵逼的像个小白菜~~ 今天遇到的问题可是一个超级白痴的问题,sublime的空白项目文件夹怎么都删不掉,我的傻逼操作是:选中文件--->Delete--- ...