ajax的值怎样传递到echarts中

在ajax中两个数组,分别是arr1,arr2;怎样将数组分别传递到echarts中的nodes:[]和links:[]中?求详细源码!

部分源码

 <div id="main" style="height:500px;"></div>
<script src="./js/echarts.js" ></script>
<script src="./js/jquery-1.8.3.min.js" ></script>
<script>
var arr1 = [];
var arr2 = [];
$.ajax({
    type:"POST",
    async:false,
    url:"mapdata.php",
    dataType:"json",
    success: function(result){
        var str = result;
        for (var i = 0; i < str.length; i++) {
            arr1.push("{"+"category:"+str[i].category,"name:'"+str[i].name+"'","value:"+str[i].value+"}");
            }
        //document.write(arr1);
        for (var i = 0; i < str.length; i++) {
            arr2.push("{"+"source:'"+str[i].source+"'","target:'"+str[i].target+"'","weight:"+str[i].weight,"name:'"+str[i].name_nexus+"'"+"}");
            }
        //document.write(arr2);
        },
    error:function(errorMsg){
        alert("请求数据失败!");
        },
    });

require.config({
    paths:{
        echarts:'./js'
        }
    });
require(
[
'echarts',
'echarts/chart/force'
],
function(ec){
    var myChart = ec.init(document.getElementById("main"));
    var option = {
        title : {
            text: '人物关系:葛优',
            x:'right',
            y:'bottom'
        },
        tooltip : {
            trigger: 'item',
            formatter: '{a} : {b}'
        },
        legend: {
            x: 'left',
            data:['家人','朋友']
        },
        series : [
            {
                type:'force',
                name : "人物关系",
                ribbonType: false,
                categories : [
                    {
                        name: '人物'
                    },
                    {
                        name: '家人'
                    },
                    {
                        name:'朋友'
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#333'
                            }
                        },
                        nodeStyle : {
                            brushType : 'both',
                            borderColor : 'rgba(255,215,0,0.4)',
                            borderWidth : 1
                        },
                        linkStyle: {
                            type: 'curve'
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                        },
                        nodeStyle : {
                            //r: 30
                        },
                        linkStyle : {}
                    }
                },
                useWorker: false,
                minRadius : 15,
                maxRadius : 25,
                gravity: 1.1,
                scaling: 1.1,
                roam: 'move',
                nodes:[
                    arr1
                ],
                links : [

                ]
            }
        ]
    };
    myChart.setOption(option);
    }
);
</script>

arr1值为
图片说明
arr2值为图片说明

