EChart - 根据Json返回值生成Bar图

根据Json结果集生成Bar图, 第一列固定为描述, 后面的列为值字段.

 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        /*
        var json_data = [{"title":"衬衫","value":5,"value1":15},{"title":"羊毛衫","value":15,"value1":15},{"title":"雪纺衫","value":25,"value1":25}
        ,{"title":"裤子","value":45,"value1":15},{"title":"高跟鞋","value":15,"value1":25},{"title":"袜子","value":15,"value1":25}];
        */
       
        var json_data = [{"title":"衬衫","value":5,"value1":15,"value2":15},{"title":"羊毛衫","value":15,"value1":15,"value2":15}
        ,{"title":"雪纺衫","value":25,"value1":25,"value2":15},{"title":"裤子","value":45,"value1":15,"value2":15}
        ,{"title":"高跟鞋","value":15,"value1":25,"value2":15},{"title":"袜子","value":15,"value1":25,"value2":15}];
        
        
        var col_title = ""; //标题的列名,固定为第一列
        var col_data = [] ; // 从第二列开始, 为值字段 , ["value","value1"];
        var col_data_name =[]; // 从第二列开始, 为值字段 , ["销量","值二"];
        
        var chart_title =new Array(); //标题娄组
        var chart_data = new Array(); //值数组
        
        //列标题,列字段名取值
        var col = 0;
        for(var key in json_data[0]){
            if(col==0)
                col_title = key;
            else
            {
                col_data.push(key);
                col_data_name.push(key);
            }
            col++;
        }
        
        //给值字段赋值
        for(var i =0;i<col_data.length;i++){
            chart_data[i] = {
                    "name": col_data_name[i],
                    "type":"bar",
                    "data": [] //[5, 20, 40, 10, 10, 20]
               };
        }
        
        //填入标题及各值的数据
        for(var i=0;i<json_data.length;i++){
            chart_title.push(json_data[i]["title"]);
            for(var j =0;j<col_data.length;j++){
                var col_name = col_data[j];
                chart_data[j].data.push(json_data[i][col_name]);
                //chart_data[1].data.push(json_data[i]["value1"]);
            };
        };
        
        
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data: col_data_name
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : chart_title //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : chart_data
                };
                
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

 

posted on 2015-05-21 17:36  jerron  阅读(4168)  评论(0)  编辑  收藏  举报

导航