The boss let me make a 3D map I will take a look look ~~~~
1. Since the previous projects were based on Echarts and echarts-GL page just supports 3D, I chose Echarts-GL as my training project
2. All the technology stacks I have chosen are: Vue Echarts ECharts-GL
Install Vue and Echarts
1. Many people are a little blind with ehcarts installed in Vue, let alone making 3D carts on VUE. Today I will show you how to install and initialize a 3D map using ECharts-GL. NPM I echarts –save NPM I echarts — gl –save 3 Quote echarts and echarts-GL doing something in main.js
import echarts from 'echarts';
import 'echarts-gl'
Vue.prototype.$echarts = echarts
Copy the code4. A lot of people say that Echarts doesn’t support maps anymore that’s because you didn’t find beauty eye introduced in your page
require('.. /.. /node_modules/echarts/map/js/china')
Map a message on your node_modules/echarts/map/China
Now that your Echarts and Echarts-GL are ready to use, let’s get into programming
Initialize the ECharts-GL 3D map
1. Create an option.js file. This file is used to store configuration items
- The configuration page code is as follows (mainly the location identification and color styles of the 3D map)
Var geoCoordMap = {geoCoordMap = {geoCoordMap = {'Heilongjiang': [127.9688, 45.368].Inner Mongolia: [110.3467, 41.4899]."Jilin": [125.8154, 44.2584].'Beijing': [116.4551, 40.2539]."Liaoning": [123.1238, 42.1216]."Hebei": [114.4995, 38.1006]."Tianjin": [117.4219, 39.4189]."Shanxi": [112.3352, 37.9413]."Shaanxi": [109.1162, 34.2004]."Gansu": [103.5901, 36.3043]."The ningxia": [106.3586, 38.1775]."Qinghai": [101.4038, 36.8207]."Xinjiang": [87.9236, 43.5883]."Tibet": [91.11, 29.97]."Sichuan": [103.9526, 30.7617]."Chongqing": [108.384366, 30.439702]."Shandong": [117.1582, 36.8701]."Henan": [113.4668, 34.6234]."Jiangsu": [118.8062, 31.9208]."Anhui province": [117.29, 32.0581]."Hubei": [114.3896, 30.6628]."Zhejiang": [119.5313, 29.8773]."Fujian": [119.4543, 25.9222]."Jiangxi": [116.0046, 28.6633]."Hunan": [113.0823, 28.2568]."Guizhou": [106.6992, 26.7682]."Yunnan": [102.9199, 25.4663]."Guangdong": [113.12244, 23.009505]."Guangxi": [108.479, 23.1152]."Hainan": [110.3893, 19.8516].'Shanghai': [121.4648, 31.2891]}; var chinaDatas = [ [{ name:'Heilongjiang',
value: 100
}],
[{
name: Inner Mongolia,
value: 300
}],
[{
name: 'jilin',
value: 300
}],
[{
name: 'the liaoning',
value: 300
}],
[{
name: 'hebei',
value: 300
}],
[{
name: 'tianjin',
value: 300
}],
[{
name: 'the shanxi',
value: 300
}],
[{
name: 'the shaanxi',
value: 300
}],
[{
name: 'gansu',
value: 300
}],
[{
name: 'the ningxia',
value: 300
}],
[{
name: 'the qinghai',
value: 300
}],
[{
name: 'the xinjiang',
value: 300
}],
[{
name: 'Tibet',
value: 300
}],
[{
name: 'sichuan',
value: 300
}],
[{
name: 'chongqing',
value: 300
}],
[{
name: 'shandong',
value: 300
}],
[{
name: 'henan',
value: 300
}],
[{
name: 'jiangsu',
value: 300
}],
[{
name: 'anhui',
value: 300
}],
[{
name: 'hubei',
value: 300
}],
[{
name: 'zhejiang',
value: 300
}],
[{
name: 'fujian',
value: 300
}],
[{
name: 'jiangxi',
value: 300
}],
[{
name: 'in hunan province',
value: 300
}],
[{
name: 'guizhou',
value: 300
}],
[{
name: 'the guangxi',
value: 300
}],
[{
name: 'hainan',
value: 300
}],
[{
name: 'Shanghai', value: 1300 }] ]; Echarts var convertData =function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i][0].name];
if(geoCoord) { res.push({ name: data[i][0].name, value: geoCoord.concat(data[i][0].value) }); }}returnres; }; // Specify the configuration and output itexport default {
backgroundColor: '#fff',
geo3D: {
data: convertData(chinaDatas),
map: 'china',
color: '#fff',
roam: true// Enable mouse zooming and panning. This function is disabled by default. itemStyle: { areaColor:'rgba(255,255,255,1)',
opacity: 1,
borderWidth: 1,
borderColor: '# 000'}, // Color configuration for each province on the map label: {show:false},// Whether the cursor is displayed, displays the configured emphasis: {// The state of the cursor when it is placed.true
},
itemStyle: {
color: '# 000'
}
},
tooltip: 'axis'// Set formatter: val => {returnVal}, /** label content formatter, support string template and callback function two forms, string template and callback function return string support \n newline. **/ // legendHoverLink:true,
regions: [{
name: 'shandong',
itemStyle: {
color: '# 000',
opacity: 1,
},
label: {
show: true},}],// Default highlight area}, series: [{name:'light'.type: 'scatter3D', // symbol:'pin'// Scatter shape. The default is circle. coordinateSystem:'geo3D',
data: convertData(chinaDatas),
symbolSize: function() {
return 36
},
label: {
show: false
},
itemStyle: {
normal: {
color: '#f00'}}, zlevel: 6, Emphasis: {// Whether to display the name of the region when the mouse is placed on it.false
},
itemStyle: {
color: '# 000'}},},]};Copy the codeOption import option from ‘your option address’ 4.
Added timed highlighting events and click events
1. Timer code (how to highlight the key is to change the name attribute of regions in geo) and then move
let regions = setInterval(function() {
option.geo3D.regions[0].name = option.geo3D.data[count].name
myChart.setOption(option);
count ++
if (count === option.geo3D.data.length) {
count = 0
}
}, 1000);
Copy the code2. Click events
myChart.on('click'.function(params){ clearInterval(regions) console.log(params) count = params.dataIndex option.geo3D.regions[0].name = params.name myChart.setOption(option); });Copy the code3. Double-click the restart timer event
myChart.getZr().on('dblclick'.function(params) {
regions = setInterval(function() {
option.geo3D.regions[0].name = option.geo3D.data[count].name
console.log(count)
myChart.setOption(option);
count ++
if (count === option.geo3D.data.length) {
count = 0
}
}, 1000);
});
Copy the code4. Actually, if it works in 2D
myChart.dispatchAction({
type: 'highlight', // optional seriesIndex, can be an array specifying multiple seriesIndex? : number / | Array, / / optional, the name of the series, can specify multiple series seriesName is an Array? : string | Array, / / optional, data index dataIndex? : number, // Optional, data name name? : string })Copy the codeUnfortunately, 3D does not support these apis
### ## Echarts-GL 3D map of the problem ###
It can only use getZr() to get clicks and only the information returned is the mouse over the screen x, Y on the left You can also use echartsInstance convertFromPixel to conversion But the conversion formula and code of time maybe longer than you write So I gave up
You can also use ecahRS-GL version 1.0.0 beta-6 to do this. This version can bind the click time directly, but Radeon highlighting cannot be set… It would be better to import his source code directly and replace import ‘echarts-gl’ with import ‘.. /node_modules/echarts-gl/dist/echarts-gl.js’;
Other times like highlighting and double-clicking and so on and so on in the 3D map it surprised me and I had to castrate my map and I was hoping the author would change it
And I want to change a source code but found that beta5 to beta6 version of the change is too much to do at the same time also hope that the community can provide valuable advice to solve such a BUG
Thank you for watching ~~~ love you
