Echarts在线免费图表

 
            var option = {
    series: [
      {
        type: 'map3D',
        name: 'china',
        map: 'map',
        zlevel: 3,
        // 相对于父容器比例
        center: ['50%', '50%'],
        selectedMode: 'single', // 地图高亮单选
        regionHeight: 4, // 地图高度
        instancing: true,
        viewControl: {
          // 缩放大小，数值越大，地图越小
          distance: 87,
          // 上下倾斜角度
          alpha: 100,
          // rotateSensitivity: [1, 1],
          // 左右倾斜角度
          beta: 0,
          rotateSensitivity: 1,
          rotateMouseButton: 'right',
          //平移操作，值越大越灵敏，0时不可平移
          panSensitivity: 1,
          panMouseButton: 'left',
        },
        label: {
          show: true,
          fontSize: 14,
          color: 'white',
          borderColor: 'white',
          fontFmaily: 'PingFang SC',
          fontWeight: 'normal',
          fontStyle: 'normal',
          formatter: (params) => {
            return params.name ? params.name : ' '
          }, // 使用地理名称作为标签
        },
        itemStyle: {
          color: '#8A9AE5', // 地图背景颜色
          borderWidth: 1, // 分界线wdith
          borderColor: '#21266A', // 分界线颜色
        },
        shading: 'color', //阴影颜色不受光照影响
        emphasis: {
          label: {
            show: true,
            color: '#fff',
            fontSize: 14,
            fontFmaily: 'PingFang SC',
            fontWeight: 'normal',
            fontStyle: 'normal',
          },
          itemStyle: {
            color: '#16C3AF', // 地图高亮颜色
          },
        },
        data: [],
      },
    ]
};
const url = 'https://asset.mjrooo.com/json-174193202387006.json';
$.get(url, (json) => {
   creatMap(json);
})
const creatMap = (data) => {
   echarts.registerMap('map', data)
   option.series[0].data = data.features.map((item) => {
      return {
         name: item.properties.name,
         value: item.properties.center || item.properties.cp, // 中心点经纬度
         adcode: item.properties.adcode, // 区域编码
         level: item.properties.level, // 层级
         data: (Math.random() * 80 + 20).toFixed(0), // 模拟数据
      }
   })
   myChart.setOption(option);
   myChart.on('click', (e) => {
      console.log(e, '111')
   })
   myChart.getZr().on('click', (e) => {
      console.log(e, '222')
   })
}