echarts动态获取后台数据

一.现在我有JSP页面,页面里面有个div中有一个panel面板,面板种面嵌入的map地图。

  <div class="panel panel-default">
     <div class="panel-heading"><h3 class="panel-title"><i
         class="fa fa-bar-chart-o fa-fw"></i>中国地图 </h3></div>
          <div class="panel-body">
               <div style="mini-width:400px;height:350px" data-toggle="echarts"
                            data-type="map" data-url="pop/echarts-mapData.html"></div>
             </div>
          </div>
     </div>

二。其中,data-url="pop/echarts-mapData.html",引入的是一个外部html页面,但是里面是死数据,并且是JSON格式的数据。代码如下:

 {
  "tooltip": {
    "trigger": "item"
  },
  "setTheme": {
    "theme": "macarons"
  },
  "legend": {
    "orient": "vertical",
    "x": "left",
    "data": [
      "党员人数"
    ]
  },
  "dataRange": {
    "min": 0,
    "max": 300,
    "x": "left",
    "y": "bottom",
    "text": [
      "高",
      "低"
    ],
    "calculable": true
  },
  "toolbox": {
    "show": true,
    "orient": "vertical",
    "x": "right",
    "y": "center",
    "feature": {
      "mark": {
        "show": true
      },
      "dataView": {
        "show": true,
        "readOnly": false
      },
      "restore": {
        "show": true
      },
      "saveAsImage": {
        "show": true
      }
    }
  },
  "series": [
    {
      "name": "党员人数",
      "type": "map",
      "mapType": "重庆|江北区",
      "roam": false,
      "itemStyle": {
        "normal": {
          "label": {
            "show": true
          }
        },
        "emphasis": {
          "label": {
            "show": true
          }
        }
      },
      "data": [
        {
          "name": "江北区",
          "value": 299
        }
      ]
    }
  ]
}

三。很明显,↑↑↑↑↑↑上面的代码直接就是地图里面的各种参数(虽然数据是死的)。
图片效果如下:
图片说明

问题:

    echarts的官网我也逛过多次了,但是例子都是新建的一个html网页,在里面加入的js代码,并配合ajax请求获取的后台数据。但是这样的话,加载出来的地图却是一个单独的html网页效果而已,并不能达到我嵌入JSP页面的div中这样的效果。

    所以,请教各位能伸出援手,帮帮忙。---我的目的就是想,不要单独的一个html页面,而是就像上面的死数据一样,嵌入在JSP页面中,只是数据变为从后台获取而已。

2个回答

在官网有很多示例,建议你把Echarts的官方压缩包下载到本地。
文件路径为:\echarts-2.2.7\doc\example\www\index.html,这个文件示例,就告诉你如何是在一个页面的div块中画地图。
而且数据交互,你只要做一个ajax请求,返回数据格式与data的格式一致就可以了。

zfb52572
一念堕轮回 回复lixuecheng_it: 感谢你的回复了,昨晚已经想通了。现在就差从后台调数据了。
接近 2 年之前 回复
en_joker
孤芳不自賞 ajax有一个参数就是dataType支持html格式的,你试一下。
接近 2 年之前 回复
zfb52572
一念堕轮回 这个例子我看了,他主要是介绍在新页面下,划分出div,然后在这个div中画地图,我的难题是引用外部html,并且这个html还是纯JSON数据。想写ajax请求都无从下手。
接近 2 年之前 回复

楼主这是做到哪一步了? 向后台取数据------数据套进option---重新setOption ---结束 基本套路就这样,楼主是哪一步做不到? -----
-------总之就是没理解楼主遇到的难点在哪个地方!!!!

