echarts系列之动态加载数据

1.echarts学习前言

最近接触到echarts，发现数据可视化真的是魅力无穷啊，各种变幻的曲线交错，以及‘曼妙’的动画效果真是让人如痴如醉！

下面就来一起欣赏她的美...

“ ECharts是中国的，也是世界的。”

　　　　　　—— 浙江大学教授 · 陈为

“ ECharts，发现数据可视化之美！”

　　　　 ——中国传媒大学教授 · 沈浩

大数据时代
              重新定义数据图表的时候到了......

2.echarts的demo代码

需求：ajax请求到json格式数据，动态添加到曲线和表格中

jquery：1.8.3版本

bootstrap：2.3.2版本

用代码说话是我们的游戏规则（吼吼）：

echarts/qiyue.html 中 qiyue.html文件:

<html>
    <head>
        <title>*echarts*</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/echarts.js"></script>
        <style type="text/css">
            *{
                font-family: "微软雅黑";
            }
            .count-title{
                padding-bottom: 15px;
                margin-bottom: 20px;
                border-bottom: 1px solid #ccc;
            }
            #main{
                width: 100%;
                height: 500px;
                margin: 0 auto;
            }
            .total-incre{
                padding-left: 147px;
                margin-top: 5px;
                position: absolute;
            
            }
            .total-incre strong{
                color: #e5903a;
            }
            .chooseTime{
                position: absolute;
                right: 100px;
                top:18px;
            }
            .table td,.table th{
                text-align: center;
            }
            .agencyNew{
                width: 90%;
            }
        </style>
        
    </head>
    <body>
        <div class="container agencyNew">
            <div class="row">
                <!-- Split button -->

                <h1 class="count-title">XX销售情况</h1>
                
                <p class="total-incre">
                    合计：<strong class="total">888</strong> | 新增 ：<strong class="increase">88</strong>
                </p>
                <!--下拉框-->                
                <div class="dropdown chooseTime">
                  <a class="btn btn-default dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" >
                        最近一个月
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a href="#">最近一个月</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">2017年2月</a></li>
                        <li><a href="#">2017年1月</a></li>
                  </ul>
                </div>
                <!--echarts曲线容器-->
                <div id="main">
                    
                </div>
                <!--表格-->
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <!--动态获取表头-->
                        
                    </thead>
                    <tbody>
                        <!--动态获取表格-->
                    </tbody>
                </table>
            </div>
        </div>
    </body>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script src="js/qiyue.js"></script>
    
</html>

echarts/js/qiyue.js 中 qiyue.js文件:

var myChart,option;
$(function(){    
        require.config({
            paths: {
                'echarts': 'http://echarts.baidu.com/build/dist'
            }
        });
        
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                myChart = ec.init(document.getElementById('main'));
                option  = {
                   title: {
                        text: 'XX销售情况',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    toolbox: {
                         show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    
                    xAxis: [
                         {
                                type : 'category',
                                boundaryGap : false,
                                data : [ ]
                                ,
                                axisLabel: {
                                    interval:0,//横轴信息全部显示
                                    rotate: 30,//60度角倾斜显示
                                    formatter:function(val){
//                                        return val.split("").join("\n"); //横轴信息文字竖直显示
                                        return val;
                                    },
                                    textStyle: {
                                        color: '#000',
                                        align: 'center',
                                        fontWeight: 'bold'
                                    }
                                
                                }
                           }
                    ],
                    yAxis: [],
                    series: []
                };
//                myChart = require('echarts').init(document.getElementById('main'));
                myChart.showLoading({
//                    text : '数据获取中',
                    effect: 'whirling'
                });
                getData();
                

                
           });
});
        
//请求json
var fields,
     itemsMap,
     seriesItem,
    yAxis_arr = [],
    thead     = '',
     tbody     = '',
    tbody_tr  = '';
        function getData(){
            $.ajax({
                url      : 'data0.json',
                dataType : 'json', 
                async    : false,
                type     : 'get',
                success  : function(json){
//                    console.log(json.data);
                    console.log(option);
                    fields   = json.data.fields;
                    itemsMap = json.data.itemsMap;
                    
                    createEcharts();//动态创建曲线图
                    createTab();//动态创建表格
                    myChart.hideLoading();
                    myChart.setOption(option);
                    
                },
               
                error : function(XMLHttpRequest, textStatus, errorThrown){
                     
                    if(textStatus == 'parsererror'){
                        
                        alert('数据为空或者SQL语句错误！');
                    }
                    
                    console.log(errorThrown);
                }
            });
        }

/*
 * 动态创建曲线图
 */
function createEcharts(){
                    
    //    series                
    for(var i=1; i<fields.length; i++){
        if(i==1){
            itemStyle = {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
            };
        }else{
            itemStyle = {
                    normal: {
                        color: '#70bf41'
                       
                    }
            };
        }
        option.legend.data.push(fields[i]);  //    legend
        seriesItem              = {};
        seriesItem.name      = fields[i];
        seriesItem.type      = 'line';
        seriesItem.smooth    = false;
        seriesItem.yAxisIndex= i-1;
        seriesItem.itemStyle = itemStyle;

        seriesItem.data      = [];
        
        for(var key in itemsMap){
            seriesItem.data.push(itemsMap[key][i]);
        }

//        填充默认显示曲线的数据
        option.series.push(seriesItem);
//        option.series[0].type      = 'line';
//        option.series[1].type      = 'bar';
        // yAxis    
        var yAxis_obj  = {};
        yAxis_obj.type = 'value';
        yAxis_obj.name = fields[i];
        yAxis_obj.show = true;
        yAxis_arr.push(yAxis_obj);
        
    }
        option.yAxis = yAxis_arr;
        console.log(yAxis_arr);
        
}
/*
 * 动态创建表格
 */
function createTab(){
    //动态创建表头
    for(var i=0; i<fields.length; i++){
        
        thead += '<th>'+fields[i]+'</th>';
        $('.table thead').html('<tr>'+thead+'</tr>');

    }
    
    for(var j in itemsMap){
        var tbody_td = '';
        option.xAxis[0].data.push(itemsMap[j][0]); // XAxis
        for(var k=0; k<itemsMap[j].length; k++){
            
              tbody_td += '<td>'+itemsMap[j][k]+'</td>';
            
        }
//        console.log(tbody_td);
        tbody_tr += '<tr>'+tbody_td+'</tr>';
    }    
    $('.table tbody').html(tbody_tr);
        
}

echarts/data0.json 中data0.json文件:

{
    "data": {
        "itemsMap": {
            "1": ["2017-03-1", "3", "8"],
            "2": ["2017-03-2", "18", "20"],
            "3": ["2017-03-3", "43", "54"],
            "4": ["2017-03-4", "50", "74"],
            "5": ["2017-03-5", "39", "41"],
            "6": ["2017-03-6", "20", "52"],
            "7": ["2017-03-7", "21", "25"],
            "8": ["2017-03-8", "16", "26"],
            "9": ["2017-03-9", "10", "11"],
            "10": ["2017-03-10", "8", "10"]
            
        },                        
        "fields": ["日期", "预购", "成交"],
        "status": 1
    }
}

3.运行结果展示

由于鹅的博客还没有直接运行功能，为了浏览方便我就把效果图贴上吧(= =)

tips：所有数据纯属虚构哦。

源代码在github上提供https://github.com/yingliyu/commonDemo.git

posted @ 2017-03-20 15:38  小鱼海棠  阅读(8210)  评论(0)  编辑  收藏  举报