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

This article introduces how to drill down to the county level by using Echarts map map in vue. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Fortunately, it is finally realized, first move the picture:

The basic idea is the same. Get the parameters of the mouse click and jump to the specified JSON.

It's important to note that because I jumped directly from vue-cli2 to vue-cli4, I wondered why I couldn't read JSON. I didn't know that the future project infrastructure of vue-cli3 was different from the old version after looking it up.

In the past, we are used to creating JSON files under the static folder under the root directory, vue-cli3, 4 do not have a static folder, create a static folder below, the result will be an error, request 404 can not find the file.

The correct path is introduced under the public folder

Without saying much, the steps are as follows:

1-initialize the national map first

InitEcharts ("china") Function initEcharts (map) {let option = {geo: {map: map, roam: false, scaleLimit: {min: 1.2, max: 3}, zoom: 1.2, / / text label on the drawing Some data information that can be used to describe the graph label: {normal: {show: true, fontSize: "10", color: "rgba"}, / / the polygon graphic style of the map area There are two states, normal and emphasis, itemStyle: {/ / normal is the style of the drawing in the default state Normal: {borderColor: "rgba (0,0,0,0.2)"}, / / emphasis is the style of the graphic in the highlighted state, such as when the mouse hovers or the legend is highlighted. Emphasis: {areaColor: "# F3B329", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba (0,0,0,0.5)"} Series: [{name: "amount of information", type: "map", / / here is' china', and because the name registered in js If it is Shanghai, then the pName refers to 'shanghai' mapType: map, geoIndex: 0 / / data: dataList}]} MyChart.setOption (option);}

2-define the array of provinces and urban areas. I will not put it because it is too long (later, I need to refer to the corresponding JSON. I will package these JSON and source code to github and need to fetch them myself)

3-Click event

/ / Click to trigger myChart.on ("click", param = > {if (param.name in provinces) {/ / processing provincial module let names = param.name; for (let key in provinces) {if (names = = key) {showProvince (provinces [key], key); break } else if (param.name in cityMap) {/ / processing city module let names = param.name; for (let key in cityMap) {if (names = = key) {showCitys (cityMap [key], key); break;})

4-render map

/ / display the corresponding province function showProvince (eName,param) {console.log (eName,param) $.getJSON (`/ map/province/$ {eName} .json`, data= > {that.$echarts.registerMap (param, data); alert ("province") initEcharts (param) })} / / display the corresponding city function showCitys (cName, param) {console.log (cName, param) / / display the county map $.getJSON (`/ map/city/$ {cName} .json`, data= > {that.$echarts.registerMap (param, data); alert ("county") initEcharts (param) })} about how to use Echarts map diagrams in vue to drill down to the county level is shared here. I hope the above content can be helpful to everyone and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.