當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

echarts中的地图与Axure交互

發(fā)布時(shí)間：2023/12/14 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 echarts中的地图与Axure交互小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.將echarts中的地圖嵌入Axure中實(shí)現(xiàn)可視化https://echarts.apache.org/examples/zh/editor.html?c=map-polygon.

2.將echarts中的圖加載到Axure中，步驟：https://www.pmyes.com/thread-35460.htm

3.將echarts中https://echarts.apache.org/examples/zh/editor.html?c=map-polygon.的地圖下載到本地，然后轉(zhuǎn)存成svg格式，再粘貼到Axure中進(jìn)行格式的設(shè)置和調(diào)整：轉(zhuǎn)換成svg格式：https://blog.csdn.net/qq_31201781/article/details/95941880?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-1-95941880.nonecase

4.修改后html文件

<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><script src="https://gallery.echartsjs.com/dep/jquery/jquery.min.js"></script> </head> <body> <a id="download" href="">下載</a> <div id="main" style="width: 800px;height:600px;"></div> <script>const a = window.document.querySelector('#download')a.addEventListener('click',()=>{const content = document.querySelector('svg').outerHTMLconst blob= new Blob([content], {type: 'xml/svg'})a.href = URL.createObjectURL(blob)a.download = 'test.svg'})var myChart = echarts.init(document.querySelector('#main'), null, {renderer: 'svg'});// 指定圖表的配置項(xiàng)和數(shù)據(jù)var app = {}; option = null; var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/110000_full.json";//var uploadedDataURL = 'C:/Users/5i5j/Desktop/110000_full.json' // 請(qǐng)求的方式獲取 $.get(uploadedDataURL, function(as) {// 引入北京地區(qū)地圖echarts.registerMap('北京', as);// 每個(gè)地區(qū)的坐標(biāo)var geoCoordMap = {'東城': [116.424697,39.927967],'西城': [116.358141,39.913919],'朝陽(yáng)': [116.765487,40.136573],'豐臺(tái)': [116.290679,39.857184],'石景山': [116.17672,39.949198],'海淀': [116.177807,40.062966],'門(mén)頭溝': [115.905234,40.010063],'房山': [115.941902,39.708825],'通州': [116.747351,39.814339],'順義': [116.737316,40.137897],'昌平': [116.226118,40.225311],'大興': [116.402095,39.655493],'懷柔': [116.621138,40.432762],'平谷': [117.117604,40.192158],'密云': [117.065719,40.500122],'延慶': [116.016705,40.507607]};// 每個(gè)地區(qū)的累計(jì)疫情數(shù)量值var data = [{name: '東城',value: 390,alarm_num: 54}, {name: '西城',value: 119}, {name: '朝陽(yáng)',value: 55,alarm_num: 9}, {name: '豐臺(tái)',value: 329}, {name: '石景山',value: 219,alarm_num: 14}, {name: '海淀',value: 290}, {name: '門(mén)頭溝',value: 319,alarm_num: 2}, {name: '房山',value: 199}, {name: '通州',value: 419,alarm_num: 11}, {name: '順義',value: 299}, {name: '昌平',value: 49}, {name: '大興',value: 219,alarm_num: 15}, {name: '懷柔',value: 89}, {name: '平谷',value: 49}, {name: '密云',value: 209,alarm_num: 27}, {name: '延慶',value: 129}];// 每個(gè)地區(qū)的新增疫情數(shù)量var data3 = [{name: '通州',value: 54}, {name: '順義',value: 9}, {name: '平谷',value: 14}, {name: '豐臺(tái)',value: 2}, {name: '懷柔',value: 11}]var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}// 有數(shù)據(jù)的地區(qū)的名稱(chēng)和value值return res;};// 設(shè)定series是一個(gè)空的數(shù)組var series = [];[['北京', data]].forEach(function(item, i) {series.push({name: '定位點(diǎn)',type: 'effectScatter', // 散點(diǎn)圖coordinateSystem: 'geo', // 使用地理坐標(biāo)系hoverAnimation: 'false',legendHoverLink: 'false',rippleEffect: {period: 4,brushType: 'stroke',scale: 3},data: convertData(item[1]),symbolSize: function(val) {if (val[2] <= 100) {return 4}if (val[2] > 100 && val[2] <= 200) {return 8}if (val[2] > 200 && val[2] <= 300) {return 12}if (val[2] > 300 && val[2] <= 400) {return 16}if (val[2] > 400 && val[2] <= 500) {return 20}if (val[2] > 500) {return 24}},itemStyle: {normal: {color: '#5599E4',}},zlevel: 1,}, {type: 'map',map: '北京',zlevel: 0,itemStyle: {normal: {areaColor: '#204189',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}},label: {normal: {show: true,textStyle: {color: '#ddb926',fontSize: 10},},emphasis: {textStyle: {color: '#ddb926',fontSize: 10},}},data: data}, {name: '點(diǎn)',type: 'effectScatter',coordinateSystem: 'geo',//symbol: 'pin',symbolSize: 15,label: {normal: {// show: true,textStyle: {color: '#fff',fontSize: 9,}}},itemStyle: {normal: {color: '#FF8000', //標(biāo)志顏色}},zlevel: 6,data: convertData(data3)});});option = { // backgroundColor: '#4f5555', // title: { // text: '北京分布圖',// subtext: '散點(diǎn)圓的大小隨累計(jì)數(shù)量改變而改變', // left: 'center', // textStyle: { // color: '#7bbfea' // } // },geo: {map: '北京',label: {textStyle: {fontSize: '.1rem',}},itemStyle: {normal: {areaColor: '#2A7AF5',borderColor: '#2A7AF5'},emphasis: {areaColor: '#2A7AF5'}}},series: series};myChart.setOption(option);});; if (option && typeof option === "object") {myChart.setOption(option, true); }</script></body> </html>

總結(jié)

以上是生活随笔為你收集整理的echarts中的地图与Axure交互的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： android gps原始数据格式,An
下一篇：用 Python 爬取起点小说网