TaroEcharts - Практика различных карт Таро

React.js
TaroEcharts - Практика различных карт Таро

С быстрым развитием React мы все больше и больше принимаем его стиль написания и идеи.В наше время небольшие программы в самом разгаре, и обычный режим компиляции уже не подходит для нужд разработчиков. Люди постоянно ищут языковой фреймворк, который React может компилировать в небольшие программы, так родился Taro. Сильнейший руководитель во вселенной. Он поддерживает использование методов разработки React для написания приложений, которые могут работать на нескольких платформах, таких как мини-программы WeChat, Web, React Native и т. д. одновременно. После непрерывного итеративного улучшения Таро возродился из пепла.

Введение в TaroEcharts

Этот проект представляет собой набор структур диаграмм, основанных на инкапсуляции ec-canvas и подходящих для версии Taro, обобщенной в фактической разработке. Разработчики могут быстро создавать диаграммы с помощью простой настройки и синтаксиса React для удовлетворения различных потребностей в визуализации.

Адрес GitHub:GitHub.com/w SMD-компоненты/плохие-плохие…

Предварительный просмотр мини-программы WeChat:

TaroECharts Demo

Процесс реализации

1 загрузка

Чтобы быть совместимым с апплетом Canvas, мы сначала собираем ec-canvas и загружаем его локально. Среди них ec-canvas — это компонент, предоставленный официальным сайтом echarts, который мы можем скачать или перейти наИндивидуальная сборка официального сайтаВыберите диаграмму или плагин, который необходимо загрузить.

2 импортных компонента

Внедряем в проект нужную нам библиотеку компонентов, и выкладываем сюда единообразноsrc/components/ec-canvasпод папку. Каждый можетПапкаИмпортируйте его в свой проект. Среди них echarts.js — это подключаемый модуль диаграмм echarts, который мы только что скачали сами.Вы можете настроить и загрузить необходимые диаграммы в соответствии с фактическими требованиями проекта, а затем импортировать их.

3 Создайте диаграмму (в качестве примера возьмем круговую диаграмму)

3.1 Создание нового компонента диаграммы

существуетcomponentsсоздать папкуpieCharts.jsкомпоненты. Импортируем только что созданный компонент

import * as echarts from "./ec-canvas/echarts";

3.2 Ленивая загрузка графика рендеринга

Настройте наш ec-canvas

config = {
    usingComponents: {
        "ec-canvas": "./ec-canvas/ec-canvas"
    }
};

Используйте только что импортированный ec-canvas в функции рендеринга

<ec-canvas
    ref={this.refChart}
    canvas-id="mychart-area"
    ec={this.state.ec}
/>

Создайте функцию обновления для инициализации диаграммы

refresh(data) {
    this.Chart.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setChartData(chart, data);
      return chart;
    });
  }

  refChart = node => (this.Chart = node);

Настройка графиков ленивой загрузки

state = {
    ec: {
      lazyLoad: true
    }
 };

3.3 Настраиваем параметры нужного нам графика

Здесь настройте его в setChartData и передайте графики, параметры данных.


function setChartData(chart, data) {
  let option = {
    series : [
      {
        name: '访问来源',
        type: 'pie',
        center: ['50%', '50%'],
        radius: [0, '60%'],
        data: data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  chart.setOption(option);
}

На данный момент круговая диаграмма создана. Подробности см.Круговая диаграмма

4 Создайте граф

Импортируйте только что созданную диаграмму на страницу, для которой она нужна (Круговая диаграмма)

import PieChart from "../../components/PieChart";

Импорт в функцию рендеринга

<PieChart ref={this.refPieChart} />

Создать диаграмму и передать данные

componentDidMount() {
    const chartData = [
      {value:335, name:'直接访问'},
      {value:310, name:'邮件营销'},
      {value:234, name:'联盟广告'},
      {value:135, name:'视频广告'},
      {value:1548, name:'搜索引擎'}
    ];
    this.pieChart.refresh(chartData);
  }
  refPieChart = (node) => this.pieChart = node

До сих пор была создана круговая диаграмма, круговая диаграмма и так далее аналогичны. Пока вы устанавливаете параметры таким образом, мы можем создать нужную вам диаграмму.

5 Создание других карт

Перелистываемые графики:

可滑动图表

Несколько диаграмм на одной странице:

一个页面多个图表

Несколько диаграмм объединены:

多个图表结合在一起

Суммировать

От неизвестного до нарицательного имени, Таро теперь нравится и разработчикам. В будущем он должен стать еще более популярным на гастролях, ведь он самый сильный руководитель во вселенной. Однако хороший фреймворк также нуждается в помощи большинства инструментов. Как будто рядом с АЦП всегда есть опора. В настоящее время нет единой спецификации разработки карт в Таро, в настоящее время это только метод, используемый нашей командой. Также вытягивается отдельный пакет для карт Таро. Мы приглашаем единомышленников поднимать вопросы и присоединяться к нам.

Категории