全国主要城市空气质量

示例

结果

Loading...

实时编辑器

function render(props) {
  const container = useRef(null);

  const data = useBaseUrl('/json/scatter.json');

  const initChat = (map, option) => {
    const chart = new EChartsLayer(option, {
      stopEvent: false,
      hideOnMoving: true,
      hideOnZooming: true,
    });

    chart.on('load', (data) => {
      data.value.on('click', (event) => {
        console.log('click', event);
      });

      data.value.on('dblclick', (event) => {
        console.log('dblclick', event);
      });

      data.value.on('mousedown', (event) => {
        console.log('mousedown', event);
      });

      data.value.on('mousemove', (event) => {
        console.log('mousemove', event);
      });

      data.value.on('mouseup', (event) => {
        console.log('mouseup', event);
      });

      data.value.on('mouseover', (event) => {
        console.log('mouseover', event);
      });

      data.value.on('mouseout', (event) => {
        console.log('mouseout', event);
      });

      data.value.on('globalout', (event) => {
        console.log('globalout', event);
      });

      data.value.on('contextmenu', (event) => {
        console.log('contextmenu', event);
      });
    });

    chart.appendTo(map);
  }

  const init = () => {
    const map = new ol.Map({
      target: container.current,
      view: new ol.View({
        center: [113.53450137499999, 34.44104525],
        projection: 'EPSG:4326',
        zoom: 5, // resolution
        rotation: 0,
      }),
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
          }),
        }),
      ],
    });

    fetch(data).then(res => res.json()).then(res => {
      const data = res.locations;
      const geoCoordMap = res.coordinates;
      const convertData = (_data) => {
        const _res = [];
        for (let i = 0; i < _data.length; i++) {
          const geoCoord = geoCoordMap[_data[i].name];
          if (geoCoord) {
            _res.push({
              name: _data[i].name,
              value: geoCoord.concat(_data[i].value),
            });
          }
        }
        return _res;
      };
      const option = {
        title: {
          text: '全国主要城市空气质量',
          subtext: 'data from PM25.in',
          sublink: 'http://www.pm25.in',
          left: 'center',
          textStyle: {
            color: '#fff',
          },
        },
        tooltip: {
          trigger: 'item',
        },
        openlayers: {},
        legend: {
          orient: 'vertical',
          y: 'top',
          x: 'right',
          data: ['pm2.5'],
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            name: 'pm2.5',
            type: 'scatter',
            data: convertData(data),
            symbolSize(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#ddb926',
              },
            },
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            data: convertData(data.sort((
              a,
              b,
            ) => b.value - a.value).slice(0, 6)),
            symbolSize(val) {
              return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            zlevel: 1,
          }],
      };

      initChat(map, option);
    })

    function resize(target) {}

    return {
      resize,
    }
  }

  useEffect(() => {
    const { resize } = init();

    return () => {
    };
  }, []);

  return (
    <div className="live-wrap">
      <div ref={container} className="map-content" />
    </div>
  );
}