echarts 3D地图

Posted 2020-11-15 caoxen

<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)
})