JavaScript和json对数据格式的转换

小灰灰 2022-06-03 10:10 268阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
          <script src="js/echarts.js"></script>
        <script src="js/jquery-2.1.1.js" type="text/javascript"></script>
    </head>
    <body>
         <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>