Shulou(Shulou.com)06/02 Report--

This article mainly shows you "vue how to import echarts map", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to import echarts map into vue" this article.

Import method: 1, use the "npm install echarts-S" command to install echarts dependencies; 2, in the "main.js" in the global introduction of echarts;3, in the pages that need the map to use the import statement to introduce the "china.js" file, add relevant code.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Requirements: display the name of each province, slide over the mark to show the number of access, click the mark to show that the number of systems has been accessed and can jump to the entry of the corresponding page information

Configuration:

1. Installation dependency

Npm install echarts-S

two。 Global introduction of main.js

/ / introduce echartsimport echarts from 'echarts' Vue.prototype.$echarts = echarts

3. Introduce the map china.js on the page that needs the map to view the official document, and click on the china.js saved by myself to download (extraction code 4rxi)

Import'.. / static/js/chinamap/china.js' / / introduce the use of Chinese map data:

Complete example code:

Number of customer

3600

Number of tenants

1500

Number of control systems

20800

Number of access systems

3600 {{TipsList.name}}

{{TipsList.value [2]}}

Number of system

{{TipsList.num [2]}}

Connected

Tip: scroll the mouse wheel to control map zooming

Import'.. / static/js/chinamap/china.js' / / introduce Chinese map data export default {data () {return {ifbox:false, TipsList: [],}}, mounted () {this.ChinaMap () }, methods: {/ / Click the right arrow of simulated data to jump out of the page, toClient (id) {this.$router.push ({path: "/ Client", query: {lesseeCompanyId: id}});}, ChinaMap () {var that=this / / Simulation data let data = [{name: 'Haimen', value: 90, num: 5 jade 8}, {name: 'Ordos', value: 102, num: 15, id:16}, {name: 'Qiqihar', value: 140, num: 30, id:20}] Let geoCoordMap = {'Haimen': [121.15 ~ 31.89], 'Ordos': [109.781327 ~ 39.608266], 'Qiqihar': [123.97 ~ 47.33]}; 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), num: geoCoord.concat(data[i].num), id: geoCoord.concat(data[i].id) }); } } return res; }; let myChartChina = this.$echarts.init(document.getElementById('myChartChina')) //这里是为了获得容器所在位置 _window.onresize = myChartChina.resize; myChartChina.setOption({ // 进行相关配置 backgroundColor: '#1c2431',//地图背景色 geo: { // 这个是重点配置区 map: 'china', // 表示中国地图 label: { normal:{ show: true, // 是否显示对应地名 textStyle: { //字体颜色 color: '#797979' } }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { borderWidth: 1, // 地图边框宽度 borderColor: '#014888', // 地图边框颜色 areaColor: '#026295' // 地图颜色 }, emphasis: {//选中省份的颜色 areaColor: '#026295', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 0, borderWidth: 1, shadowColor: '#fff' } } }, //滑动显示数据 tooltip: { trigger: 'item', formatter: function(params) { return params.name + ' 已接入: ' + params.data.num[2]; } }, series: [{ name: '散点', type: 'scatter', coordinateSystem: 'geo', color:"#e1ebe3",//点的颜色 data: convertData(data), symbolSize: 25,//点的大小 symbol:"pin",//点的样式 cursor:"pointer",//鼠标放上去的效果 label: { normal: {//默认展示 show: false }, emphasis: {//滑过展示 show: false } }, itemStyle: { emphasis: { borderColor: '#5c8f6e', borderWidth: 5 } } }, { type: 'map', map: 'china', geoIndex: 0, aspectScale: 0.75, tooltip: { show: false } }, ], }) // if (myChartChina && typeof myChartChina === "object") { // myChartChina.setOption(myChartChina, true); // } myChartChina.on('click', function (params) { //点击事件 if (params.componentType === 'series') { if(params.data){ that.TipsList=params.data that.ifbox=true that.boxPosition() }else{ that.ifbox=false } } }); }, //点击地点显示对应位置数据 boxPosition(){ var e = event || window.event; var x=e.clientX+145+"px", y=e.clientY+5+"px"; clearTimeout(t) var t = setTimeout(function (){ $('#box').css('top',y), $('#box').css('left',x) }, 100); t }, } }.Page{ position: relative;}.projectList{ position: absolute; bottom:0; left:0; z-index: 100; width: 280px; height: 150px; background: linear-gradient(#1d4978, #081630); display: flex; flex-wrap:wrap; justify-content:space-around; align-items:center; }.projectList>

Div {width: 120px; height: 55px;} .projectList > div > p {color: # fff; font-size: 16px;} .projectList > div > p > I {color: # 12baf9;} .inputList {width: 120px; height: 30px; background: # 1a3c7b; border: 2px solid # 0f5390; margin-top:7px; border-radius: 5px; letter-spacing:5px; color: # 65ddd3; line-height: 26px; text-indent: 1emm;} # box width:280px; height: 80px Background: # 026295; box-shadow: 00 10px # 008b9a; border: 1px solid # 008b9a; position: absolute; top:10px; left: 50%; margin-left:-140px; color: # fff; text-align: center;}. Box_left {width: 239px; height: 80px; float: left;}. Box_title {width: 238px; height: 30px; border-bottom: 1px solid # 008b9a; line-height: 30px;} box_list {width: 119px Height: 50px; float: left;}. Box_lists {border-left: 1px solid # 008b9a;}. Box_list > p:nth-child (1) {font-size: 20px; line-height: 28px; color: yellow;}. Box_lists > p:nth-child (1) {color: rgb (111,185,234);} .box _ right {width: 39px; height: 80px; border-left: 1px solid # 008b9a; float: left;}. Box_right I {line-height: 80px } .dilog {/ * width: 180px; * / height: 80px; background: black; position: absolute; border-radius: 5px; border: solid 1px rgb (0139,154); z-index: 11111; display: flex; box-shadow: 00 10px rgb (0,139,154);} .dilog_title {text-align: center; height: 30px; border-bottom: solid 1px grey; line-height: 30px; color: white;}. Box_Tips {width:96% Height: 20px; position: absolute; bottom: 5px; right: 5px; font-size: 14px; color: # fff;}. Box_Tips > p {white-space: nowrap; position: absolute; top: 0px; left: 0; animation:mymove 30s infinite;} @ keyframes mymove {from {left: 70%;} to {left: 0%;}} above is all the content of the article "how vue imports echarts Map". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.