echart 中国地图的使用

1.echart下载

你可以通过以下几种方式获取 ECharts。

• 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
• 在 ECharts 的 GitHub 获取。
• 通过 jsDelivr 等 CDN 引入
  我是从官网下载的

2. 中国地图的引入

我们结对作业是引入的中国地图，所以用中国地图做例子

这是项目构成

1、首先给定一下全局样式、给个地图容器

2、获取容器DOM，给定地图配置

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

3、详细配置，定制样式，给自定义事件

option = {
tooltip: {
formatter:function(params,ticket, callback){
return params.seriesName+'
'+params.name+'：'+params.value
}
},
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['高','低'],
inRange: {
color: ['#e0ffff', '#006edd']
},
show:true
},
geo: {
map: 'china',
roam: false,
zoom:1.23,
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '信息量',
type: 'map',
geoIndex: 0,
data:dataList
}
]
};

tooltip：定制信息提示框的内容，其中params参数表示数据

数据格式：

var dataList=[
{name:"南海诸岛",10},
{name: '北京', 90},
{name: '天津', 120},
{name: '上海', 230}
]

visualMap：图注样式定制，其中包括color范围，文字提示

geo:定义地图为china，其中可能大概率要用的一个配置zoom: 视角缩放比例，roam：是否开启缩放和平移
itemStyle：地图外观定制，其中normal表示正常显示的样式，emphasis表示鼠标悬浮下样式
series：整体配置 其中type很关键 表示该例是地图，data:图表所用数据，实际项目中大家可以通过http获取数据，再赋值给data

这样大概地图就完成了，我懂的不是很多，就大概写一下，