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）客户端接收数据后显示