ECharts怎样用AJAX从数据库中调数据?

下面代码中是ECharts用AJAX从数据库中调数据,但前端页面无法显示数据,求问代码中哪里有误?

map1.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="myChart" style="height:500px;"></div>
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$.ajax({
    type: "post",
    async: false, //同步执行 
    url: "mapdata.php",
    dataType: "json", //返回数据形式为json 
    success: function (result) {
            myChart.hideLoading(); //隐藏加载动画 
            myChart.setOption({ //渲染数据 
                series: [{
                    // 根据名字对应到相应的系列 
                    name: '2015年GDP',
                    data: result
                }]
            });
        },
        error: function () {
            alert("请求数据失败!");
        }
});
</script>
<script src="./js/echarts.js"></script>
<script>
require.config({
    paths: {
        echarts: './js'
    }
});
require(
    [
        'echarts',
        'echarts/chart/map'   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
    ],
    function (ec) {
        var myChart = ec.init(document.getElementById('myChart'));
        var option = {
            title: {
                text: '2015年GDP统计数据',
                subtext: '数据来源网络(单位:亿元)',
                left: 'center' //标题居中 
            },
            tooltip: { //提示工具, 
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}亿元"
            },
            visualMap: { //视觉映射组件,可以根据范围调节数据变化 
                min: 0, //最小值 
                max: 10, //最大值 
                left: 'left', //位置 
                top: 'bottom',
                orient: 'horizontal', //水平 
                text: ['高', '低'], // 文本,默认为数值文本 
                calculable: true //是否启用值域漫游,即是否有拖拽用的手柄,以及用手柄调整选中范围。 
            },
            toolbox: { //工具栏 
                show: true,
                orient: 'vertical', //垂直 
                left: 'right',
                top: 'center',
                feature: {
                    mark: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    } //保存为图片 
                }
            },
            series: [{
                name: '2015年GDP',
                type: 'map',
                mapType: 'china', //使用中国地图 
                roam: false, //是否开启鼠标缩放和平移 
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                data: []
            }]
        };
        //myChart.showLoading(); //预加载动画
        myChart.setOption(option); //渲染地图
    }
);
</script>
</body>
</html>


mapdata.php


<?php
include_once('connect.php'); //连接数据库 
//查询数据 
$sql = "select * from echarts_map";
$query = mysql_query($sql);
while ($row = mysql_fetch_array($query)) {
    $arr[] = array(
        'name' => $row['province'],
        'value' => $row['gdp']
    );
}
mysql_close($q);
echo json_encode($arr); //输出json格式数据
?>


connect.php


<?php
$q = mysql_connect("localhost","root","dglgxx");
if(!$q)
{
die('Could not connect: ' . mysql_error());
}
mysql_query("set names utf8"); //以utf8读取数据
mysql_select_db("test02",$q); //数据库
?>

数据库的表
图片说明

0

2个回答

先打印一下result,看你的后台把json值传过来没有,

0

