Vue+ECharts realizes the drawing of China map and automatic rotation and highlighting of provinces
Achieve results
Complete code + detailed comments
<template>
<div class="echart">
<div class="content">
<div id="map_cn"></div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import 'echarts/map/js/china.js' //This step must be introduced export default {
data() {
return {
//Data in the map dataList: [
{
name: "South China Sea Islands",
value: 25,
},
{
name: "Beijing",
value: 71,
},
{
name: "Tianjin",
value: 52,
},
{
name: "Shanghai",
value: 14,
},
{
name: "Chongqing",
value: 50,
},
{
name: "Hebei",
value: 20,
},
{
name: "Henan",
value: 30,
},
{
name: "Yunnan",
value: 55,
},
{
name: "Liaoning",
value: 50,
},
{
name: "Heilongjiang",
value: 40,
},
{
name: "Hunan",
value: 6,
},
{
name: "Anhui",
value: 96,
},
{
name: "Shandong",
value: 75,
},
{
name: "Xinjiang",
value: 45,
},
{
name: "Jiangsu",
value: 15,
},
{
name: "Zhejiang",
value: 8,
},
{
name: "Jiangxi",
value: 78,
},
{
name: "Hubei",
value: 78,
},
{
name: "Guangxi",
value: 36,
},
{
name: "Gansu",
value: 25,
},
{
name: "Shanxi",
value: 140,
},
{
name: "Inner Mongolia",
value: 85,
},
{
name: "Shaanxi",
value: 85,
},
{
name: "Jilin",
value: 74,
},
{
name: "Fujian",
value: 20,
},
{
name: "Guizhou",
value: 74,
},
{
name: "Guangdong",
value: 47,
},
{
name: "Qinghai",
value: 45,
},
{
name: "Tibet",
value: 41,
},
{
name: "Sichuan",
value: 3,
},
{
name: "Ningxia",
value: 7,
},
{
name: "Hainan",
value: 7,
},
{
name: "Taiwan",
value: 200,
},
{
name: "Hong Kong",
value: 2,
},
{
name: "Macao",
value: 5,
}
],
//Specify the chart's configuration items and data option: {
//Title component title: {
show: true,
text: 'Number of tourist attractions (rated) in each province of the country',
subtext: 'As of December 2021',
left: "center",
top: 16,
},
//Prompt box component tooltip: {
show: true,
//Trigger type: data item graphic trigger trigger: 'item',
padding: 10,
borderWidth: 1,
borderColor: '#409eff',
backgroundColor: 'rgba(255,255,255,0.4)',
textStyle: {
color: '#000000',
fontSize: 12
},
//prompt box content formatter: (e) => {
let data = e.data;
//Here the number of attractions of each level is expressed as a random integer between 0 and 10 data.five = Math.random() * 10 | 0;
data.four = Math.random() * 10 | 0;
data.three = Math.random() * 10 | 0;
data.two = Math.random() * 10 | 0;
data.one = Math.random() * 10 | 0;
//Number of attractions - the sum of five levels data.number = data.five + data.four + data.three + data.two + data.one;
// string template let context = `
<div>
<p style="line-height: 30px; font-weight: 600">${data.name}</p>
<p><span>Number of attractions: </span><span>${data.number}</span></p>
<p><span>Level 5A: </span><span>${data.five}</span></p>
<p><span>4A level: </span><span>${data.four}</span></p>
<p><span>Level 3A: </span><span>${data.three}</span></p>
<p><span>Level 2A: </span><span>${data.two}</span></p>
<p><span>Level 1A: </span><span>${data.one}</span></p>
</div>
`;
return context;
}
},
//Visual mapping component (lower left corner)
visualMap:
show: true,
left: 26,
bottom: 40,
showLabel: true,
// Whether to display the drag handle (the handle can be dragged to adjust the selected range)
calculable: false,
//Whether to update in real time when dragging realtime: true,
align: 'left',
//The areas represented by each color pieces: [
{
gte: 100,
label: "> 100",
color: "#FDB669"
},
{
gte: 50,
lt: 99,
label: "50 - 99",
color: "#FECA7B"
},
{
gte: 30,
lt: 49,
label: "30 - 49",
color: "#FEE191"
},
{
gte: 10,
lt: 29,
label: "10 - 29",
color: "#FFF0A8"
},
{
lt: 9,
label: '< 10',
color: "#FFFFBF"
}
]
},
//Geographic coordinate system component geo: {
//Map name registered using registerMap map: "china",
//Whether to enable mouse zoom and pan roam: true,
//Current perspective zoom ratio zoom: 1,
//Roller zoom limit control scaleLimit: {
min: 1, //minimum 1 times max: 3 //maximum 3 times},
//The distance between the map component and the container top: 90,
left: 'center',
//Text label on the graphic label: {
show: true,
fontSize: "11"
},
//Polygonal graphic style of the map area itemStyle: {
borderColor: "rgba(0, 0, 0, 0.2)",
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10,
//Polygon and label styles in highlighted state (after mouse moves in) emphasis: {
areaColor: "#f98333",
shadowOffsetX: 2,
shadowOffsetY: 2,
},
}
},
series: [
{
type: "map",
roam: true,
geoIndex: 0,
data: '',
label: {
show: true,
}
}
]
},
};
},
methods: {
//Define method draw_map to draw the map of China draw_map() {
let myChart = this.$echarts.init(document.getElementById('map_cn'));
//Highlight carousel display var hourIndex = 0;
var carouselTime = null;
//setInterval() can call a function or expression in a loop every specified number of milliseconds until clearInterval clears it. //After using the setInterval method, you must use an arrow function instead of writing function, otherwise the data in data cannot be called in the method later. //carouselTime = setInterval(function(){ //Wrong way to write carouselTime = setInterval(() => {
//dispatchAction echarts API: trigger chart behavior myChart.dispatchAction({
type: "downplay", //downplay cancels the highlighted data graph seriesIndex: 0
});
myChart.dispatchAction({
type: "highlight", //highlight the specified data graphics seriesIndex: 0, //series index
dataIndex: hourIndex //data index
});
myChart.dispatchAction({
type: "showTip", //showTip shows the prompt box seriesIndex: 0,
dataIndex: hourIndex
});
hourIndex++;
//After looping to the last data in the array, loop again if (hourIndex > this.dataList.length) {
hourIndex = 0;
}
}, 3000);
//Stop the carousel when the mouse moves into the componentmyChart.on("mousemove", (e) => {
clearInterval(carouselTime); //Clear loop myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex
});
});
//Resume the carousel when the mouse moves out of the componentmyChart.on("mouseout", () => {
carouselTime = setInterval(() => {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: hourIndex
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: hourIndex
});
hourIndex++;
if (hourIndex > this.dataList.length) {
hourIndex = 0;
}
}, 3000);
});
//Display the map myChart.setOption(this.option);
},
//Modify echart configuration setEchartOption() {
this.option.series[0].data = this.dataList;
},
},
created() {
this.setEchartOption();
},
mounted() {
this.$nextTick(() => {
this.draw_map();
});
}
};
</script>
<style scoped lang="less">
.echart {
width: 100%;
.content {
width: 95.8%;
height: 100px;
margin: auto;
#map_cn {
width: 65%;
height: 7rem;
background-color: #eaeaea;
margin: auto;
}
}
}
</style>Summary1. The difference between setTimeout() and setInterval() The setTimeout() method is used to call a function or calculate an expression after a specified number of milliseconds, and it is executed only once; setInterval() can call a function or expression in a loop every specified number of milliseconds until clearInterval clears it, and can be called multiple times. 2. After using the setInterval() method, you must use the arrow function form instead of the function If you use function, and then call the data in data in this method, such as console.log(this.dataList.length);, the following error will be reported (in fact, the data cannot be found);
This is because the this in fun(), (function(){ ... })() or callback function points to window by default, and the data you want to use cannot be found in window. We should change to arrow function form.
The above is the details of Vue+ECharts to achieve the drawing of China map and the automatic rotation and highlighting of provinces. For more information about Vue ECharts China map drawing, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Example of implementing a 16:9 rectangle with adaptive width and height using CSS
Recommend
Start nginxssl configuration based on docker
Prerequisites A cloud server (centOS of Alibaba C...
Implementation of Jenkins+Docker continuous integration
Table of contents 1. Introduction to Jenkins 2. I...
Quick solution for forgetting MySQL8 password
Preface When we forget the MySQL database passwor...
Install docker offline by downloading rpm and related dependencies using yum
You can use yum to install all dependencies toget...
Example of how to quickly delete a 2T table in mysql in Innodb
Preface This article mainly introduces the releva...
Detailed explanation of the difference between cesllspacing and cellpadding in table
What is a table? It is composed of cell cells. In...
Implementation of docker view container log command
Why should we read the log? For example, if the c...
7 Best VSCode Extensions for Vue Developers
Adding the right VS Code extension to Visual Stud...
Analysis of MySQL cumulative aggregation principle and usage examples
This article uses examples to illustrate the prin...
Detailed tutorial on deploying Apollo custom environment with docker-compose
Table of contents What is the Apollo Configuratio...
How to simulate enumeration with JS
Preface In current JavaScript, there is no concep...
How to solve the timeout during pip operation in Linux
How to solve the timeout problem when pip is used...
WeChat applet date and time component (year, month, day, hour, and minute)
This article example shares the specific code of ...
Detailed explanation of Angular parent-child component communication
Table of contents Overview 1. Overview of input a...
MySQL scheduled backup solution (using Linux crontab)
Preface Although some love in this world has a pr...