raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>折线图区域</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/style.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
    </head>
    <body>
        <div id="main">
            <line-chart :panelName="panelName" :quotaNames="quotaNames" :xData="xData" :yDatas="yDatas" :colors="colors"></line-chart>
        </div>
        
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/event-bus.js"></script>
        <script src="../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            (function(){
                new Vue({
                    el: '#main',
                    data:{
                        panelName: '',
                        quotaNames: [],
                        xData: [],
                        yDatas: [],
                        colors: [],
                        requestParam: {
                            index: 3,
                            level: 4,
                            area: '350200', 
                            startDate: '2017-12-01', 
                            endDate: '2018-03-08',
                            interval: 1
                        }
                    },
                    mounted: function(){
                        var vm = this;
                        EventBus.$on("get-line-chart-data", function(arg){
                            vm.requestParam.interval = arg.dateType;
                            getLineData(vm);
                        });
                        getLineData(vm);
                    }
                });
                
                function getLineData(vm){
                    statisticAPI.interval(vm.requestParam).then(function(res){
                        console.log(res);
                        var xDatas = [],
                            yDatas = [],
                            names = [],
                            colors = ['#12b7f5', '#cd67fd'],
                            data = res.data;
                        for(var p in data){
                            names.push('咨询量');
                            if(p == 'index_21' || p == 'index_20'){
                                var xData = _.map(data[p].data, function(o){
                                    return o.range;
                                });
                                var yData = _.map(data[p].data, function(o){
                                    return o.amount;
                                });
                            }else{
                                var xData = _.map(data[p], function(o){
                                    return o.range;
                                });
                                var yData = _.map(data[p], function(o){
                                    return o.amount;
                                });
                            }
                            
                            xDatas.push(xData);
                            yDatas.push(yData);
                        }
                        vm.panelName = "咨询量新增趋势";
                        vm.quotaNames = names;
                        vm.xData = xDatas[0];
                        vm.yDatas = yDatas;
                        vm.colors = colors;
                        EventBus.$emit("draw-line-chart", {
                            panelName : "咨询量新增趋势",
                            quotaNames : names,
                            xData : xDatas[0],
                            yDatas : yDatas,
                            colors : colors
                        });
                    })
                }
            })()
            
        </script>
    </body>
</html>