以上就是成果图,
苦于不会echarts,第一次用echarts创建地图也是花了不少精力,希望此文能对一些初学echarts,用echarts创建地图的朋友有所帮助。
用echarts制作地图,我们需要3个js,两个官方下载的js:echarts.min.js和jquery.min.js(这个去官方下载就好)
地图.js (这个需要我们自己制作) 制作过程我在别人的CSDN上看到一个很简洁明了的一篇,我这里附上超链接,就不做多说,地区的json制作成可使用的js。顺便附上各地区的json数据,这个数据有点老,不过若是不需要严格规范的话,也是可以拿来使用的。
准备材料都准备好了,那接下来就是动手的时候。
附上代码
// 建立地图
var myChart1 = echarts.init(document.getElementById('echartMap'));
var option = {
tooltip: {
show: true,
trigger: 'item',
triggerOn: 'click',
formatter: "名称:{b}<br />坐标:{c}"
},
series: [{
label: {//地图上字体样式的修改
normal: {
textStyle: {
fontWeight: 'bold',
color: '#fff'
}
}
},
itemStyle:{//地图样式的修改
normal:{
label:{show:true},
areaColor:'#3366ff',
borderColor: '#97FFFF'
},
emphasis:{label:{show:true}}
},
type: 'map',//标名是个地图类
map:'温州',//这里和你制作的地图.js里面的echarts.registerMap()函数的第一个参数对上
data:[{name: '苍南县', value: 20057.34}],//data内是你需要显示的数据
}
]
};
myChart1.setOption(option);
好吧,梳理之后用echarts制作地图就是这么简单的。