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

In this issue, the editor will bring you about the steps of vue2 using echarts to draw provinces separately. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Step 1: introduce the required third-party modules first

Import echarts from "echarts"; / / introduce the required echarts module import "echarts/map/js/province/shanxi"; / / import the province's js file import "echarts/map/json/province/shanxi.json"; / / import the province's json file

Step 2: start drawing

/ / initialize the echarts instance var myChart = echarts.init (document.getElementById ("left2")) based on the prepared dom Var option = {visualMap: {show: false, min: 0, max: 100, left: "left", top: "bottom", text: ["high", "low"], / / text Default is numeric text calculable: true, inRange: {color: ["yellow", "lightskyblue", "orangered"],},}, series: [{layoutCenter: ['30%','30%'], type: "map", mapType: "Shanxi" Roam: true, label: {normal: {show: true, textStyle: {fontSize: 10, fontFamily: "bold",},}, emphasis: {color: "# fff" }, itemStyle: {borderColor: "# 389BB7", areaColor: "# fff", areaColor: "# 389BB7", borderWidth: 0, animation: false,// data data: [{name: "Datong" Value: 88, name: "Shuozhou", value: 96, name: "Xinzhou", value: 98, name: "Luliang", value: 80, name: "Taiyuan" Name: Jinzhong City, value: 79, name: Yangquan City, value: 77, name: Linfen City, value: 33, name: Changzhi City, value: 69 Name: Yuncheng, value: 66, name: Jincheng, value: 22,],],} MyChart.setOption (option)

The final result:

Add: vue2.x combined with echarts2 to display the thermal map of a specific province

Recently, we have studied the realization of thermal map by combining VUE2.X with ehcarts. First, let's take a look at the final:

Don't say much about the effect, just go to the code:

Test # myChart {width: 500px; height: 500px } var geoCoordMap = {"Urumqi": [87.68 ~ 43.77], "Karamay": [84.77 ~ 45.59], "Shihezi": [85.94 ~ 44.27], "Turpan": [89.19 ~ 42.91], "Qiqihar": [123.97 ~ 47.33], "Toksun": [88.6 ~ 3 ~ 42.77], "Shanshan": [90.25 ~ 42.82] Hami: [93.4jue 42.78], "Yiwu": [94.65pr 43.28], "Balikun": [93recover43.6], "Korla": [86.06pr 41.68], "Hejing": [86.35pr 42.31], "Heshuo": [86.84pcr 42.23], "Bohu": [86.53pr 41.95], "Weili": [86.24pr 41.36] "Luntai": [84.25jue 41.77], "Yanqi": [86.55pr 42.05], "Hotan": [79.94je 37.12], "Minfeng": [82.63jue 37.07], "Cele": [80.78807.04], "Yu Tian": [81.6pr 36.86], "Lopu": [80.1737.12], "Pishan": [78.29je 37.06] "Moyu": [79.74jue 37.31], "Aksu": [80.29pr 41.15], "Wensu": [80.24pr 41.29], "Baicheng": [81.84jue 41.82], "Kuche": [82.97jue 41.68], "Xinhe": [82.63pr 41.55], "Shaya": [82.9pr 41.25], "Awati": [80.34 40.64] "Keping": [79.06jue 40.55], "Wushi": [79.25pr 41.22], "Rush": [75.94 439.52], "Bachu": [78.59J 39.78], "yoke Master": [76.788jue 39.46], "Le Pu Lake": [76.6ml39.23], "McGetty": [77.62mer 38.95], "Shakespeare": [77.25jue 38.45] "Zep": [77.26jue 38.2], "Yecheng": [77.42jue 37.89], "Shule": [76.05d39.41], "Yingisha": [76.17recover38.91], "Shu Fu": [75.83d39.42], "Tashkurgan": [75.22hel75.22], "Atushi": [76.12je 39.73], "Aheqi": [78.42je 41.91] Aktao: [75.94 ~ 39.14], "Wuqia": [75.18 ~ 39.7], "Changji": [87.31 ~ ~ 44.05], "Fukang": [87.94 ~ 44.14], "Qitai": [89.52 < 44.02], "Jimsar": [89.14 ~ 44.44], "Mi Quan": [87.68 ~ 43.97], "Manas": [86.22 ~ 44.28] "Hutubi": [86.92] 44.18], "wooden Base": [90.34 43.8], "Bole": [82.1jue 44.93], "Jinghe": [82.92 44.67], "Hot Spring": [81.08 44.95], "Yining": [81.3pc43.91], "Nilek": [82.53 43.82], "Xinyuan": [83.27pr 43.41] "Gongliu": [82.23jue 43.35], "Kuitun": [84.89pr 44.45], "Tex": [81.81je 43.23], "Zhaosu": [81.08 43.15], "Huocheng": [80.87 44.07], "Chabchal": [81.12pr 43.82], "Tacheng": [82.96 46.74], "Numin": [83.62 46.52] "Wusu": [84.62jue 44.45], "Tory": [83.59pr 45.92], "Yumin": [82.94je 46.21], "Sandy Bay": [85.56pr 44.29], "and Buxel": [85.13pr 46.78], "Altay": [88.14jre 47.86], "Qinghe": [90.37 Min 46.71], "Fuyun": [89.44J 47.05] Fuhai: [87.51, 47.15], Jimunai: [85.84, 47.42], Burjin: [86.92, 47.7], Habahe: [86.41, 48.05]} Var convertData = function (data) {var res = []; for (var I = 0; I < data.length; imap +) {var geoCoord = geoCoordMap [data [I] .name]; if (geoCoord) {res.push (geoCoord.concat (data [I] .value));} return res Var loadData = convertData ([{name: "Urumqi", value: 32112}, {name: "Karamay", value: 44412}, {name: "Shihezi", value: 25123}, {name: "Turpan", value: 45612}, {name: "Qiqihar", value: 12512}, {name: "Toksun", value: 12512}, {name: "Shanshan", value: 25121}) {name: "Hami", value: 54425}, {name: "Yiwu", value: 54126}, {name: "Balikun", value: 5226}, {name: "Korla", value: 56247}, {name: "Hejing", value: 67227}, {name: "Heshuo", value: 35427}, {name: "Bohu", value: 78327}, {name: "Weili", value: 87628}} {name: "Luntai", value: 87629}, {name: "Yanqi", value: 67830}, {name: "Hotan", value: 98730}, {name: "Minfeng", value: 112331}, {name: "Cele", value: 113331}, {name: "Yutian", value: 132331}, {name: "Lopu", value: 123231}, {name: "Pishan", value: 154132}} {name: "Moyu", value: 56632}, {name: "Aksu", value: 23232}, {name: "Wenju", value: 12333}, {name: "Baicheng", value: 22333}, {name: "Kuche", value: 32333}, {name: "Xinhe", value: 43434}, {name: "Shaya", value: 54534}, {name: "Awati", value: 64535} {name: "Keping", value: 65435}, {name: "Wushi", value: 567236}, {name: "Rush", value: 567336}, {name: "Bachu", value: 67836}, {name: "Master", value: 789436}, {name: "Le Pu Lake", value: 898236}, {name: "McGetty", value: 678437}, {name: "Shakespeare", value: 56737}} {name: "Zep", value: 123337}, {name: "Ye Cheng", value: 12337}, {name: "Yingisha", value: 23437}, {name: "attachment", value: 34538}, {name: "Atushi", value: 34568}, {name: "Aheqi", value: 12138}, {name: "Aktau", value: 32138}, {name: "Manas" Value: 54139}, {name: "Haba River", value: 56139}, {name: "Burjin", value: 67139}, {name: "Jimunai", value: 78139}, {name: "Fuhai", value: 65440}, {name: "Fuyun", value: 32340}, {name: "Qinghe", value: 44341}, {name: "Altay", value: 54341} {name: "and Booker", value: 23442}, {name: "Yumin", value: 12343}, {name: "Sandy Bay", value: 22343}]) Option = {backgroundColor:'# 404a59signals, xAxis: {show: false}, yAxis: {visualMap: {type: 'piecewise', min: 20000, max: 100000, calculable: true, realtime: false, splitNumber: 5, inRange: {color: [' 005a88records,'# 04a4f6bands,'# 00943e' '# fdf40f',' # cf2d14']}, right:'10% configuration, bottom:'5% terrain, orient: "vertical1", inverse:true, / / whether to reverse the visualMap component textStyle: {color:'# fff' geo: {/ / this is the key configuration area map: 'Xinjiang' / represents the map of China roam: true, itemStyle: {normal: {areaColor:'# 081832, borderColor:'# 425F91 'emphasis: {areaColor: "# 2a333d", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor:' rgba (0,0,0) Silent: true series: [{name:', type: 'heatmap', data: loadData, coordinateSystem:' geo', progressive: 1000, animation: false}] var lineChart = echarts.init (document.getElementById ('myChart')) LineChart.setOption (option)

To say this: china.js or the corresponding js files for each province are available in the node package, which is more comprehensive. Some say that VUE is not used here, yes, it is not introduced here (that is the amount of my project! But don't worry, because the direct introduction into vue is fully compatible!

The code looks simple, but there are a lot of holes in it. Because I used it directly in the project, I thought that if I had a node package, I didn't introduce china.js or the corresponding js file for a specific province, which caused some problems. The second is about the settings of axes and grids. Some settings are related, so we should pay attention to them. The third is to find the corresponding longitude and latitude of each district lock in Xinjiang province on the Internet (there are many channels, so there is no need to be verbose). The fourth is the setting in visualMap.

The advantages of Vue Vue specific lightweight framework, easy to learn, two-way data binding, componentization, separation of data and structure, virtual DOM, fast running and other advantages, Vue pages use local refresh, do not have to request all the data and dom every time the page is redirected, which can greatly improve the access speed and user experience.

These are the steps that the editor shared with vue2 to draw provinces separately using echarts. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are 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.