echars 3D map solution for custom colors of regions
questionAccording to the project requirements, we want to highlight (different colors) individual cities in the provincial map below
extendFirst, let me introduce how this map is displayed:
Of course, his implementation is very simple First we need to initialize echarts let echartsMap = this.$echarts.init(this.$refs.echartsMap); Register Map
this.$echarts.registerMap('河南', dataGeoLocation);
//The dataGeoLocation at the back is the map json file we downloaded and then introduced into the current //component for use, and the Henan at the front is the map we want to registerSet the option object The configuration here is based on your own project requirements. You can read the documents for detailed introduction.
this.echartsDataMap = {
visualMap:
min: 0,
max: 500,
show: false,
inRange: {
color: ['#eac736', '#6EAFE3'].reverse()
},
},
globeRadius: 100,
globeOuterRadius: 100,
geo3D:
map: mapName,
viewControl: {
center: [0, 0, 0],
alpha: 100, //Up and down rotation anglebeta: 10, //Left and right rotation angleanimation: true, //Whether to display animationDurationUpdate: 1000, //Animation timedistance: 130, //Distance from view to subjectminBeta: -9999, //Minimum (left) rotation degreemaxBeta: 9999, //Maximum (right) rotation angleautoRotate: false,
autoRotateDirection: 'cw',
autoRotateSpeed: 10,
},
splitArea:{
areaStyle:{
color:'red',
}
},
light:
main: {
intensity: 1.2,
// color: 'transparent',
color: '#0D3867',
shadowQuality: 'ultra',
shadow: true,
alpha: 150,
beta: 200
},
ambient:
intensity: 1, //ambient light intensity},
ambientCubemap:
diffuseIntensity: 1,
texture: ''
}
},
groundPlane:
show:false
},
postEffect: {
enable: false
},
itemStyle: {
color: '#175096',
borderColor: 'rgb(62,215,213)',
opacity: 0.8, //transparency borderWidth: 1
},
label: {
show:false
},
emphasis:
label: {
show:false
},
itemStyle: {
}
},
silent: false, // Do not respond to or trigger mouse events},
series: [
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
data: this.areaName
symbol: 'circle',
symbolSize: 0,
silent: false, // Do not respond to or trigger mouse events itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
distance: 30,
show: true,
formatter: '{b}',
position: 'bottom',
bottom: '100',
textStyle: {
color: '#fff',
marginTop: 40,
fontSize: 16,
// fontWeight:'bold',
backgroundColor: 'transparent',
}
}
},
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
data: pinArr,
color: '#6EAFE3',
symbol: 'pin',
symbolSize: 56,
symbolOffset: ['100%','50%','0'],
silent: false, // Do not respond to or trigger mouse events itemStyle: {
textAlign: 'center',
borderColor: '#6EAFE3',
backgroundColor: '#6EAFE3',
borderWidth: 0
},
zlevel: -10,
label: {
show: true,
distance: -45,
// left: -10,
position: 'bottom',
formatter: (data) => {
return data.value[3] + ' ';
},
textStyle: {
color: '#333',
backgroundColor: 'transparent'
}
}
},
]
};
Put the option instance on our echarts echartsMap.setOption(this.echartsDataMap); Solving the problemLet's look back at the problem at the beginning of the article. I found many ways on Baidu, but after trying, it seems that there is no effect. In fact, I was able to solve it after improving it according to the methods provided on the Internet.
This is a more reliable method I found among many methods. Here he said to add regions in geo. In fact, it is like this, but it didn't work after I added it. The reason is that mine is geo3D and his is geo, but it's not a big problem. After trying three times, I finally found that they just have different writing methods.
regions:
{
name: 'Zhengzhou City', /
itemStyle: {
color: 'green'
}
},{
name: 'Nanyang City',
itemStyle: {
color: 'green'
}
},{
name: 'Shangqiu City',
itemStyle: {
color: 'green'
}
}]
We just need to correct the color setting and add it to our geo3D.
SummarizeThis is the end of this article about echars 3D map custom colors for areas. For more relevant echars 3D map custom colors 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:
|
<<: Graphic tutorial on installing Ubuntu 18.04 on VMware 15 virtual machine
>>: Example analysis of mysql non-primary key self-increment usage
Recommend
Using js to implement simple switch light code
Body part: <button>Turn on/off light</bu...
How to create a table by month in MySQL stored procedure
Without going into details, let's go straight...
Detailed explanation of the use and difference between relative and absolute in HTML
The difference between relative and absolute in H...
Detailed steps to install Docker mongoDB 4.2.1 and collect springboot logs
1: Install mongodb in docker Step 1: Install mong...
How to change the Ali source in Ubuntu 20.04
Note that this article does not simply teach you ...
How to detect file system integrity based on AIDE in Linux
1. AIDE AIDE (Advanced Intrusion Detection Enviro...
Interpretation of Vue component registration method
Table of contents Overview 1. Global Registration...
How does Vue track data changes?
Table of contents background example Misconceptio...
How to use a field in one table to update a field in another table in MySQL
1. Modify 1 column update student s, city c set s...
Install Python 3.6 on Linux and avoid pitfalls
Installation of Python 3 1. Install dependent env...
Download and install VSCode on Linux and use programming to output the current time
Which parameter does the rpm command use to insta...
The implementation process of long pressing to identify QR code in WeChat applet
Preface We all know that the QR codes in official...
Optimize the storage efficiency of BLOB and TEXT columns in InnoDB tables
First, let's introduce a few key points about...
Using VMware IOInsight to perform refined virtual machine storage performance monitoring
illustrate: VMware IOInsight is a tool that helps...
Vue3 realizes the image magnifying glass effect
This article example shares the specific code of ...