如何用echarts创建市区地图
第一步，建立测试文件夹，创建一个HTML文件，引入下面两个js文件
第二步，下载一个自己对应市区的json文件，我下的是十堰市，下载地址是
第三步，编写HTML文件，代码如下，
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="js/echarts.min.js"></script> <script src="js/jquery.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(main));
// 指定图表的配置项和数据 //做环形图的本质是 radius: [内半径, 外半径] 内半径!=0 myChart.showLoading(); $.get(./js/sy.json, function (geoJson) { myChart.hideLoading(); echarts.registerMap(HK, geoJson); myChart.setOption( ( option = { title: { sublink: http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12 }, tooltip: { trigger: item, formatter: {b}<br/>{c} (p / km2) }, visualMap: { min: 800, max: 50000, text: [High, Low], realtime: false, calculable: true, inRange: { color: [#009ad6,#7bbfea,#2570a1] } }, series: [ { type: map, map: HK, label: { show: true }, data: [ { name: 张湾区, value: 20057.34 }, { name: 郧西县, value: 15477.48 }, { name: 郧阳区, value: 31686.1 }, { name: 张湾区, value: 6992.6 }, { name: 茅箭区, value: 44045.49 }, { name: 丹江口市, value: 40689.64 }, { name: 房县, value: 37659.78 }, { name: 竹山县, value: 45180.97 }, { name: 竹溪县, value: 55204.26 } ], // 自定义名称映射 nameMap: { Central and Western: 中西区, Eastern: 东区, Islands: 离岛, Kowloon City: 九龙城, Kwai Tsing: 葵青, Kwun Tong: 观塘, North: 北区, Sai Kung: 西贡, Sha Tin: 沙田, Sham Shui Po: 深水埗, Southern: 南区, Tai Po: 大埔, Tsuen Wan: 荃湾, Tuen Mun: 屯门, Wan Chai: 湾仔, Wong Tai Sin: 黄大仙, Yau Tsim Mong: 油尖旺, Yuen Long: 元朗 } } ] }) ); });
myChart.setOption(option);
</script> </body> </html>
