我这里现在有一个纯用前端js写的中国地图页面,我不知道这个该如何与后台交互,跪求各路大神求教

我这里现在有一个纯用前端js写的中国地图页面,我不知道这个该如何与后台交互,跪求各路大神求教

问题描述:

图片说明

图片说明

<script>
        var myChart = echarts.init(document.getElementById('main') );
        var options = {
            backgroundColor: '#323c48',
            title: {
                text: '开户统计',
                subtext: 'china',
                left: 'center',
                textStyle:{
                    color: '#fff',
                    fontSize:16,
                    fontWeight:'normal',
                    fontFamily:"Microsoft YaHei"
                },
                subtextStyle:{
                    color: '#ccc',
                    fontSize:13,
                    fontWeight:'normal',
                    fontFamily:"Microsoft YaHei"
                }
            },
            //提示框的触发方式
            tooltip: {
                trigger: 'item',
                formatter: function(params) {  
                    var res = params.name+'<br/>';  
                    var myseries = options.series[0].data;
                    if(Tools.isDataValid(myseries)){
                        for(var i = 0; i < myseries.length; i++){
                        if(myseries[i].name==params.name){
                                res+="已开通总数:"+myseries[i].value+"<br/>登记录入总数:"+myseries[i].zlr+"<br/>当日已开通:"+myseries[i].drkt+"</br>当日登记录入:"+myseries[i].drlr
                            }
                        }
                        return res;
                    }
                }  
            },
            toolbox:{
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                iconStyle:{
                    normal:{
                        color:'#fff'
                    }
                },
                feature:{
                    restore:{
                        title:"还原"
                    },
                    saveAsImage:{
                        title:"保存为图片"
                    },
                    dataView:{
                        title:"数据视图",
                        readOnly: true,
                        optionToContent: function(opt) {
                            var series = opt.series[0].data;
                            var table = '<table class="datatableview" style="width:100%;text-align:center"><tbody><tr>'
                                         + '<th rowspan="2">省份</th>'
                                         + '<th colspan="2">统计日期当前</th>'
                                         + '<th colspan="2">截止到统计日期</th>'
                                         + '</tr>'
                                         + '<tr>'
                                         + '<th>已开通</th>'
                                         + '<th>登记录入</th>'
                                         + '<th>已开通</th>'
                                         + '<th>登记录入</th>'
                                         + '</tr>'
                                for (var i = 0, l = series.length; i < l; i++) {
                                    if(Tools.isDataValid(series[i].value)){
                                        table += '<tr>'
                                              + '<td>' + series[i].name + '</td>'
                                              + '<td>' + series[i].drkt + '</td>'
                                              + '<td>' + series[i].drlr + '</td>'
                                              + '<td>' + series[i].value + '</td>'
                                              + '<td>' + series[i].zlr + '</td>'
                                              + '</tr>';
                                    }
                                }
                            table += '</tbody></table>';
                            return table; 
                        }
                    }
                }
            },
            //分段视觉映射组件
            visualMap: {
                type:'piecewise',
                show: true,
                left:'left',
                top:'1%',
                textStyle:{
                    color:'#fff'
                },
                seriesIndex: 0,
                pieces: []
            },

            //系列列表      
            series: [
            ],
            animationDuration:1000,
            animationEasing:'cubicOut',
            animationDurationUpdate:1000
        };

    </script>

这其中还加载了几个js和好多json文件,实在是不知道怎样和后台交互

你是指地图数据从后台获取吗?还是省市区下钻呢?不管什么数据,你后台组织好数据ajax 请求获取json就可以了啊,然后echarts里面的series就可以用获取的json进行数据展示

后台处理数据,调用js方法,将数据一般是json格式的参数传进去,echarts会把得到的数据展示在图中。