echarts 3D地图

Posted caoxen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts 3D地图相关的知识,希望对你有一定的参考价值。

<script src="js/map/shandong.js"></script>

var
maps = echarts.init(document.getElementById(‘map‘)); var option = { tooltip: { formatter: function(params) { var content = ‘‘, content = params.name + ‘<br>‘ + params.value[0] + params.value[1]; return content; } }, backgroundColor: ‘#040f3c‘, visualMap: { show: false, min: 0, max: 300, inRange: { color: [‘#e0ffff‘, ‘#006edd‘] }, calculable: true }, series:[{ name: ‘山东‘, type: ‘map3D‘, map: ‘山东‘, data: [{name: ‘青岛市‘, value: [222, ‘GDP‘]}], regionHeight: 2, top: ‘10%‘, label: { show: true, formatter:function (params) { var content = ‘‘, content = params.name; return content; }, textStyle: { color: ‘#fff‘, fontWeight: ‘normal‘, fontSize: 12, backgroundColor: ‘rgba(0, 0, 0, 0)‘ }, emphasis: { //鼠标悬浮效果 show: true, textStyle: {color: ‘#f00‘} } }, itemStyle: { normal: {borWidth: 0.4}, emphasis: {color: ‘rgb(255,255,255)‘} //地图板块颜色 }, viewControl: { autoRotate: false, // 自动旋转 distance: 70 } }] } maps.setOption(option) maps.on(‘click‘, function (params) { console.log(parmas) })

 

以上是关于echarts 3D地图的主要内容,如果未能解决你的问题,请参考以下文章

Echarts立体地图加3D柱图可点击可高亮选中的开发

2021-06-06在vue中使用 echarts3d地图

ECharts之类型3D(map,bar3D,scatter3D)

echarts图表——3d

echarts 3d地图-成都

有大神会做echarts 3D省级地图的鼠标点击事件吗,求指教?