1.echart下载
你可以通过以下几种方式获取 ECharts。
- 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
- 在 ECharts 的 GitHub 获取。
- 通过 jsDelivr 等 CDN 引入
我是从官网下载的
2. 中国地图的引入
我们结对作业是引入的中国地图,所以用中国地图做例子
这是项目构成
1、首先给定一下全局样式、给个地图容器
<style>
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
#main{
width:800px;
height:600px;
margin: 150px auto;
border:1px solid #ddd;
}
/*建议长宽比0.75,符合审美*/
</style>
<div id="main">
</div>
2、获取容器DOM,给定地图配置
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
3、详细配置,定制样式,给自定义事件
option = {
tooltip: {
formatter:function(params,ticket, callback){
return params.seriesName+'<br />'+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
这样大概地图就完成了,我懂的不是很多,就大概写一下,