vue+echarts realizes the flow effect of China map (detailed steps)
|
@vue+echarts realizes the flow effect of China map #Let's take a look at the renderings
Steps: Execute the command : npm run echarts -s and press Enter
Seeing this prompt means the installation is successful. PS: If the network is not good, it is recommended to use the cnpm Taobao mirror (global terminal execution command: npm i -g cnpm --registry=https://registry.npm.taobao.org)
Download china.js Link: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q Extraction code: gjz4 Introduction import echarts from 'echarts/lib/echarts'; import '@/map/china.js'; Write an echarts container to bind ref <div class="wrapper"> <div class="map-container" style="width: 100%; height: 100%" ref="myEchart" ></div> </div> Configure option (necessary comments are marked)
<script>
let echarts = require("echarts");
import "echarts/lib/component/markLine";
mounted(){
let data = [
{ "name": "Beijing", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
"name": "Tianjin",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "248"
}, { "name": "Hebei", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
"name": "Shanxi",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "250"
}, { "name": "Inner Mongolia", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
"name": "Liaoning",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "252"
}, { "name": "Jilin", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
"name": "Heilongjiang",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "254"
}, { "name": "Shanghai", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
"name": "Jiangsu",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "256"
}, { "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
"name": "Anhui",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "258"
}, { "name": "Fujian", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
"name": "Jiangxi",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "260"
}, { "name": "Shandong", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" }, {
"name": "Henan",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "262"
}, { "name": "Hubei", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
"name": "Hunan",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "264"
}, { "name": "Guangdong", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" }, {
"name": "Guangxi",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "266"
}, { "name": "Hainan", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" }, {
"name": "Chongqing",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "268"
}, { "name": "Sichuan", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" }, {
"name": "Guizhou",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "270"
}, { "name": "Yunnan", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" }, {
"name": "Tibet",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "272"
}, { "name": "陕", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
"name": "Gansu",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "274"
}, { "name": "Qinghai", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" }, {
"name": "Ningxia",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "276"
}, { "name": "Xinjiang", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" }, {
"name": "Taiwan",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "278"
}, { "name": "Hong Kong", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
"name": "Macao",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "280"
}]
let chinaGeoCoordMap = {
'Heilongjiang': [127.9688, 45.368,1],
'Inner Mongolia': [110.3467, 41.4899,1],
'Jilin': [125.8154, 44.2584,1],
'Beijing': [116.4551, 40.2539,2],
'Liaoning': [123.1238, 42.1216,1],
'Hebei': [114.4995, 38.1006,1],
'Tianjin': [117.4219, 39.4189,1],
'Shanxi': [112.3352, 37.9413,1],
'Shaanxi': [109.1162, 34.2004,1],
'Gansu': [103.5901, 36.3043,1],
'Ningxia': [106.3586, 38.1775,1],
'Qinghai': [101.4038, 36.8207,1],
'Xinjiang': [87.9236, 43.5883,1],
'Tibet': [91.11, 29.97,1],
'Sichuan': [103.9526, 30.7617,1],
'Chongqing': [108.384366, 30.439702,1],
'Shandong': [117.1582, 36.8701,1],
'Henan': [113.4668, 34.6234,1],
'Jiangsu': [118.8062, 31.9208,1],
'Anhui': [117.29, 32.0581,1],
'Hubei': [114.3896, 30.6628,1],
'Zhejiang': [119.5313, 29.8773,1],
'Fujian': [119.4543, 25.9222,1],
'Jiangxi': [116.0046, 28.6633,1],
'Hunan': [113.0823, 28.2568,1],
'Guizhou': [106.6992, 26.7682,1],
'Yunnan': [102.9199, 25.4663,1],
'Guangdong': [113.12244, 23.009505,1],
'Guangxi': [108.479, 23.1152,1],
'Hainan': [110.3893, 19.8516,1],
'Shanghai': [121.4648, 31.2891,1],
'Taiwan': [120.991676054688, 24.7801149726563,1],
'Macao': [113.33, 22.11,1],
'Hong Kong': [114.15, 22.15,1]
}
for (let i=0;i<data.length;i++){
var da = chinaGeoCoordMap[data[i].name];
chinaGeoCoordMap[data[i].name]=[...da,...data[i].dataCount];
}
let chinaDatas = [
[{
name: 'Beijing',
value: 2
}], [{
name: 'Heilongjiang',
value: 1
}], [{
name: 'Inner Mongolia',
value: 1
}], [{
name: 'Jilin',
value: 1
}], [{
name: 'Liaoning',
value: 1
}], [{
name: 'Hebei',
value: 1
}], [{
name: 'Tianjin',
value: 1
}], [{
name: 'Shanxi',
value: 1
}], [{
name: 'Shaanxi',
value: 1
}], [{
name: 'Gansu',
value: 1
}], [{
name: 'Ningxia',
value: 1
}], [{
name: 'Qinghai',
value: 1
}], [{
name: 'Xinjiang',
value: 1
}], [{
name: 'Tibet',
value: 1
}], [{
name: 'Sichuan',
value: 1
}], [{
name: 'Chongqing',
value: 1
}], [{
name: 'Shandong',
value: 1
}], [{
name: 'Henan',
value: 1
}], [{
name: 'Jiangsu',
value: 1
}], [{
name: 'Anhui',
value: 1
}], [{
name: 'Hubei',
value: 1
}], [{
name: 'Zhejiang',
value: 1
}], [{
name: 'Fujian',
value: 1
}], [{
name: 'Jiangxi',
value: 1
}], [{
name: 'Hunan',
value: 1
}], [{
name: 'Guizhou',
value: 1
}], [{
name: 'Guangdong',
value: 1
}], [{
name: 'Guangxi',
value: 1
}], [{
name: 'Yunnan',
value: 1
}], [{
name: 'Hainan',
value: 1
}], [{
name: 'Shanghai',
value: 1
}], [{
name: 'Taiwan',
value: 1
}], [{
name: 'Macao',
value: 1
}], [{
name: 'Hong Kong',
value: 1
}]
]
let convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
var toCoord = [117.1582, 36.8701];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
let seriesA = []
seriesA.push(
{
type: 'lines',
zlevel: 1,
effect:
show: true,
period: 4, //arrow points to speed, the smaller the value, the faster the speed trailLength: 0.3, //special effect trail length [0,1] the larger the value, the longer the trail symbol: 'pin', //arrow icon symbolSize: 8, //icon size color: '#2a6fd9'
},
lineStyle:
normal: {
color: '#003262',
width: 1, // width of the trail line opacity: .9, // transparency of the trail line curveness: .3 // straightness of the trail line }
},
data: convertData(chinaDatas)
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // ripple effect period: 2, // animation time, the smaller the value, the faster the speed brushType: 'fill', // ripple drawing method stroke, fill
scale: 6, // Maximum limit of the ripple ring, the larger the value, the larger the ripple color: '#003262' // The color of the ripple, the default is the color of the scattered points.
},
label: {
normal: {
show: true,
color: '#283c64',
position: 'top', // display position offset: [0, 0], // offset setting formatter: function (params) { // circle display text return params.data.name
},
fontSize: 13
},
emphasis:
show:false
}
},
symbol: 'circle',
symbolSize: function (val) {
return 1 + val[2] * 5 // Ring size },
itemStyle: {
color: "#2a6fd9",
shadowBlur: 4,
shadowColor: "#2a6fd9",
},
data: chinaDatas.map(function (dataItem) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name],
itemStyle: {
color: "#2a6fd9",
shadowBlur: 4,
shadowColor: "#2a6fd9",
}
}
})
},
//Attack point {
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
label: {
normal: {
show: false,
position: 'right',
color: 'red',
formatter: '{b}',
textStyle: {
color: "red"
}
},
emphasis:
show: true,
color: "red"
}
},
symbol: 'pin',
symbolSize: 0,
data: [{
name: 'Shandong',
value: chinaGeoCoordMap['山东'].concat([10]),
}],
}
);
let option = {
tooltip: {
show: true,
trigger: 'item',
backgroundColor: '#2e65fd',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function (params, ticket, callback) {
console.log(params)
// Expand the content to be displayed according to the business var res = ''
var name = params.name
var value1 = params.value[params.seriesIndex + 3] || 0
var value2 = params.value[params.seriesIndex + 4] || 0
var value3 = params.value[params.seriesIndex + 5] || 0
var value4 = params.value[params.seriesIndex + 6] || 0
var value5 = params.value[params.seriesIndex + 7] || 0
var value6 = params.value[params.seriesIndex + 8] || 0
var value7 = params.value[params.seriesIndex + 9] || 0
res = "<span style='color:#fff'>" + name + '</span>' +
'<br/>' +
'<i class="icon icon-xuesheng"></i> Student:' + value1+
'<br/>' +
'<i class="icon icon-laoshi_huaban"></i> Teacher:'+value2+
'<br/>' +
'<i class="icon icon-baoanxiehui"></i> Youth Entrepreneurs Association:'+value3+
'<br/>' +
'<i class="icon icon-rencaizhengce"></i> Young Entrepreneurs:'+value4+
'<br/>' +
'<i class="icon icon-investmentinstitutions"></i> Top 10 industries:'+value5+
'<br/>' +
'<i class="icon icon-caozuoyaoqingjiabin"></i> Summit guests:'+value6+
'<br/>' +
'<i class="icon icon-rencai"></i> High-end talents:'+value7
return res
}
},
regions:
//Hide the South China Sea {
name: "South China Sea Islands",
itemStyle: {
normal: {
borderColor: "red",
borderWidth: 20, //Set the outer border opacity: 0, //When it is 0, the graphic will not be drawn},
},
label: {
show: false, // hide text},
},
],
backgroundColor: "rgba(0, 0, 0, 0.1)",
geo: {
map: 'china',
zoom: 1.2,
label: {
normal: {
color: '#1e2d4c'
},
emphasis:
show:false
}
},
roam: false, // Whether to allow scaling itemStyle: {
normal: {
//Set the map frame borderColor: "#003262",
borderWidth: 11, //Set the outer border},
emphasis:
areaColor: "#003262",
shadowColor: "#003262",
},
},
itemStyle: {
normal: {
color: '', // map background color borderColor: '#5ea8ff', // provincial and municipal boundary line 00fcff 516a89
borderWidth: 1
},
emphasis:
color: '#81acff' // floating background }
}
},
series: seriesA
}
}
</script>Just initialize echarts this.myEchart = echarts.init(this.$refs.myEchart); this.myEchart.setOption(option); This is the end of this article about vue+echarts to achieve the flow effect of China map. For more relevant vue+echarts China map content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: CentOS 7 installation and configuration method graphic tutorial
>>: MySQL 5.7 installation and configuration method graphic tutorial
Recommend
Mobile terminal adaptation makes px automatically converted to rem
Install postcss-pxtorem first: npm install postcs...
MySQL learning database search statement DQL Xiaobai chapter
Table of contents 1. Simple retrieval of data 2. ...
VMware15/16 Detailed steps to unlock VMware and install MacOS
VMware version: VMware-workstation-full-16 VMware...
MySQL 5.6.37 (zip) download installation configuration graphic tutorial
This article shares the download, installation an...
Solve the problem of running jupyter notebook on the server
Table of contents The server runs jupyter noteboo...
MySQL 5.6.23 Installation and Configuration Environment Variables Tutorial
This article shares the installation and configur...
Implementation of the list-style-type attribute in front of CSS ordered or unordered lists
example: <html> <head> <style type...
Why is it not recommended to use an empty string as a className in Vue?
Table of contents Compare the empty string '&...
How to run commands on a remote Linux system via SSH
Sometimes we may need to run some commands on a r...
Solution to using html2canvas to process Dom elements with Baidu map into images
Problem 1: Baidu Map uses tiled images (the map i...
Detailed explanation of top command output in Linux
Preface I believe everyone has used the top comma...
Use of Linux ifconfig command
1. Command Introduction The ifconfig (configure a...
Specific use of Linux gcc command
01. Command Overview The gcc command uses the C/C...
Implementation and usage scenarios of JS anti-shake throttling function
Table of contents 1. What is Function Anti-shake?...
MySQL 8.0.24 installation and configuration method graphic tutorial
This article shares the installation tutorial of ...