Echarts在线免费图表

 
            let mapJson = 'https://img.58h.com.cn/json-174193579291307.json';
let option = {};
$.getJSON(mapJson, (result) => {
   echarts.registerMap('mapData', result);
   let chartOption = {
      tooltip: {
         show: false
      },
      geo: {
         show: true,
         map: 'mapData',
         selectedMode: 'single',
         zoom: result.scale || 1,
         roam: false,
         label: {
            normal: {
               show: false, // 省份名展示
               color: '#FFF',
            },
            emphasis: {
               show: false
            }
         },
         itemStyle: {
            normal: {
               areaColor: '#0093E2',
               borderColor: '#2FB5FA',
               borderWidth: 2,
               shadowColor: '#01273F',
               shadowOffsetX: 0,
               shadowOffsetY: 10
            },
            emphasis: {
               areaColor: '#2C7FD6',
            }
         }
      },
      series: [
         {
            name: 'light',
            zlevel: 30,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: null,
            symbolSize: function (val) {
               return val ? val[2] / 10 : 0;
            },
            symbolOffset: ['-100%', '0'],
            encode: {
               value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
               brushType: 'stroke',
               color: '#0efacc',
               period: 9,
               scale: 5
            },
            hoverAnimation: true,
            itemStyle: {
               color: '#fff',
               shadowBlur: 2,
               shadowColor: '#333'
            }
         },
         {
            type: 'map',
            zlevel: 20,
            map: 'mapData',
            roam: false,
            zoom: result.scale ||1 ,
            showLegendSymbol: false, // 存在legend时显示
            label: {
               normal: {
                  show: true,
                  textStyle: {
                     color: '#fff'
                  }
               },
               emphasis: {
                  show: false,
                  textStyle: {
                     color: '#fff'
                  }
               }
            },
            itemStyle: {
               normal: {
                  areaColor: '#0B58BA',
                  borderColor: '#2FB5FA',
                  borderWidth: 2
               },
               emphasis: {
                  areaColor: '#2C7FD6',
               }
            },
            data: null
         },
         {
            name: 'scatter',
            zlevel: 30,
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'rect',
            symbolSize: function (value, params) {
               return [params.name.length * 16.67, 18]
            },
            data: null,
            itemStyle: {
               normal: {
                  color: 'transparent'
                  // color: '#fff'
               }
            },
            label: {
               normal: {
                  formatter: function (params) {
                     const name = 'm.' + params.name
                     if (this.$t(name).startsWith('m.')) {
                        return params.name
                     }
                     return this.$t(name)
                  }.bind(this),
                  show: false,
                  fontSize: 18,
                  color: '#fff',
                  fontWeight: 550,
               },
               emphasis: {
                  show: false,
                  fontSize: 20,
                  color: '#00DFFF',
               }
            }
         }
      ]
   }
   const dealWithData = (data) => {
      const actvieAreaCode = ["420100", "420800", "420700", "422800", "420900", "429004", "420300"];
      let temp = data.features.filter(item => {
         return actvieAreaCode.indexOf(item.properties.adcode.toString()) > -1
      })
      return temp.map(item => {
         let itemRate = actvieAreaCode.filter(code => code == item.properties.adcode)[0].coverRate;
         return {
            name: item.properties.name,
            value: item.properties.centroid,
            properties: item.properties,
            rate: itemRate,
            itemStyle: {
               areaColor: '#0093E2',
               borderColor: '#2FB5FA',
            }
         }
      })
   }
   let dataValue = dealWithData(result);
   chartOption.series[1].data = dataValue;
   chartOption.series[0].data = dataValue.map(item => {
      return {
         name: item.name,
         value: item.value ? item.value.concat(80) : item.value,
         itemStyle: {
            normal: {
               color: '#fff'
            }
         },
         adcode: item.properties.adcode,
         properties: item.properties,
         isDirectDistrict: item.properties.childrenNum === 0
      }
   })
   chartOption.series[2].data = dataValue.map(item => {
      let arr = item.value ? [item.value[0] + item.name.length * result.labelOffset, item.value[1]] : []
      return {
         name: item.name,
         value: arr,
         adcode: item.properties.adcode,
         properties: item.properties,
         isDirectDistrict: item.properties.childrenNum === 0
      }
   })
   option = chartOption
   myChart.setOption(chartOption);
})