JavaScript和json對資料格式的轉換

ruiguang21發表於2017-12-26
JavaScriptJSON
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- 這裡是載入剛下好的echarts.min.js，注意路徑 -->
    <script src="js/echarts.js"></script>
    <script src="js/jquery-2.1.1.js" type="text/javascript"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    



/*var test='["colkey", "col", "colsinfo","NameList" ]' 
var obj2=eval("("+test+")"); 

console.log(obj2);*/

var jsonStr='[ 1,2, 3 ,"whuang" ]'; 
function string2Array(stringObj) {  
    stringObj = stringObj.replace(/\[([\w, ]*)\]/, "$1");  
    if (stringObj.indexOf("[") == 0) {// if has chinese  
        stringObj = stringObj.substring(1, stringObj.length - 1);  
    }  
    var arr = stringObj.split(",");  
    var newArray = [];//new Array();  
    for ( var i = 0; i < arr.length; i++) {  
        var arrOne = arr[i];  
        newArray.push(arrOne);  
    }  
    // console.log(newArray);  
    return newArray;  
}; 
console.log(string2Array(jsonStr)); 

     
      
      
      $.ajax({
          type: "get",
            dataType:'json',
            url: "http://localhost:9999/html/chda",
           success: function(data){
              var n = eval(data);
                console.log(n.row);
            var strkw=[];
            
            for(var i=0;i<n.row.length;i++)
            {
               var strname={value:n.row[i].num,name:n.row[i].name};
               //strkw.push(n.row[i].keyword);
               strkw.push(strname);
            }
            
            //strkw.map(e);
            console.log(strkw);
         
            var strvalue=[];
            for(var j=0;j<n.row.length;j++)
            {
               strvalue.push(n.row[j].keyword);
            }
            console.log(strvalue);
                // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));

        //指定圖示的配置和資料
 var  option = {
    title: {
        text: '漏斗圖',
        subtext: '純屬虛構'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        //data: ['展現','點選','訪問','諮詢','訂單']
        data:strvalue
    },
    calculable: true,
    series: [
        {
            name:'漏斗圖',
            type:'funnel',
            left: '10%',
            top: 60,
            //x2: 80,
            bottom: 60,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                normal: {
                    show: true,
                    position: 'inside'
                },
                emphasis: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            },
            data:strkw
         /*   data: [
                {value: 60, name: '訪問'},
                {value: 40, name: '諮詢'},
                {value: 20, name: '訂單'},
                {value: 80, name: '點選'},
                {value: 100, name: '展現'}
            ]*/
        }
    ]
};
          // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option); 
            
           }
         
         
         })
      
      

    </script>
</body>
</html>

相關文章