Echarts Realization Map Drill + corresponding area data display + Right key return to the previous level

The Echarts version is Echarts 4.

After studying for three days, Echarts finally realized the data display of drilling to county area based on echarts realization map, plus corresponding area. Look at the effect chart first

Follow-up to the process of updating the study, it is recommended to use the Echarts students to see the official documents and examples, do not blindly to engage. I was on the day before the data to add to the map to show that I have been blind to do the one or the other. Later went to read a half-day document, to the example study, finally the data show clear. Next is the binding data can be, happy.

2018/3/26 Update modified style, according to the color scale value map block display different colors by month filter data, date plug-in is the original HTML5 input date each corresponding area of the next level also by the filtered month display data implementation right key return
Found Echarts official API documentation, mouse event Mychart.on (' ContextMenu ', () =>{}) Remove Browser default right-click menu + Echarts right button event

Let canvas = document.getelementsbytagname (' body ')
Canvas.oncontextmenu = function () {return false;}
Mycharts.on (' contextmenu,function (params) {
    //right mouse button event, display right key to return to upper level
    $ (' #context-menu '). css ({left
        : Params.event.offsetX,
        Top:params.event.offsetY
    })
}

Right key to return need to use the stack to implement
Click on the map to enter the next level, the current rendering good data into the stack right back to the top level, data out of the stack, re-rendering (do not know whether to implement like the browser, simply return to the previous page, and do not need to be rendered again)

Fix bugs TODO [x] Load data asynchronously, first render the map, Ajax to get the data and then render the data [x] drill down the map, + show the corresponding area of data [X] to judge the municipality, two-level down drilling data distinguish [x] modified style, TODO understand the parameters of the modified style, may also need to modify [] Display The data of the chain, the year [X] Shanghai regional map is missing, inexplicable wonderful to repair, should be the demo in the complete map file copied over the [] regional data percentage, percentage map Data association [x] Region data by month, called background change interface, add pass the year parameter, The next level of interface with the corresponding plus parameters [x] limit map Click events to the stack, set the judge if (Mapstack < 2) {Mapstack.push ()}

Two times human error occurred in the process.
1. Write A For loop time, the judgment condition is omitted to write (red box), the low-level grammatical error, no wonder always prompts xxx undefined
2.
3. Another place is also a low-level logic error, writing the wrong letter
4.

Add Features
Added the legend selection function, choose different data types, display different data.
1. The idea is to change the map data in the original map through the API of the legend Change event, to show.
As a result, the logic of the implementation is too complicated to make yourself dizzy.
2. Predecessors know, through the button link jump, copy4 map, data changes on it, get

This effect is not good experience, no, and then modify

Added a modal box, click to show the corresponding region of the month data

2018/3/27 Update

Achieve regional data Ranking bar chart

Knowledge point data sort data rendering, associating current data into stack and out stack package common part code update fix bug Table

The details determine success or failure.
To develop the habit of writing code annotations, otherwise, when the code is more, the variables defined above are forgotten, and error prone.

2018/4/17 Update

Fix bugs TODO [x] Load data asynchronously, first render the map, Ajax to get the data and then render the data [x] drill down the map, + show the corresponding area of data [X] to judge the municipality, two-level down drilling data distinguish [x] modified style, TODO understand the parameters of the modified style, may also need to modify [] Display Data of the chain, Year-on-year [] Shanghai area Map missing [] Regional data percentage, percentage map Data Association [] regional data [x] under the central municipality to drill into the stack judgment, three-level drill into the stack 2 times, the municipality only into the stack once, to avoid the empty stack [x] Next level map linkage [x] return to the previous level, the list Map data not on stack, unable to return
Data is not used in the stack, through the stack of data reordering rendering [] Click the bar graph, appear into the empty stack, resulting in a stack will have an empty stack
The reason for the bug appears at level two and level three of the judgment difference, the bar graph Seriesname to the current upper level of the region name can [x] lower left corner of the maximum value of the color to get the maximum value of the data
After sorting the largest value out, set for Colormax [] Add the legend "Customer Chain", "Sales", "Sales Chain", [] new requirements, select the region, showing the chain trend of each region curve, compared with the average, the requirements of the optional region, add a curve