en_joker
孤芳不自賞 回复一念堕轮回: 你用ajax把函数包起来就ok啊。
接近 2 年之前 回复
zfb52572
一念堕轮回 这个死数据是嵌入到div里的,就是这个data-url="pop/echarts-mapData.html页面,其中的数据格式是json,并且这个html页面里没有任何html标签,所以我的难点就是不知道在什么地方写ajax请求。
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
ECHARTS如何获取后台数据
[code=javascript] require(rn [rn 'echarts',rn 'echarts/chart/line',rn 'echarts/chart/pie',rn 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载rn ],rn function (ec) rn // 基于准备好的dom,初始化echarts图表rn var myChart = ec.init(document.getElementById('echart')); rn myChart.showLoading( rn text : "图表数据正在努力加载...", rn effect :'ring',//'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble' rn textStyle : fontSize : 20 rn );rn var option = rn title:rn text:'财务对比图',rn x:80rn ,rn tooltip: rn show: truern ,rn legend: rn data:['计划','实际']rn ,rn toolbox: rn show : true,rn feature : rn mark : show: true,rn dataView : show: true, readOnly: false,rn magicType : show: true, type: ['line', 'bar', 'stack', 'tiled'],rn restore : show: true,rn saveAsImage : show: truern rn ,rn calculable : true,rnrn xAxis : [rn rn type : 'category',rn data : ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]rn rn ],rn yAxis : [rn rn type : 'value'rn rn ],rn series : [rn rn "name":"计划",rn "type":"bar",rn "data":[100, 100, 100, 10, 10, 20,190,30,12,50,52,66]rn ,rn rn "name":"实际",rn "type":"line",rn "data":[15, 50, 40, 10, 10, 20,190,30,12,40,52,66]rn rn ]rn ;rn //option.series.data=$.makeArray(result);rn rn // 为echarts对象加载数据 rn myChart.setOption(option); rn myChart.hideLoading(); rn rn ); [/code]rnrn其中以下代码希望通过AJAX获取到。使用JS和ASP该如何做呢 rnseries : [rn rn "name":"计划",rn "type":"bar",rn "data":[100, 100, 100, 10, 10, 20,190,30,12,50,52,66]rn ,rn rn "name":"实际",rn "type":"line",rn "data":[15, 50, 40, 10, 10, 20,190,30,12,40,52,66]rn rn ]
Echarts实时获取后台数据之二:获取后台数据
前台去获取后台数据,如果在jsp文件中,可以使用el表达式遍历,如果在js文件中,又不想使用json,那么传过去的就是字符串了,需要自己处理,自己两种都尝试了。建议还是使用json格式。 字符串形式 在js中获取后台数据有很多中方式,这里只提供两种方式,一是将js代码和html放在同一文件中,二是将js代码放在单独的文件中。 如果将js文件放在html代码中,只需要这样: var data = '...
angular2.0项目动态获取后台json数据,填充Echarts数据
刚刚接触Echart插件,由于我要获取的XY轴数据都不是固定的,所以获取指定的数据比较棘手,花了我几个小时解决这个问题。 下面是我要处理的json数据: 上面的数据中不是 一个简单的Json,由于我的数据是从树节点上一层一层拿数据,所以Map中还套有Map,接下来我来说明怎样在angular的ts中拿数据,直接看图 根据图中的内容说明下,定义一个全局变量,放返回的数据。再将所有数据遍...
echarts图表动态获取后台数据详解(一)
众所周知,ecahrts官网只给出了一个demo,所有的数据都是静态的。那么,要想从后台数据库动态的将数据返回到前台,展示到各个图表上,我这里说一下自己的体会,这篇文章是建立静态数据的,相当于的动态获取后台数据的前站,此处是动态获取后台 数据的链接(后面添加)。 1.首先,建一个页面,html也好,jsp也好,或者直接在你现成的页面上都可以,只要给这个图表建立一个容器(粗俗点就是建个div)存
echarts图表动态获取后台数据详解(三)--ajax跨域请求
前面两篇文章,分别介绍了静态数据的echarts展示和从后台数据库获取数据展示在图表上,但是这都是在同一个项目下。要是遇到这样一种情况:要求新建一个项目(或者网站、网页),与后台数据库的那个项目不在一个项目上。但是,所要展示的数据,却要从后台数据库中索取。此时,ajax请求就要跨域了。简单的说:有A、B两个不同的项目,A要展示B数据库中的数据,以前直接使用的ajax请求就不行了,网上百度了很多,我
echarts图表动态获取后台数据详解(二)
前篇文章介绍了如何在现有的页面中,建立容器存放echarts图表,如何引入echarts.js文件,和配置图表库的路径。并将静态数据在页面上呈现出来。相当于是为动态获取后台数据做了铺垫。那么这篇文章,就实际的介绍一下,怎么从后台数据库获取数据,并展示在echarts图表上。 1.在前一篇文章介绍中的xxx.js文件里,加入ajax请求,dataType为json。 2.然后再ajax的su
ECharts获取后台json数据
ECharts给的实例中,数据都是固定的,如果想要动态绑定数据,就需要从后台查询,然后返回数据给echarts来生成图表。本文以柱状图为例,介绍了前台如何获取后台返回的数据,来显示图表的流程。本文分为前台和后台两部分叙述: 前台: 1. 为图标的显示声明一个具有宽高的DOM元素 2. 引入echarts主文件,同时引入jquery包,用于发送ajax请求到后台 3. 为模块加载器配
echarts 获取后台数据 并展示
[img=https://img-bbs.csdn.net/upload/201507/24/1437714197_826799.png][/img]rnrnrnrn如何让这些数据变为从后台获取展示呢!
echarts怎么获取php后台数据
[size=18px]先看一个最简单的柱状图[/size]rnrn rn rn rn rnrn这个柱状图的数据现在都是死的,我要从php后台获取活的数据,该怎么写呢rn[color=#FF0000]"data":[25, 10, 60, 18, 22, 26][/color](这里是填充的数据)
Echarts 后台传入数据
jsp页面: [html] view plain copy body>              div id="main" style="width: 600px;height:400px;">div>       script type="text/javascript">           // 基于准备好的dom,初始化echa
echarts结合ajax动态获取数据库数据
最近做一个温度监控的项目,本文介绍一下echarts结合ajax动态获取数据库数据的方式,亲测可用,如有错误请提出宝贵意见首先将ArrayList获取数据集转为JSONArray对象,此部分写在GetTemperatureServlet的doPost里ArrayList<Environment> array; try { //getMessage()方法里包含从数据库获取数据存入ArrayL
Echarts实时获取后台数据之一:Echarts新手入门
最近接触了Echarts,具体就不多加介绍了,可以到官网查看,不过不知道为什么有时候进不去https://echarts.baidu.com/这个网址,但换个WIFI却可以,这个不是很理解。 Echarts入门最基本的就是在自己的电脑上跑起来,首先在官网上下载,我是直接下载的完整版,下载下来的文件是echart.min.js,这是一个js文件,直接引入到自己的代码中即可。然后到它的官方示例中选一个...
echarts 动态获取柱状图实例
echarts 简介 一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 特征 丰富的可视化类型,多种数据格式无需转换直接使用,千万数据的前端展现,移动端优化,绚丽的...
ECharts 柱状图动态获取json数据
ECharts 柱状图利用ajax动态获取json数据 一.html部分 二.js部分     function loadOneColumn() {     var myChart = echarts.init(document.getElementById('traceProvinceOrder'));     // 显示标题,图例和空的坐标轴     m
为什么Echarts无法显示后台数据
大神们帮我看看怎么回事rn前台echarts代码rn[code=javascript]rnxAxis : [ rn type : 'category',rn boundaryGap : false,rn data :(function()rn var arr=[];rn $.ajax(rn url:"fixAction.action",rn dataTyep:"text",rn async:false,rn success:function(data)rn var rows=eval(data); rn //调用函数获取值,转换成数组模式 rn for(var i=0;i
动态菜单 数据从后台获取 #if书写
后台添加数据 前台自动出现菜单 若要实现3级菜单 把中间部分再添加一次即可
flex+spring+hibernate框架:DataGrid后台数据动态获取
  java后台服务: SecurityAssetsService.java import java.util.List; import com.ponshine.SMP.dao.SecurityAssetsDAO; import com.ponshine.SMP.model.SecurityAssets; public class SecurityAssetsSe...
echarts动态表现数据方法
Echarts动态从后台获取数据进行图表展示 html部分代码: head> meta charset="utf-8"> title>EChartstitle> head> body> div id="main"style="width: 800px; height: 300px">div> script type="text/javascript"sr
echarts 柱状图,折线图互转实例(数据动态请求后台)
function initDayChart(){ var myChart = echarts.init(document.getElementById('appLoginLogDayChart')); myChart.setOption({ title : { text : '每日活跃用户总数分析', left : 'center', top : 20, text...
Echarts实时获取后台数据之三:Ajax实时获取数据
使用Ajax之后,效果就是图会根据后台数据实时变化,不会有加载动画。 首先,本人没用使用任何前端框架,用的是原始的Ajax,不需要导入任何文件。 代码如下: function userAjax() { var dom = document.getElementById(&quot;userContainer&quot;); var myChart = echarts.init(dom); var app = {...
echarts 怎么获取网上的后台数据自己用
rn初学者,在学习echartsrn在线编辑器可以运行出来,可是下载之后再运行的话就不可以了,rn请问应该怎么做才可以本地运行呢??rnrn地址:[color=#FF0000]http://echarts.baidu.com/examples/editor.html?c=confidence-band[/color]rnrn[img=https://img-bbs.csdn.net/upload/201803/12/1520844133_655612.png][/img]
vue之根据axios获取后台数据用echarts画饼图
&lt; template&gt; &lt; div id=“details” style=“width: 500px;height: 289px; box-sizing:border-box; line-height: 289px;”&gt;&lt; /div&gt; &lt; /template&gt; &lt; script&gt; import axios from ‘axios’ exp...
用echarts统计在线人数包括获取后台真正的数据
       echarts官网上面的模板讲的非常详细,但都只是给定的数据出来的效果,而在实际的开发中当然需要获取后台真正的数据,这是一个统计一天中每个小时的在线人数的折线统计图:(之前写的项目,图来自测试阶段不是很完美,日期应该用datePicker插件,横轴是00:00-24:00数据不全,但代码是完美滴~)下面上代码:jsp页面:&amp;lt;%-- Created by IntelliJ I...
ajax获取后台数据在echarts上显示的是undefined
小白一个,这几天用echarts做图,ajax从后台获取到数据后在图上显示的是undefined,为什么啊!!!!!!
echarts 获取数据库数据展示?
怎么取其中几列数据然后变成图表啊?rn
Echarts后台获取数据绑定详细样例
相信大家百度了很多Echarts如何从后台获取数据进行绑定的demo都没有满意的结果。经过自己的理解,这份文档详细的解释了Echarts怎么从后台获取数据进行绑定。从后台返回json格式字符串,然后转换自己想要的数据,希望这份文档不会让大家失望。
动态在listView的item显示数据,数据都是从后台获取的
我有一个ListView,数据都是从后台获取过来显示在item 上的。现在做一个弹窗的activity,是多选单选的这样的,选择完之后数据会显示在listview的item上。进行动态显示。用的BaseAdapter写的但是数据一直回调不过来。没办法更新一更新就报错。rn 我用的逻辑是这样的:首先ListView 需要进行网络请求显示数据,把数据放在dongtai里进行显示。然后点击单选或多选时候跳到窗口类的activity中。通过Intent回调数据,数据回调到原来的activity中显示数据。问题就出在这,回调回来的数据怎么弄都不显示在listview中,。求指教、
echarts geocoord如何Ajax动态获取数据库数据问题
![后台代码](https://img-ask.csdn.net/upload/201508/24/1440394399_706259.png)n![js代码](https://img-ask.csdn.net/upload/201508/24/1440394444_918472.png)n![option](https://img-ask.csdn.net/upload/201508/24/1440394511_676779.png)n![alert](https://img-ask.csdn.net/upload/201508/24/1440394492_349985.png)n![错误信息](https://img-ask.csdn.net/upload/201508/24/1440394544_250260.png)n求高手解答!谢谢
在后台动态获取html节点
页面代码:rn rn rn 1rn 2rn 3rn 4rn 5rn 6rn 7rn rn rn在后台怎么获取动态节点。我在做自定义控件,我写一个事件,但是我不知道这个事件怎么触发,因为节点不是一个固定的。rn即:rn private void UseJavascript_Click(object sender,EventArgs e) rn rn EventArgs e1 = new EventArgs();rn if (this.Click != null)rn this.Click(哪个一个空间,e1);rn rn请高手指教。
ajax 获取后台数据
我在后台返回一个实体对象,在前台用ajax接收,对象可以获取到,但是怎么样可以将对象中的属性或取出来呢.
Object获取后台数据
一个表单验证中,在JS上定义了个变量rn[code=JScript] [/code]rn这样虽然可以将后台php传递过来的数组填充到Object中,但是如果数据中有回车的话就会提示错误"未结束的字符串常量"rn看了下网页显示的源代码rn[code=JScript]rn rn[/code]rnJS中字符串不允许换行...但这个desc的数据是从HTML中的textarea文本框中获取到的数据,保存到后台数据就是这样了,而且要在HTML中显示的也应该是这样rn表单提交的时候会调用onsubmit()方法rn方法中使用rn[code=JScript] [/code]rn试过在后台传递过来之前就将desc数据中的回车替换为 ,但这样在textarea中显示的就变成"备注1 备注2 "这样..rn要怎样才能显示成rn"备注1rn备注2"rn这样的呢??如果显示成这样,但oldValues里存放的还是"备注1 备注2 ",那提交前也得先把textarea里的数据替换回来吧...该如何替换呢??
前端获取后台数据
我要做的一种效果跟51Job上的选择地区那个弹出层效果是一样的,只是里面的数据是得从数据库中读取出来的。rn就是说,我有张地区表,里面存储的是一些片区。我要将这些数据显示到一个弹出层里面。怎么做?rn怎么做才做到最低消耗资源?
获取后台数据
小程序接口封装,以实现后台数据便于我们前端人员的遍历
获取列表数据到后台
最近的项目有用到将列表数据传输到后台,去研究了一下。如有不妥,请各路大神斧正。
获取后台数据明细
import android.app.ProgressDialog;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.text.TextUtils;import android.util.Log;import android.view.View;import android...
Ext.Ajax.request获取后台的数据
尝试用Ext.Ajax异步操作来改变页面回显的值,试了好几次都没成功,终于啊,试出来试出来了,功夫不负有心人。(开心) 具体如下:     js代码: Ext.onReady(function(){ var djzcqh = Ext.getCmp('djzcqh').getValue(); Ext.Ajax.request({ url: '/lr/areaActi
jsp页面获取后台数据
比如,后台数据是封装在类里的, public class Bid{ private float cash; public int getCashInt(){ return Math.round(cash); } public void setCash(float cash){ this.cash = cash; } } 类里面没有这个这个字段却也可以获取到, 在工...
DWR 获取后台数据
在使用dwr从后台获取一个对象时,如果在dwr配置文件中没有配置该对象,则返回值无论后台返回的是什么,界面获取到的值都为空
前台 获取后台数据
.cs后台 我有一个泛型类集合 List, user是一个类,它里面有好多属性。rnrn我想在前台用ajax获取,用js把数据添加到前台页面的一个table中,形成一个列表。rnrn怎么js获取 后台的数据集合? js怎么操作获取到的这个集合? rn求 各位帮忙rn
JS获取后台数据
json类型的: var temp=${jsonTest};  其中 jsonTest 就是后台传过来的参数名。
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法