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
Detailed tutorial on installing MySQL database in Linux environment
1. Install the database 1) yum -y install mysql-s...
Example analysis of the principle and solution of MySQL sliding order problem
This article uses examples to explain the princip...
Example of using Nginx to implement port forwarding TCP proxy
Table of contents Demand Background Why use Nginx...
How to install phabricator using Docker
I am using the Ubuntu 16.04 system here. Installa...
HTML implements a fixed floating semi-transparent search box on mobile
Question. In the mobile shopping mall system, we ...
Instructions for using the --rm option of docker run
When the Docker container exits, the file system ...
What to do if you forget the root password of Mysql5.7 (simple and effective method)
In the previous article, we introduced how to for...
CentOS 7 switching boot kernel and switching boot mode explanation
centos7 switch boot kernel Note: If necessary, it...
JavaScript implements displaying a drop-down box when the mouse passes over it
This article shares the specific code of JavaScri...
Use JS to zoom in and out when you put the mouse on the image
Use JS to zoom in and out when the mouse is on th...
The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked
Three functions: 1. Automatic vertical centering o...
Unable to define IE6 font: 13px size is invalid, IE6 automatically displays a larger font solution
A few days ago, when I was adjusting a module of a...
Example of adding attributes using style in html
Add inline styles to the required links: Copy code...
Detailed explanation of the basic use of Apache POI
Table of contents Basic Introduction Getting Star...
Detailed explanation of the difference and usage of quotes and backticks in MySQL
Preface So I wrote this blog. This blog also reco...