折线图

示例

结果

Loading...

实时编辑器

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

  const dataUrl = useBaseUrl('/json/line.json');

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

    chart.appendTo(map);
  }

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

    const data = await fetch(dataUrl).then(res => res.json());

    const option = {
      xAxis: [],
      yAxis: [],
      grid: [],
      series: [],
      animation: false,
      // backgroundColor: ,
      title: {
        text: 'Inflation from 2006 to 2011',
        subtext: 'data from macrofocus',
        sublink: 'https://www.macrofocus.com/public/products/infoscope/datasets/pricesandearnings/',
        left: 'center',
        top: 5,
        itemGap: 0,
        textStyle: {
          color: '#eee',
        },
      },
      tooltip: {
        trigger: 'axis',
      },
    };
    const inflationStartIdx = 14;
    const inflationYearCount = 6;
    const inflationYearStart = '2006';
    const xAxisCategory = [];
    for (let i = 0; i < inflationYearCount; i++) {
      xAxisCategory.push(`${+inflationYearStart + i}`);
    }

    if (data.data) {
      data.data.forEach((dataItem, idx) => {
        const coordinates = data.geoCoordinates[dataItem[0]];
        idx += '';

        const inflationData = [];
        for (let k = 0; k < inflationYearCount; k++) {
          inflationData.push(dataItem[inflationStartIdx + k]);
        }

        option.xAxis.push({
          id: idx,
          gridId: idx,
          type: 'category',
          name: dataItem[0],
          nameStyle: {
            color: '#ddd',
            fontSize: 12,
          },
          nameLocation: 'middle',
          nameGap: 3,
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#bbb',
            },
          },
          data: xAxisCategory,
          z: 100,
        });

        option.yAxis.push({
          id: idx,
          gridId: idx,
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          axisLine: {
            lineStyle: {
              color: '#bbb',
            },
          },
          z: 100,
        });

        option.grid.push({
          id: idx,
          width: 30,
          height: 30,
          z: 100,
        });

        option.series.push({
          id: idx,
          type: 'line',
          xAxisId: idx,
          yAxisId: idx,
          data: inflationData,
          coordinates,
          z: 100,
        });
      })
    }

    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>
  );
}