程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> javascript-ajax的值怎樣傳遞到echarts中

javascript-ajax的值怎樣傳遞到echarts中

編輯:編程解疑
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值為圖片說明

最佳回答:


不是這麼寫的。
因為ajax是異步,可能還沒返回數據,就開始執行請求後面的代碼了,圖表可能獲取不到數據。
把圖表相關的代碼放到success:function(result){}中。
賦值。直接引用數組名稱就行了。
nodes:arr1,
links:arr2

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved