找了很多资料,终于实现了
获取genjson的方式,很好用!!!
AreaCity Geo格式转换工具 (gitee.io)
然后将数据格式贴在下面就可以了
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>石家庄市</title><script src="js/echarts.min.js"></script><script src="js/jquery.js"></script><style>html, body, #main {padding: 0px;margin: 0px;height: 100%;overflow: hidden;}</style> </head> <body><div id="main"></div><script type="text/javascript">var mapData = { //贴在这里 };var myChart = echarts.init(document.getElementById('main'));echarts.registerMap("luoyang", mapData);var option = {series: [{map: "luoyang",type: "map",aspectScale: 1.0,selectedMode: 'single', //选择类型, hoverable: true, //启用鼠标经过高亮 roam: true, //启用鼠标滚轮缩放 itemStyle: {normal: {borderWidth: 1,borderColor: '#2F89CF', // 更改轮廓边界颜色 areaColor: 'rgba(3, 49, 120, 0.8)', // 更改区域底色为80%透明度的深蓝色 label: {show: true,textStyle: {color: '#ffffff', // 更改文字颜色为白色 fontSize: 14 // 更改文字大小 }}},emphasis: { // 选中样式 borderWidth: 1,borderColor: '#00D887',areaColor: 'rgba(3, 63, 150, 0.6)', // 更改鼠标接触颜色为80%透明度的蓝色 label: {show: true,textStyle: {color: '#ffffff' // 更改选中文字颜色为白色 }}}}}]};myChart.setOption(option);</script></body> </html>
效果如图