JavaScript和json对数据格式的转换

最新推荐文章于 2024-06-13 23:00:03 发布

ruiguang21

最新推荐文章于 2024-06-13 23:00:03 发布

阅读量324

点赞数

分类专栏： javascript js jquery json

本文链接：https://blog.csdn.net/ruiguang21/article/details/78899240

版权

js 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

23 篇文章 0 订阅

订阅专栏

javascript

18 篇文章 0 订阅

订阅专栏

<!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>

ruiguang21

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript和json对数据格式的转换

html>html>head> meta charset="utf-8"> title>EChartstitle> script src="js/echarts.js">script> script src="js/jquery-2.1.1.js" type="text/javascript">script>head>body>
复制链接

扫一扫

专栏目录