Echarts在线免费图表

 
            let mapJson = 'https://img.58h.com.cn/json-17419352519692.json';
let option = {};
$.getJSON(mapJson, (result) => {
   echarts.registerMap('HUMAP', result);

   let chartOption = {
      visualMap: {
         type: 'continuous',
         showLabel: true,
         left: '50',
         min: 0,
         inRange: {
            color: ['#0B3B79', '#146fd7']
         }
      },
      tooltip: {
         show: false
      },
      geo: {
         show: true,
         map: 'HUMAP',
         selectedMode: 'single',
         zoom: result.scale || 1,
         roam: false,
         label: {
            normal: {
               show: false, // 省份名展示
               color: '#FFF',
            },
            emphasis: {
               show: false
            }
         },
         itemStyle: {
            normal: {
               borderColor: '#2FB5FA',
               borderWidth: 2,
               shadowColor: '#01273F',
               shadowOffsetX: 0,
               shadowOffsetY: 10
            }
         }
      },
      series: [
         {
            name: 'light',
            zlevel: 30,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: null,
            symbolSize: [8, 4],
            encode: {
               value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
               brushType: 'stroke',
               color: '#0efacc',
               period: 9,
               scale: 5
            },
            label: {
               show: true,
               color: '#FFF',
               formatter: '{b}',
               offset: [0, -12]
            },
            hoverAnimation: true,
         },
         {
            type: 'map',
            zlevel: 20,
            map: 'HUMAP',
            roam: false,
            zoom: result.scale || 1,
            showLegendSymbol: false, // 存在legend时显示
            label: {
               show: false,
            },
            itemStyle: {
               normal: {
                  borderColor: '#2FB5FA',
                  borderWidth: 2
               },
               emphasis: {
                  areaColor: '#2C7FD6',
                  label: {
                     show: false
                  }
               }
            },
            data: null
         },
      ]
   }
   const dealWithData = (data) => {
      return data.features.map(item => {
         return {
            name: item.properties.name,
            value: Math.round(Math.random() * 100),
            centroid: item.properties.centroid,
            adcode: item.properties.adcode,
         }
      })
   }
   let dataValue = dealWithData(result);
   chartOption.series[1].data = dataValue;
   chartOption.series[0].data = dataValue.map(item => {
      return {
         name: item.name,
         value: item.centroid ? item.centroid.concat(item.value) : item.centroid,
         itemStyle: {
            normal: {
               color: '#0efacc'
            }
         },
         adcode: item.adcode,
      }
   })
   option = chartOption
   myChart.setOption(chartOption);
})