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
JavaScript event capture bubbling and capture details
Table of contents 1. Event Flow 1. Concept 2. DOM...
Nodejs implements intranet penetration service
Table of contents 1. Proxy in LAN 2. Intranet pen...
HTML thead tag definition and usage detailed introduction
Copy code The code is as follows: <thead> &...
JavaScript navigator.userAgent obtains browser information case explanation
The browser is probably the most familiar tool fo...
Detailed explanation of CocosCreator project structure mechanism
Table of contents 1. Project folder structure 1. ...
Using vue3+threejs to imitate the iView official website big wave special effects example
Table of contents Preface 1. Rendering 2. Code 3....
CentOS installation mysql5.7 detailed tutorial
This article shares the detailed steps of install...
Detailed explanation of MySQL monitoring tool mysql-monitor
1. Overview mysql-monitor MYSQL monitoring tool, ...
How to implement real-time polygon refraction with threejs
Table of contents Preface Step 1: Setup and front...
Linux sftp command usage
Concept of SFTP sftp is the abbreviation of Secur...
Detailed explanation of 2 methods to synchronize network time in Linux/CentOS system
Due to hardware reasons, the machines may not kee...
CSS animation property usage and example code (transition/transform/animation)
During development, a good user interface will al...
MySQL database Load Data multiple uses
Table of contents Multiple uses of MySQL Load Dat...
Solve the problem of specifying udp port number in docker
When Docker starts a container, it specifies the ...
HTML optimization techniques you must know
To improve the performance of web pages, many dev...