Проект визуализации на большом экране - карта странствий Ли Бая

Этот проект является учебным проектом для обучения визуализации внешнего интерфейса, имитируя производство проектов с открытым исходным кодом. Используемые стеки технологий: React, ReactRouter, Echarts.

Сначала укажите адрес предварительного просмотра:Нажмите, чтобы посмотреть эффект

превью гифки:

Адаптировать к экрану

алгоритм

Wp — эффективная ширина страницы, а Hp — эффективная высота страницы.

Страница центрирована слева и справа, сверху и снизу.

Если страница宽/高>16/9, оставьте поле пустым. Если страница宽/高16/9, оставьте поле пустым.

использовать рем

#установить рем

существуетheadнастройки

Получите ширину и высоту устройства, а также ширину и высоту страницы.

const clientWidth = document.documentElement.clientWidth // 得到设备宽度
const clientHeight = document.documentElement.clientHeight // 得到设备高度
const pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientHeight; // 定义页面宽度
const pageHeight = pageWidth / (16 / 9) // 定义页面高度

Установить 1рем = Wp / 100

const string = `<style>html{font-size: ${pageWidth/100}px}</style>`
document.write(string)

# Выразить ширину страницы с помощью rem

предположимdivДлина эскиза дизайна составляет 100 пикселей, а общая ширина эскиза дизайна — 2420 пикселей. затемdivна странице, пока100 / 1920 * 100rem.

#px()функция

По приведенной выше формуле создайте новыйpx.tsфайл, объявляющий глобальные функцииpx()И экспортируйте его, вы можете использовать его с удовольствиемpx(设计稿像素)охватывать

export const px = (n) => n / 2420 * (window as any).pageWidth;

Макет страницы

В макете страницы используетсяGridМакет, т.к. макет Grid очень удобен, с "вырезанной" адаптацией проекта.

код напрямую

// tsx
<div className="home">
  <main>
    <section className="section1">
      <Chart1/>
      <Chart2/>
      <Chart3/>
    </section>
    <section className="section2">
      <Chart4/>
      <Chart5/>
      <Chart6/>
    </section>
    <section className="section3">
      <Chart7/>
      <Chart8/>
      <Chart9/>
    </section>
  </main>
</div>

// scss
.home {
  flex: 1;
  display: flex;
  flex-direction: column;

  > main {
    width: px(2420);
    margin: 0 auto;
    padding: px(74) px(70) px(70) px(70);
    flex: 1;
    display: grid;
    grid-template:
      "box1 box2 box3" 1219fr / 557fr 1133fr 557fr;
    grid-column-gap: px(19);
    grid-row-gap: px(19);

    > section {
      text-align: center
    }

    > .section1 {
      grid-area: box1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    > .section2 {
      grid-area: box2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    > .section3 {
      grid-area: box3;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

echarts

Используя библиотеку диаграмм echarts, основной справочникОфициальное руководство по настройкеа такжеПамятка по терминологии

исходный код диаграммы 1, в качестве примера возьмем модуль chart1, в основном используемыйuseEffect.

Карта точек доступа

В официальном примере используется карта Baidu, но, учитывая общий эффект, я нашел ее в Интернете.Карта Китая с удаленным Южно-Китайским морем, конечно нужно отметитьКарта показывает только частичную область Китая.

Обратитесь к официальной документацииgeo,существуетgeoЛейтенант зарегистрирует карту json'CN'установить какmap.

существуетseruesустановить вcoordinateSystem: 'geo', вы можете использовать его.

Официальный пример Ecahrts — качество воздуха в крупных городах страны — карта Baidu

# echarts объединяет гео, чтобы нарисовать тепловую карту карты

Обновляйте данные в режиме реального времени

Также очень просто реализовать обновление данных, достаточно сбросить настройки электронных карт.

Еще возьмем в качестве примера chart1, поставим процесс переписывания кода.

// 改写前

export const Chart1 = () => {
  const divRef = useRef(null);
  useEffect(() => {
    var myChart = echarts.init(divRef.current);
    myChart.setOption({
        ...
        ...
    })
  },[])
  return(
    ... // 写js
  )
  }

// 改写后

export const Chart1 = () => {
  const divRef = useRef(null);
  const myChart = useRef(null);
  const data = [
    {value: 15, name: '华东'},
    {value: 14, name: '华南'},
    {value: 13, name: '华北'},
    {value: 12, name: '西南'},
    {value: 11, name: '西北'},
    {value: 10, name: '东北'},
  ]

  useEffect(() => {
    setInterval(() => {
      const newData = [
        {value: 2 + Math.round(Math.random() * 15), name: '华东'},
        {value: 2 + Math.round(Math.random() * 15), name: '华南'},
        {value: 2 + Math.round(Math.random() * 15), name: '华北'},
        {value: 2 + Math.round(Math.random() * 15), name: '西南'},
        {value: 2 + Math.round(Math.random() * 15), name: '西北'},
        {value: 2 + Math.round(Math.random() * 15), name: '东北'},
      ];
      x(newData)
    },1000)
  },[])

  const x = (data) => {
    myChart.current.setOption(({
      ...
      ...
    }))
  }

  useEffect(() => {
    myChart.current = echarts.init(divRef.current);
    x(data)
  }, []);

  return(
      ... // 写js
  )
  }