Echarts通过Ajax实现动态数据加载

1、引言

Echarts官网的实例数据都是静态的，实际使用中往往会要求从服务期取数据进行动态显示，官网教程里给出的异步加载很粗略，

目前实现data可以动态加载数据，geoCoorMap未实现动态传值。

2、技术操作过程

（1）客户端通过Ajax发送请求

/**
 * Created by Administrator on 2018-03-02.
 */
/**
 * Created by Administrator on 2018-03-02.
 */
var nums = [];
var geoCoord = {};

$(function(){
   $.get('/zone_select/pop/',function(result){
       // var object = result.data
       $.each(result.data,function(index,item){
           nums = result.data
           });
       })
   });

$(function(){
   $.get('/zone_select/poplist/',function(list){
       $.each(list,function(index,item){
           //geoCoor = eval('(' + list + ')');
           geoCoord = "{" + item.name + ":[" + item.geoCoord + "]}"
           //geoCoord = list[0]
           });

       // var geo = {};
       // //for(var index in list){
       // for (var a = 0; a < list1.length; a++) {
       //     geo[a] = list1[a];
       // }
       // return geo;
       })
   });

require([
    'echarts',
    'echarts/chart/scatter',
    'echarts/chart/effectScatter',
    'echarts/component/legend',
    'bmap/bmap',
    'echarts/component/title',
    'echarts/component/tooltip'
], function (echarts) {     ///    【修改参数1】：数据名称、及值的修改，此处用 “Echart2.0”的工具包+Excel 修改格式

    var data = nums;
    var geoCoordMap = {
        '海门':[121.15,31.89],
        '鄂尔多斯':[109.781327,39.608266],
        '招远':[120.38,37.35],
        '舟山':[122.207216,29.985295],
        '齐齐哈尔':[123.97,47.33],
        '盐城':[120.13,33.38],
        '赤峰':[118.87,42.28],
        '青岛':[120.33,36.07],
        '乳山':[121.52,36.89]    
    };

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    var option = {
        /*            title: {
         text: '全国主要城市空气质量',   ///
         subtext: 'data from PM25.in',  ///
         sublink: 'http://www.pm25.in',
         left: 'center'
         },*/
        tooltip : {
            trigger: 'item'
        },
        bmap: {
            center: [95.73,39.0399],
            zoom: 5,
            roam: false,
            mapStyle: {
                'styleJson': [
                    {
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#031628'
                        }
                    },
                    {
                        'featureType': 'land',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#000102'
                        }
                    },
                    {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#0b3d51'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#08304b'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'geometry',
                        'stylers': {
                            'lightness': -70
                        }
                    },
                    {
                        'featureType': 'building',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'all',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#857f7f'
                        }
                    },
                    {
                        'featureType': 'all',
                        'elementType': 'labels.text.stroke',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'building',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#022338'
                        }
                    },
                    {
                        'featureType': 'green',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#062032'
                        }
                    },
                    {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#465b6c'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#022338'
                        }
                    },
                    {
                        'featureType': 'label',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }
                ]
            }
        },
        series : [
            {
                name: '民居类型',
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: convertData(data),
                symbolSize: function (val) {
                    return val[2] / 10;     ///    【修改参数4】：此处修改的是POINT的大小，大小等于：value值 / 比例（此处是10）
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FFFF00'
                    }
                }
            },
            {
                name: 'Top 5',           ///    【修改参数5】：修改TOP n 的标签，此处是“Top 5”
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 6)),           ///    【修改参数6】：修改TOP n 中“n”的具体值，比如top5就是 slice（0,6）；Top10 就是 slice（0,11）
                symbolSize: function (val) {
                    return val[2] / 10;      ///    【修改参数7】：此处修改的是前topN的POINT的大小，大小等于：value值 / 比例（此处是10）
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#32CD32',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
    };

    var myChart = echarts.init(document.getElementById('rank_map'));

    myChart.setOption(option);
});

（2）服务器端Python+Django后台接收请求；

        Python 后台实现部分代码

urls：

# -*- coding:utf-8 -*-
__author__ = 'GIS_BT'
__date__ = '2018/2/3 1:05'

from django.conf.urls import url
from .views import index,pro,city,pop,get_an_apple,popindex,PopListView


urlpatterns = [
    url(r'^$',index,),
    url(r'^pro/$',pro,name="pro"),
    url(r'^city/(?P<city_id>\d+)/$',city,name="city"),
    url(r'^pop/$',pop,name="pop"),
    url(r'^popindex/$',popindex),
    url(r'^poplist/$',PopListView.as_view(),name="poplist"),
    url(r'^get_apple/$',get_an_apple,name="get_apple")
]

views：

from django.shortcuts import render
from django.views.generic import View
import json
from django.http import JsonResponse,HttpResponse
from .models import AreaInfo,PopulationData
# Create your views here.

def index(request):
    return render(request,'echarts.html')


def pro(request):
    parealist = AreaInfo.objects.filter(parea__isnull=True)
    list = []
    for item in parealist:
        list.append([item.id,item.title,item.parea])
    return JsonResponse({'data':list})


def city(request,city_id):
    pcitylist = AreaInfo.objects.filter(parea_id=city_id)
    list = []
    for item in pcitylist:
        # list.append([item.id,item.title])
        list.append({'id':item.id,'title':item.title})
    return JsonResponse({'data':list})


def pop(request):
    poplist = PopulationData.objects.all()
    list = []
    for item in poplist:
        list.append({"name":item.name,"value":item.num})
    return JsonResponse({"data":list})

def popindex(request):
    return render(request,'echarts.html')

class PopListView(View):
    def get(self,request):
        poplist = PopulationData.objects.all()
        json_list = []
        for pop in poplist:
            json_dict = {}
            # json_dict["name"]=pop.name
            # json_dict["geoCoord"]=[pop.longitude,pop.latitude]
            json_dict['"' + pop.name + '"']= [pop.longitude,pop.latitude]
            json_list.append(json_dict)
        return HttpResponse(json.dumps(json_list),content_type='application/json')


def get_an_apple(request):
    resp = {"status":"fail","msg":"error"}
    return HttpResponse(json.dumps(resp),content_type='application/json')

（3）生成json数据并返回给客户端；

（4）客户端接收数据后显示