关于如何使用echarts实现市县区地图的可视化
找了很多资料,终于实现了
获取genjson的方式,很好用!!!
然后将数据格式贴在下面就可以了
<!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>
效果如图
本文作者:TranquilTimber
本文链接:https://www.cnblogs.com/gbrr/p/18079535
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
2023-03-18 【Android】打卡app 今日完成情况记录