1
扫码支付0.1元 ×
其他相关推荐
不使用ajax 怎么在wpf 中实现echarts传递多个参数
之前的做法是传参是通过路径,然后在js中通过解析路径中的参数 实现传参成功!后来发现这个方法太复杂了!   其实传参可以不用通过路径,直接将页面的参数保存在一个对象中,然后将对象传递给后台ECharts处理数据的方法,在html的js中调用无参的后台方法就可以实现传递对象了...
echarts如何通过ajax异步传输数据以及容易遇到的问题介绍
$.ajax({ url : "<%=basePath%>BkBarSvl", type : "post", dataType :"json", async : true, //这里取回的数据就是你自己定义的数据。 success : function(pies){ $.each(pies, function(i,pie){ X.push(pie.属性1); P1.push(pie.属性2);
使用Echarts绘制折线图实例,ajax传值给servlet后台
使用Echarts绘制折线图实例,ajax传值给servlet后台,废话不多说,上代码project-duanmianlishi.jsp页面:&amp;lt;%@page import=&quot;java.sql.DriverManager&quot;%&amp;gt;&amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;U...
利用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. 基于准备好的
vue+echarts使用ajax请求的小坑,async同步异步
作为一名后端人员,在缺少前端的情况下,努力学习前端知识。 环境:vue.js 1.5.1,echarts,前后端分离。 用ajax请求数据后填充到echarts时,由于ajax默认同步,未等待到数据返回就把变量空数据填充到页面,即无刷新效果。 把ajax的async参数值设为false,即为同步。 等待数据返回后在填充echarts。 ...
ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
http://www.stepday.com/topic/?906     [摘要]: 最近不要ECharts图表使用者的初学者均在询问如何通过ajax异步获取数据,动态赋值给echarts图表对象,因为这样一来,我们就可以实现图表数据动态呈现,后期加入时间戳即可实时刷新图表数据。正是基于这样一个环节比较重要,所以我也利用时间专门写了几篇关于如何通过ajax异步获取图表数据并加载的
django传递数据库数据给echarts
方式一: 将数据转化为list来操作(因为别的也不会) def jsdaoru(request): wheelsList = Wheel.objects.all() name = list(Wheel.objects.values_list('name', flat=True)) data = list(Wheel.objects.values_list('tracki...
解决Ajax获取到数据放入echarts里不显示最有效的解决方法
解决Ajax获取到数据放入echarts里不显示最有效的解决方法
解决ajax获取到数据放到echarts无法显示的问题
   后台部分代码: returnMap.put(&quot;powerLevelCategories&quot;, powerLevelCategories); returnMap.put(&quot;powerLevelSeries&quot;, powerLevelSeries); try { response.setContentType(&quot;text/text;char...
使用ajax加载echarts图表
使用ajax加载echarts图表
ECharts显示后台传送的JSON数据
废话不多说,直接上代码: 一、定义一个后台数据保存类: public class BarDTO{ private String name; private String type; private List data; public String getName() { return name; } public void setName(String name) { t
echarts $.ajax返回数据 循环添加data[]
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); $.ajax({ url:&quot;/regionAccount/selectDownCount&quot;, ...
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)
Ajax解决接受数字成为科学计数法的问题
页面使用avalon的ajax方法向后台请求数据,之后用百度echarts画图显示出来,后台数据返回正常,用postman请求,返回的也是数字,但是页面debug的过程中,发现在ajax Success回调函数中,解析出来的数字很多都成了科学记数法,后来采用以下方法解决, 先将temp强行转换为数字,在转成String在页面显示  value3= temp3==null||temp3=
echarts 事件传值
一、通过元素的自定义属性传值 1、设置 首先在绘制图表的时候,通过 设置自定义 属性设置需要传递的值 // 设置自定义属性 $('#pieChartBox').attr(&quot;data-hostType&quot;,'1'); // pieChart2(&quot;pieChartBox&quot;,desc,title,data,color); 2...
ajax传递多个参数的两种方法和label标签中获取值
第一种方式"fid="+obj+"&phone=${phone}&fnum="+num, 第二种方式{"fid":obj,"phone":${phone},"fnum":num} el表达式可以在js中使用 el中也可进行算术运算 逻辑运算 获取value的值 dom对象用value jquery对象 val() 起始和结束标签之间 dom对
Ajax实现Echarts动态数据加载
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ajax传一个值和传多个值
在程序开发中前台往后传输数据是必不可少的,下面演示ajax传一个值和传多个值的方式 可以使用参数传一个值: function test(userName){ $.ajax({     type: &quot;POST&quot;,     url:&quot;&quot;,     data:&quot;userName=&quot;+userName,     success: function(msg){      ...     }...
echarts使用ajax接收数据并展示
首先找一个echarts实例 然后自己搭建环境运行 var lineChart = echarts.init(document.getElementById('event_pandect'),'macarons');(添加) option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', ...
ajax动态赋值Echarts地图
最终地图实现的效果图如下 实现步骤 一、jsp页面 $(function(){ $.ajax({ type : "get", url : rootPath + "/userLocation/getLocationPictureData.action", //dataType:"json", cache : false, async : fa
利用Ajax实现数据的同步传输,从mysql中提取数据,通过echarts可视化
如何将mysql数据库中的方式通过echarts可视化呢,以下面这个简单的例子向大家进行演示: 步骤一:mysql的创表和插入数据,当然这些数据也可以是你通过爬虫抓取的。
echarts图表ajax获取数据填充
js部分 /* ---------------- 折线图 --------------- */ var line = echarts.init(document.getElementById('line'));//折线图 $.ajax({ type: "post", url: 'product.do?method=selectProductNum2',
Ajax表格传值
$.ajax({     url:"../test.action?ajax=11",     type:"post",     dataType:"json",     data:{c1:c1,c2:c2},     success:function(data){         $("#tr名称").childre('td').eq(0).html(data.n);        
ajax与echarts 的交互应用
第一步:引入echarts js文件和jquery。&amp;lt;script src=&quot;js/echarts/echarts-3.2.3.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;js/jquery/jquery-3.1.1.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;第二步:html搭建,设置需要加载图表的div 的id属性(根据需求写css样式)...
jquery 的ajax怎么提交所有表单数据
转自:http://blog.sina.com.cn/s/blog_69398ed9010137f3.html
ECharts通过Ajax动态加载数据到图表
参考官网:http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2 首先要展示的图表像这样: 现在开始前后端代码展示。by the way,使用的开发框架为nutz,重点还是echarts数据。不要本末倒置。 1.从官网下载包,使用其中的dist和echarts.js 将dist文件夹和ech
利用ajax向控制器中传二维数组
使用ajax向控制器中传递字符串或者值的时候,我们就按照平常的传值进行, 但是在传递数组的时候要特别注意,它不支持传递关联数组, 不过要想传递过去还是可以得,就是把它做下处理,json_encode()一下,并且传递过去之后还是原来的数组格式 但是大数组就不要传了,比较耗费资源,直接把需要的参数传过去,到控制器中再进行相关处理
Servlet如何获取ajax中以json格式传入的数据
JavaScript: Java code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $('#but_json_json').click(func
ajax+echarts实现数据可视化
在项目开发中,我们往往会有将数据可视化展现的功能,于是学会echarts的使用就成为了一件刻不容缓的事情。在echarts官网的实例中,可以大概知道echarts有两种方法实现图表,首先是通过ajax和后台实现jsonarray以及jsonobject等类型的传输,具体传输格式需要参考ehcarts中的示例代码,另外一种方法则是生成.json文件,通过在前端用$.get获取文件中的json数据。其...
ajax将前台的Map类型数据传到Servlet并解析的方法。
前台ajax代码如下: for (var key in map) { alert("size of map:" + Object.keys(map).length); alert("map["+key+"]:"+ map[key]); } alert("转化
echarts结合ajax动态获取数据库数据
最近做一个温度监控的项目,本文介绍一下echarts结合ajax动态获取数据库数据的方式,亲测可用,如有错误请提出宝贵意见首先将ArrayList获取数据集转为JSONArray对象,此部分写在GetTemperatureServlet的doPost里ArrayList<Environment> array; try { //getMessage()方法里包含从数据库获取数据存入ArrayL
通过ajax给后台提交数据时,radio性别数据的获取
通过ajax向后台异步发送数据,经常我们会遇到个人信息额提交,一般我们采用FormData来装数据。在装性别值得时候,我们会有两个radio框,获取radio值得方法如下: 一般情况下,一个radio里边有四个属性,type = &quot;radio&quot; name = &quot;names&quot; value = man; checked = &quot;checked&quot; 在写html代...
Ajax使用笔记 - - - 传递input框参数
1.ssm框架 2.jsp页面   3.js代码(特别注意导入jquery包)   4.Controller   5.效果:用户名输入框失焦时间调用ajax,后台模拟判断用户名是否等于Ive,返回弹出suc或者fail 6.补充:Ajax传值String的两种方式 Post请求中的url中直接拼接,Ctrl层写法 post请求data拼接json数据,Ctrl层写法 ...
AJAX部分刷新以echarts饼图为例
var xmlhttp; function startrefresh(){ xmlhttp=new XMLHttpRequest(); xmlhttp.open(POST,"/Sentiment/Sentiment.jsp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")
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向后台Servlet传递text类型参数方便后台request.getParameter("name")获取值
今天写一个练习项目,用ajax的post方法向后台的servlet类传递一个参数,但是用了诸多方法后台始终获取出来的参数是“”值或null。 最初,我错把data当成向后台传递的参数,给data赋值我要传递的参数,后台始终是“”值,后来在万能的csdn博客里几经找寻,终于在http://blog.csdn.net/ailo555的博客中找到了解答,在此谢谢无私的分享! 解决方案就是 :POST
ajax中的变量如何传递给外面
ajax中的变量传递到外面 在ajax中加上参数 async:false, 即可
Echarts使用,使用springmvc完成数据交互
最近要做一个任务,统计一个时间段,不同应用商城本公司APP的下载量趋势图。 大概效果是这样的,你先选择时间,然后点击不同的商城,就会画出该渠道的下载量趋势图:
获取多选框的值 用ajax发送到后台
jsp页面: $("#out").click(function () { var arr=[];//定义一个数组 var arr2=$(":checked");//获取多选框的数组 $.each(arr2,function () { arr.push($(this).val());//把多选框数组的value放入自己定义的里面 }) a
echarts ajax 动态获取数据
keys 和 values 都是动态数据 注意如果数据是{value:335, name:'直接访问'}这种格式 需要使用eval('(' + strtojson + ')') 转一下//加载图表 start $(function(){ $.ajax({ //提交数据的类型 POST GET type:"POST",
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 echarts教程python 怎样学python