大数据分析技术应用-ECharts地图

Echarts地图学习目标掌握地图的实现步骤掌握地图的常用属性132知识思政技能能绘制出基本地图能实现地图的常见效果培养民族自豪感培养精益求精的工匠精神一、地图的基本实现数据一、地图的基本实现数据一、地图的基本实现jquery.js一、地图的基本实现步骤：1、ECharts最基本的代码结构2、把中国地图的china.json文件放到项目3、使用Ajax获取china.json4、在回调函数中为echarts全局对象注册地图5、在geo下设置type和map属性一、地图的基本实现核心代码：3、使用Ajax获取china.json4、在回调函数中为echarts全局对象注册地图5、在geo下设置type和map属性$.get("json/map/china.json",function(ret){

//ret就是中国的各个省份矢量数据

//console.log(ret)

echarts.registerMap('chinaMap',ret)

var

option={

geo:{

type:'map',

map:'chinaMap',

}

}

myChart.setOption(option)

})一、地图的基本实现代码运行和效果：二、地图的常见效果1、地图的缩放：roam:true(geo下设置)2、地图上各省份名称的显示：label:{show:true}二、地图的常见效果3、显示地图某个区域加载该区域的矢量地图数据通过registerMap注册到echarts全局对象中指明geo配置下的type和map属性二、地图的常见效果3、显示地图某个区域核心代码如下：$.get("json/map/jiangsu.json",function(ret){

echarts.registerMap('jiangsu',ret)

var

option={

geo:{

type:'map',

map:'jiangsu',

roam:true,

label:{show:true},

zoom:1.2

}

}二、地图的常见效果4、不同城市颜色不同步骤为：1)

显示基本的中国地图2)

城市的温度数据设置给series3)

将series下的数据和geo关联起来4)

结合visualMap配合使用

二、地图的常见效果4、不同城市颜色不同2)

城市的温度数据

var

tempData=[

{name:'北京',value:-15},

{name:'天津',value:-12},

{name:'上海',value:5},

{name:'重庆',value:8},

{name:'河北',value:-10},

{name:'河南',value:-7},

{name:'云南',value:15},

{name:'辽宁',value:-25},

{name:'黑龙江',value:-30},

……

]二、地图的常见效果4、不同城市颜色不同3)设置series下的数据，并和geo关联起来

series:[

{

data:tempData,

geoIndex:0,//将温度数据和序号为0的geo关联在一起

type:'map'

}

],二、地图的常见效果4、不同城市颜色不同4)

结合visualMap配合使用

visualMap:{

min:-40,

max:30,

inRange:{

color:['blue','white']//控制颜色渐变的范围

},

calculabel:true//出现滑块效果,对数据筛选

}二、地图的常见效果4、不同城市颜色不同运行效果图二、地图的常见效果5、涟漪效果1）准备好要呈现涟漪效果的散点数据2）给series下增加新的对象data，其数值即为上一步的散点数据3）配置新对象的type:effectScatter，即涟漪效果4）让散点图使用地图坐标系统coordinateSystem:’geo’5）调整涟漪效果实现步骤：二、地图的常见效果5、涟漪效果1）准备好散点数据

var

scatterData=[{value:[118.767413,32.041544]}]二、地图的常见效果5、涟漪效果2）给series下增加新的对象data，其数值即为上一步的散点数据

{

data:scatterData

}二、地图的常见效果5、涟漪效果3）配置新对象的type:effectScatter，即涟漪效果

{

data:scatterData,

type:’effectScatter’

}二、地图的常见效果5、涟漪效果4）让散点图使用地图坐标系统coordinateSystem:’geo’

{

data:scatterData,

type:’effectScatter’,

coordinateSystem:'geo'

}二、地图的常见效果5、涟漪效果5）调整涟漪效果{

data:scatterData,//配置散点图的坐标数据

type:'effectScatter',

coordinateSystem:'geo',//指明散点使用的坐标系统为geo坐标系统。

rippleEffect:{

scale:10//调整涟漪动画的缩放比