Echarts3实例 map地图值渲染 Bertha 。 2021-09-17 09:24 444阅读 0赞 ### 前言 ### Echarts Map中的地图需要按照区域所绑定的值进行渲染,以展示不同区域的属性值。 ### 实现效果 ### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70] ### 实现代码 ### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ height: 100%; } *{ margin: 0px; height: 0px; } #map{ width: 800px; height: 600px; border: 1px solid red; } </style> <script src="js/echarts.min.js"></script> <script src="js/jquery-3.1.1.js"></script> </head> <body> <div id="map"></div> <script> var Value = [ {name:"莱芜市",value:"100"}, {name:"威海市",value:"50"}, {name:"滨州市",value:"20"}, {name:"临沂市",value:"90"}, {name:"淄博市",value:"170"}, {name:"日照市",value:"190"}, {name:"德州市",value:"160"}, {name:"烟台市",value:"140"}, {name:"菏泽市",value:"130"}, {name:"青岛市",value:"110"}, {name:"东营市",value:"105"}, {name:"潍坊市",value:"142"}, {name:"济南市",value:"80"}, {name:"聊城市",value:"184"}, {name:"泰安市",value:"55"}, {name:"枣庄市",value:"130"}, {name:"济宁市",value:"40"} ]; // JSON $.getJSON('./json/shandong.json', function (data) { echarts.registerMap('shandong', data); var chart = echarts.init(document.getElementById('map')); var option = { title: { text: '值渲染', }, tooltip: { trigger: 'item', formatter: function (params) { return params.name + ' : ' + params.value; }, extraCssText:"height:20px;" }, visualMap: { min: 0, max: 200, calculable: true, inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] }, text:['High','Low'], // 文本,默认为数值文本 }, series: [ { name: 'USA PopEstimates', type: 'map', roam: true, map: 'shandong', label: { show:true, normal: { show: true, color:"#000", }, emphasis: { show: true, fontSize:16, color:"#fff" } }, itemStyle:{ emphasis:{label:{show:true}} }, // 文本位置修正 textFixed: { Alaska: [20, -20] }, data:Value }, ] }; chart.setOption(option); }); </script> </body> </html> [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/8e4299f507bc4822b8525431415bbff5.png
还没有评论,来说两句吧...