你要安装echart的数据格式自己封装一点这个数据库里面的字段,自己写一个to对象,然后把这个to对象转换成json数据

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
ASP.NET+Echarts+Ajax从数据库中获取数据
html &amp;lt;div class=&quot;panel-body&quot;&amp;gt; &amp;lt;div id=&quot;signNum&quot; style=&quot;height: 400px; width: 100%&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp
ajax异步获取数据库数据绘制Echarts图表demo
ajax异步获取数据库数据绘制Echarts图表demo.rar
echarts结合ajax动态获取数据库数据
最近做一个温度监控的项目,本文介绍一下echarts结合ajax动态获取数据库数据的方式,亲测可用,如有错误请提出宝贵意见首先将ArrayList获取数据集转为JSONArray对象,此部分写在GetTemperatureServlet的doPost里ArrayList<Environment> array; try { //getMessage()方法里包含从数据库获取数据存入ArrayL
饼状图向下钻取:自己实例,ajax后台获取数据
html:   js: $(function () {     $.ajax({         type: "POST",         url: "../reservations/pie",         //基础饼状图         success: function (dat
利用Ajax实现数据的同步传输,从mysql中提取数据,通过echarts可视化
如何将mysql数据库中的方式通过echarts可视化呢,以下面这个简单的例子向大家进行演示: 步骤一:mysql的创表和插入数据,当然这些数据也可以是你通过爬虫抓取的。
echarts+ajax动态获取后端数据
效果图: 下面从前端和后端来讲解(如果有些地方描述的不是很好或者不够详细,可以留言交流) 目录 一 前端 1.1 引入js文件 1.2 准备容器 1.3 日期控件和按钮 1.4 异步请求 1.5 前端完整代码 二、后端 2.1 Controller层 2.2 Service层 一 前端 1.1 引入js文件 &amp;lt;script src='../js/echart...
echarts ajax 动态获取数据
keys 和 values 都是动态数据 注意如果数据是{value:335, name:'直接访问'}这种格式 需要使用eval('(' + strtojson + ')') 转一下//加载图表 start $(function(){ $.ajax({ //提交数据的类型 POST GET type:"POST",
echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端
1.echarts的官网上的demo,都是直接写死的随机数据,没有和数据库的交互,所以就自己写了一下,ok,我们开始一步一步走一遍整个流程吧。 就以官网最简单的那个小demo来做修改吧。官网上的小demo的效果图如下:(很熟悉,有没有) 2.按照echarts的使用方法新建一个echarts.html文件。为ECharts准备一个具备大小(宽高)的Dom(讲的有点细,熟悉的朋友
ajax异步获取数据绘制echarts图表
// echarts图表绘制函数 function myData(text) { var xA = []; var yA = []; // 将获取到的json数据列表清洗数据后push到xA、yA两个坐标轴数据列表 // 注意,此处循环函数可以用于未知数量的数据,不必提前预知数据量大小 for(var i = 0; i &amp;amp;amp;lt; text.data.leng...
ECharts3 实现 AJAX异步加载 数据库数据
ECharts3的文档里其实对异步加载说的很明白,但是示例都是生成的随机数据,大多数应用是直接读数据库数据然后动态加载到ECharts图表里的,简单的思路就是把需要显示的数据库数据封装成json格式,然后异步获取json数据,解析显示在图表里。生成json数据不多说了,js重要部分如下: var startTime1=$("#start").html(); var endTime1=$
ajax请求获取数据,前端绘制Echarts折线图
我只绘制折线图,其他的没做 需要引入echarts.js 下载地址:百度的下载链接 前端页面和ajax请求 &amp;amp;lt;!-- 为echarts准备有大小的dom --&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;main&amp;quot; style=&amp;quot;width: 100%;height:600px;&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; $
[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识、中国地图和贵州地区各省份的数据分析,其中贵州地图才是它的核心内容。 这篇文章主要结合PHP、MySQL、JQuery和Ajax从数据库中获取数据,动态的显示值,这是实现真正可视化的技术入,可以应用于实际的项目中。基础性文章,希望对您有所帮助,如果文章中存在不足之处,还请海涵~
Ajax动态获取数据 ECHARTS图表
Ajax动态获取数据 ECHARTS图表
浅谈highcharts(echarts)通过ajax获取后台数据从而改变数据图
好久没写csdn博客了,随着工作项目的展开自己也越来懒了。。不过今天有点空余的时间,所以来写写博客。 恰巧这次的项目有图表这一块,所以就用到了highcharts和echarts。 我们都知道如果写纯静态的图表图很简单,那么如果写动态的图表图该如何写呢? 好了,不多BB了,言归正传! 1、引入图表所需要的js文件
Echarts通过json从数据库获取实时数据实现动态仪表盘
发现Echarts 的仪表盘做的比hightcharts更漂亮,而且加载异步数据的方法更简单方便,所以用Echart做了仪表盘,并且采用jQuery的方法,可以大大精简代码语句,与大家分享,继续学习中。
读取数据库数据,以报表的形式显示在前台网页(asp.net+echarts+ajax+数据库)
1、首先在VS2010里新建项目ASP.NET Web应用程序:WebApplication1; 在应用程序里新建项目:WebForm.aspx(Web窗体),Model.cs(类),Controller.cs(类),Handler.ashx(一般处理程序),WebForm.js(JScript文件); 2、(1)首先,创建一个Model类,对象实体化: namespace WebAppli...
1.简单实例:ASP.NET下Echarts通过Ajax从数据库中获取数据
后台:Test01.ashx.cs:从数据库获取数据,通过HTTP请求(HttpContext)实现和前台数据传递json数据 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.SqlClient; using System.Data
Django中从mysql数据库中获取数据传到echarts
尝试了几种方法,感觉过于复杂,于是自己写了一个方法。 (1)首先在要绘图的页面传入从数据库中提取的参数,这一步通过views可以实现; (2)然后是页面加载完成时执行的函数ready,调用方法f; (3)在函数f中获取参数,此时是string类型,需要将其转换为json对象,使用eval即可; (4)json对象的每一个元素均为string(可以使用typeof()判断),需要取出每一
Echarts地图报表,从数据库获取数据,json传值
使用百度的Echarts插件做报表
echarts图表动态获取后台数据详解(三)--ajax跨域请求
前面两篇文章,分别介绍了静态数据的echarts展示和从后台数据库获取数据展示在图表上,但是这都是在同一个项目下。要是遇到这样一种情况:要求新建一个项目(或者网站、网页),与后台数据库的那个项目不在一个项目上。但是,所要展示的数据,却要从后台数据库中索取。此时,ajax请求就要跨域了。简单的说:有A、B两个不同的项目,A要展示B数据库中的数据,以前直接使用的ajax请求就不行了,网上百度了很多,我
ECharts饼图从后台动态获取数据并展示
$.post( url, {'id' : gridStationSeq  }, function(result) { console.log("接收返回值="+result) if (result != null) { var label=[]; var data = JSON.parse(result); var arr=[]; alert(data.nFaultStakeNum)
Echarts动态获取数据(C#)
http://blog.csdn.net/mt122/article/details/38460167
echarts+Servlet+mysql从数据库获取数据实现简单图表展示
用Servlet实现的echarts展示两种不同形式图表的小demo,使用的开发工具是eclipse,数据库是mysql。文件中包含项目源码,对应的数据库,以及项目运行后实现的图表截图(含url)。项目本人亲测,可完美展示图表,若有疑问,可Email我,Email:bpcforevery@gmail.com 。(ps:本人在另一个上传的文件中实现了用SSM框架实现的echarts展示图表的小demo,使用的数据库也是mysql,感兴趣的可以去看看)。
[Echarts可视化] php和ajax连接数据库实现动态数据可视化
一. Echarts绘制直方图 Echarts官网地址:http://echarts.baidu.com/index.html 注意:基础知识参考前一篇文章,这篇文章主要是代码为主,整个流程都是详细的。同时发现,准备写这篇文章的时候,“纯臻”大神也写了篇类似的,但依然有不同的地方可能对你有所帮助。 Echarts代码 test01.html [html] view pl
echarts动态ajax改变渲染数据
有个需求:动态请求数据并渲染,百度之后看文档由于时间紧没细看,在百度找了篇文章参考解决。https://segmentfault.com/q/1010000012349753我的是柱状图,xDate和yDate是横轴和纵轴的数据。在往option中push值得时候注意:    之前我是这样操作的: option.series[0].data.push(result[res][&quot;name&quot;]);...
Echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端
从Echarts官网文档教程上可以找到一个最简单的Echarts图表: &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;am
使用AJAX向ECharts送入MySQL中的数据1:doPost方式
最近学完了ECharts官方推出的视频教程,了解了常用表格的个性化定制方法,但却并没有真正将其应用到我们的项目(Java Web项目)中。官方的所有业务都是与数据可视化相关的,具体到每一种项目,对于新手来说,只能通过论坛、博客或第三方技术教程网站来学习。为了让大家尽快地将ECharts应用到项目中,我也通过边学边做的方式,与大家共同来探讨! 为了使我们更专注于后台与前台交互的实现,我使用的例子是
利用ajax获取echarts图表的数据
ECharts是由百度打造的一个纯javascript的图标库,很好用。 下载地址:http://echarts.baidu.com/download.html 1. echarts文件的引入,在javascript块引入,src按需修改 script type="text/javascript" src="./res/js/echarts.js">script> 2. 基于准备好的
解决Ajax获取到数据放入echarts里不显示最有效的解决方法
解决Ajax获取到数据放入echarts里不显示最有效的解决方法
Echarts后台获取数据
记录一下,毕竟不是专业搞前端的 后台代码 @Controller public class EchartsDemo { @ResponseBody @RequestMapping(&quot;/hello&quot;) public Map hello(){ Map map = new HashMap(); List list = new ArrayLis...
解决ajax获取到数据放到echarts无法显示的问题
   后台部分代码: returnMap.put(&quot;powerLevelCategories&quot;, powerLevelCategories); returnMap.put(&quot;powerLevelSeries&quot;, powerLevelSeries); try { response.setContentType(&quot;text/text;char...
ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
http://www.stepday.com/topic/?906     [摘要]: 最近不要ECharts图表使用者的初学者均在询问如何通过ajax异步获取数据,动态赋值给echarts图表对象,因为这样一来,我们就可以实现图表数据动态呈现,后期加入时间戳即可实时刷新图表数据。正是基于这样一个环节比较重要,所以我也利用时间专门写了几篇关于如何通过ajax异步获取图表数据并加载的
简单echarts数据库加载数据用例
echarts的简单柱状图应用,数据库动态加载相应数据 html &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;ECharts&amp;lt;/title&amp;gt; &amp;lt;!-- 引入 ech
echarts饼图动态获取数据
  饼图获取动态数据   首先页面引入jquery.js和echarts.js  官方文档例子的获取静态数据 option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'it...
ajax+echarts实现数据可视化
在项目开发中,我们往往会有将数据可视化展现的功能,于是学会echarts的使用就成为了一件刻不容缓的事情。在echarts官网的实例中,可以大概知道echarts有两种方法实现图表,首先是通过ajax和后台实现jsonarray以及jsonobject等类型的传输,具体传输格式需要参考ehcarts中的示例代码,另外一种方法则是生成.json文件,通过在前端用$.get获取文件中的json数据。其...
使用Echarts图表动态加载饼图数据 pie
使用Echarts图表动态加载饼图数据 pie 新人撰写博客,如有不足望提出且多多见谅!项目设计过程当中需要用到统计报表功能。有试过很多报表控件,最后看中了百度团队当中的Echarts。今天,我们要实现的是标准饼图的动态数据加载。 * Echarts简介* ECharts是一款开源、功能强大的数据可视化产品。 —— [ Echarts官网 ] 具体实现代码如下:HTML代码: <!
通过Ajax从数据库中获取数据
后台:Test01.ashx.cs:从数据库获取数据,通过HTTP请求(HttpContext)实现和前台数据传递json数据using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.SqlClient; using System.Data; usin...
echarts ajax动态调用数据
String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> echarts
ECharts通过Ajax动态加载数据到图表
参考官网:http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2 首先要展示的图表像这样: 现在开始前后端代码展示。by the way,使用的开发框架为nutz,重点还是echarts数据。不要本末倒置。 1.从官网下载包,使用其中的dist和echarts.js 将dist文件夹和ech
echarts $.ajax返回数据 循环添加data[]
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); $.ajax({ url:&quot;/regionAccount/selectDownCount&quot;, ...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 怎样用云计算 echarts教程python