Echarts在线免费图表

 
            var scatterData = [
   {
      name: "荔湾",
      value: [113.243038, 23.124943, 5]
   },
   {
      name: "花都",
      value: [113.211184, 23.39205, 5]
   },
  
   {
      name: "天河",
      value: [113.335367, 23.13559, 5]
   },
   {
      name: "黄埔",
      value: [113.450761, 23.103239, 5]
   },
   {
      name: "南沙",
      value: [113.53738, 22.794531, 5]
   }
];
var mapJson = 'https://img.58h.com.cn/json-174193532210375.json';
var iconUrl = `https://img.58h.com.cn/image-174193538036398.png`;
var labelUrl = 'https://img.58h.com.cn/image-174193538036398.png'
var data3d = scatterData.map(el => {
   return {
      name: el.name,
      value: el.value,
   }
});
var labelData = scatterData.map(el => {
   return {
      name: el.name,
      value: el.value,
      symbol: "pie",
      itemStyle:{
         color:"transparent",
      },
      label: {
         show: true,
         formatter(params) {
            return params.name;
         },
      },
   };
})

option = {
   backgroundColor: "#fff",
   tooltip: {
      show: true, // 提示框
      trigger: "item",
      formatter: function (params) {
         return params.name;
      },
   },
   geo3D: {
      show: true,
      map: "centerMap",
      left: "0%",
      roam: true,
      regionHeight: 5,
      itemStyle: {
         // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
         color: "#0a599f", // 地图板块的颜色
         opacity: 1, // 图形的不透明度 [ default: 1 ]
         borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
         borderColor: "#377CC5", // 图形描边的颜色。[ default: #333 ]
         areaColor:"#2D5F9F",
      },
      emphasis: {
         label: {
            show: false,
            color: "#fff000",
         },
        
      },
      regions: [],
   },
   series: [
      {
         type: "scatter3D",
         coordinateSystem: "geo3D",
         data: data3d,
         symbol: "circle",
         symbolSize: 20,
         itemStyle: {
            color: "transparent",
         },
         label: {
            show: true,
            position: "top",
            distance: -20,
            formatter(params) {
               return "2";
            },

            textStyle: {
               color: "transparent",
               padding: [15, 20],
               backgroundColor: {
                  image: iconUrl,
               },
            },
         },
         emphasis: {
            label: {
               show: true,
               textStyle: {
                  backgroundColor: {
                     image: iconUrl,
                  },
               },
            },
         },

      },
      // {
      //    type: "scatter3D",
      //    coordinateSystem: "geo3D",
      //    data: labelData,
      //    label: {
      //       show: false,
      //       position: "top",
      //       distance: -1,
      //       textStyle: {
      //          color: "#ffffff",
      //          backgroundColor: {
      //             // image: labelUrl
      //          },
      //          padding: [10, 10, 20, 10],
      //          borderWidth: 1,
      //          borderRadius: 6,
      //       },
      //    },
      // },
   ],
}

myChart.showLoading();


$.getJSON(mapJson, function (geoJson) {
   scatterData = geoJson.features.map(el => {
      return {
         name: el.properties.name,
         value: el.properties.center
      }
   })
   echarts.registerMap('centerMap', geoJson);
   myChart.hideLoading();

   var mapFeatures = echarts.getMap("centerMap").geoJson.features;
   var geoCoordMap = {};
   mapFeatures.forEach(function (v) {
      // 地区名称
      var name = v.properties.name;
      // 地区经纬度
      geoCoordMap[name] = v.properties.center;
   });

   myChart.setOption(option);
});