[x] Two-level drill and bug, temporarily unable to repair, because seriesname was changed [x] bug do not fix, the map name changed to pass the Mapname legend written dead, do not need legend

[] Change your thinking, give up optional multiple regions to increase the curve, instead: show only a regional peace bureau curve, with ToolTip to achieve the monthly trend of each region to [] interface after the need to cache, the query is too slow my side of the results come out for a long time [x] change to a pop-up line chart, using the bootstrap modal box [x] frame cannot display line chart
[x] No width is set, width is 0, map cannot be displayed, fix [x] modify modal box and map style [x] bind region data with Vue, implement selection area, Render curve of corresponding region
[x] The region is bound, the data does not correspond to the display [] the next level of the line display is not perfect [x] Modify the Line Chart button icon [x] 4 map configuration variable redundancy confusion, pull out of the public variable, put in a profile [] return to the right key to return to the previous level, line chart display data does not correspond to stack out stack binding, will cause can only drill down to get data, go back to the previous level of data and stay on the last map

Bugs that come with the data process

Uncaught TypeError can read protecty ' id ' of undefined for
(let i=0; res.msg.length; i++) {   
Tmp2.push ({
       ID: Res.msg[i].id,
       Areaid:res.msg[i].areaid,
       name:res.msg[i].area,
       value:res.msg[i].num
   })
}

Part of the reference code, right click on the map event, map down drill

Chart.on ("click", Function (params) {//Hide right-click to return menu $ ("#contextMenu"). Hide (); let tmpobj = {}; let d = []; if (Params.name in
     Provinces) {//Level two municipality data render if (Special.indexof (params.name) >= 0) {Let PostData2 = {parentid: "Provinceid",
   Value:params.data.id}; Promise.all ([Ajaxrequest (Getcitynumberurl, Searchtime, PostData2)]). Then (result => {let [Curmonthresult,
       Lastmonthdata] = result;
       let TMP = []; if (Curmonthresult.errcode = = 1) {Getareanumber (Params.name, Curmonthresult.msg[0].cityid
       , searchtime);
     The error => {console.log ("Request municipal data Failure", e);
 }
   ); //If you click on 34 provinces, municipalities and autonomous regions, draw the two-level map of the selected area $.getjson (Provincejson + provinces[params.name] + ". Json", function (data) {EC
   Harts.registermap (params.name, data);
   for (var i = 0; i < data.features.length i++) {D.push ({name:data.features[i].properties.name}); } rendermap (PArams.name, D);
   if (params.data.id!== "Undifiend") {Getcitynumber (Params.name, Params.data.id, Searchtime, data);
}
 }); else {//show County map $.getjson (Cityjson + citymap[params.name] + ". Json", function (data) {Echarts.registermap (par
   Ams.name, data);
   Let d = [];
   for (var i = 0; i < data.features.length i++) {D.push ({name:data.features[i].properties.name});
   } rendermap (Params.name, D);
     if (Params.data.cityid) {Let postData3 = {parentid: "Cityid", Value:params.data.cityid}; Promise.all ([Ajaxrequest (Getareanumberurl, Searchtime, POSTDATA3)]). Then (result => {le
         t [Curmonthresult, lastmonthdata] = result;
         let TMP = []; if (Curmonthresult.errcode = 1) {//Console.log (' 204 ', Res.msg[0].cityid, res.msg[0].city)//here passed City name has the problem "Beijing", the name that renders the map is "Peking", so map name should use original name to render Getareanumber (Params.name, Params.data.cityid, Searchtime);
       The error => {console.log ("Request municipal data Failure", e);
   }
     );
}
 }); }