This link: https://blog.csdn.net/zhai_865327/article/details/82983489
In fact, under normal circumstances 2D flat maps enough to use, but more beautiful and to highlight the effect, we need to show 3D
Renderings:
<div class="box" style="height: 700px;width: 100%;margin: auto">
<div id="container" style="height: 700px"></div>
</div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=AOYt7bbAGAh7CTgODH53V579ESQPivmn"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script>
var dom = document.getElementById("container");
was myChart = echarts.init (judgment);
was app = {}, option = null;
myChart.setOption({
backgroundColor: 'rgba (0,0,0,0)', // canvas background color
// environment: './img/star.jpg',// BACKGROUND skymap
geo3D: {// map specific parameters
map: 'china', // map range
// shading: 'lambert', // bring light and dark
light: {// light-related settings. In the shading is invalid 'color' time.
main: {// set the scene for the main light source
intensity: 10, // is the intensity of the primary light source
shadow: true, // whether the primary light source casts shadows
shadowQuality: quality 'high', // shadow
alpha: 30, // primary source about the x-axis offset angle
beta: 190 // main light source about the y-axis offset angle
},
ambient: {// global environment light setting.
0 // intensity of ambient light: intensity
}
},
viewControl: {// for rotation mouse scaling viewing angle control
distance: 88, // default from the perspective of distance to the subject
panMouseButton: mouse button 'left', // used in the panning operation
rotateMouseButton: 'right', the rotational operation of the mouse button used //
alpha: 50 // canvas Let the x-axis has a certain inclination angle
},
postEffect: {// add a screen highlight, depth of field, ambient light shielding (of SSAO), the toner and other effects
enable: true, // whether to open
SSAO: {// ambient light shielding
radius: 1, // sampling ambient light shielding radius. The larger the radius more natural effect
intensity: 1, // is the intensity of ambient light shielding
enable: true
}
},
temporalSuperSampling: {// oversampling sub-frame. After opening postEffect, WebGL default MSAA will not be used, sub-frame super-sampling to solve the problem of sawtooth
enable: true
},
itemStyle: {// three-dimensional graphic visual attributes
color:'#2355ac',
borderWidth:0.5,
borderColor:'#000'
},
Height 2 // region: regionHeight
series: []
}
});