hustcc-echarts-for-react: Простой React-обёртка для Apache eCharts.

Echarts-for-react — это простая и лучшая оболочка React для Apache ECharts.

Установка:

$ npm install --save echarts-for-react

# `echarts` является peerDependence для `echarts-for-react`, вы можете установить echarts с вашей собственной версией.
$ npm install --save echarts

Затем используйте его:

import ReactECharts from 'echarts-for-react';

// рендеринг опции echarts.
<ReactECharts option={this.getOption()} />

Вы можете запустить веб-сайт:

$ git clone git@github.com:hustcc/echarts-for-react.git

$ npm install

$ npm start

После этого откройте http://127.0.0.1:8081/ в браузере или перейдите на https://git.hust.cc/echarts-for-react/, который развёрнут на gh-pages.

Использование:

Код простого демонстрационного кода показан ниже. Дополнительные примеры можно найти по ссылке: https://git.hust.cc/echarts-for-react/.

import React from 'react';
import ReactECharts from 'echarts-for-react';  // или var ReactECharts = require('echarts-for-react');

<ReactECharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

Импортируйте модули ECharts.js вручную, чтобы уменьшить размер пакета.

С Echarts.js v5:

import React from 'react';
// импортируйте основную библиотеку.
import ReactEChartsCore from 'echarts-for-react/lib/core';
// Импортируйте основной модуль echarts, который предоставляет необходимые интерфейсы для использования echarts.
import * as echarts from 'echarts/core';
// Импорт графиков, все с суффиксом Chart
import {
  // LineChart,
  BarChart,
  // PieChart,
  // ScatterChart,
  // RadarChart,
  // MapChart,
  // TreeChart,
  // TreemapChart,
  // GraphChart,
  // GaugeChart,
  // FunnelChart,
  // ParallelChart,
  // SankeyChart,
  // BoxplotChart,
  // CandlestickChart,
  // EffectScatterChart,
  // LinesChart,
  // HeatmapChart,
  // PictorialBarChart,
  // ThemeRiverChart,
  // SunburstChart,
  // CustomChart,
} from 'echarts/charts';
// импорт компонентов, все с суффиксом Component
import {
  // GridSimpleComponent,
  GridComponent,
  // PolarComponent,
  // RadarComponent,
  // GeoComponent,
  // SingleAxisComponent,
  // ParallelComponent,
  // CalendarComponent,
  // GraphicComponent,
  // ToolboxComponent,
  TooltipComponent,
  // AxisPointerComponent,
  // BrushComponent,
  TitleComponent,
  // TimelineComponent,
  // MarkPointComponent,
  // MarkLineComponent,
  // MarkAreaComponent,
  // LegendComponent,
  // LegendScrollComponent,
  // LegendPlainComponent,
  // DataZoomComponent,
  // DataZoomInsideComponent,
  // DataZoomSliderComponent,
  // VisualMapComponent,
  // VisualMapContinuousComponent,
  // VisualMapPiecewiseComponent,
  // AriaComponent,
  // TransformComponent,
  // DatasetComponent,
} from 'echarts/components';
// Импорт рендерера, обратите внимание, что введение CanvasRenderer или SVGRenderer является обязательным шагом
import {
  CanvasRenderer,
  // SVGRenderer,
} from 'echarts/renderers';

// Зарегистрируйте необходимые компоненты
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
); **Использование ReactEChartsCore аналогично описанному выше.**

```ReactEChartsCore
  echarts={echarts}
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>```

**С Echarts.js v3 или v4:**

```ts
import React from 'react';
// импортируем основную библиотеку.
import ReactEChartsCore from 'echarts-for-react/lib/core';

// затем импортируем модули echarts, которые вы использовали вручную.
import echarts from 'echarts/lib/echarts';
// import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/pie';
// import 'echarts/lib/chart/scatter';
// import 'echarts/lib/chart/radar';

// import 'echarts/lib/chart/map';
// import 'echarts/lib/chart/treemap';
// import 'echarts/lib/chart/graph';
// import 'echarts/lib/chart/gauge';
// import 'echarts/lib/chart/funnel';
// import 'echarts/lib/chart/parallel';
// import 'echarts/lib/chart/sankey';
// import 'echarts/lib/chart/boxplot';
// import 'echarts/lib/chart/candlestick';
// import 'echarts/lib/chart/effectScatter';
// import 'echarts/lib/chart/lines';
// import 'echarts/lib/chart/heatmap';

// import 'echarts/lib/component/graphic';
// import 'echarts/lib/component/grid';
// import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/polar';
// import 'echarks/lib/component/geo';
// import 'echarts/lib/component/parallel';
// import 'echarts/lib/component/singleAxis';
// import 'echarts/lib/component/brush';

import 'echarts/lib/component/title';

// import 'echarts/lib/component/dataZoom';
// import 'echarts/lib/component/visualMap';

// import 'echarts/lib/component/markPoint';
// import 'echarts/lib/component/markLine';
// import 'echarts/lib/component/markArea';

// import 'echarts/lib/component/timeline';
// import 'echarts/lib/component/toolbox';

// import 'zrender/lib/vml/vml';

// Использование ReactEChartsCore аналогично описанному выше.
<ReactEChartsCore
  echarts={echarts}
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={'theme_name'}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

Props компонента:

option (обязательно, объект) — конфигурация параметров echarts, см. https://echarts.apache.org/option.html#title.
notMerge (необязательно, объект) — при setOption не объединять данные, по умолчанию — false. См. https://echarts.apache.org/api.html#echartsInstance.setOption.
lazyUpdate (необязательно, объект) — при setOption обновлять данные лениво, по умолчанию — false. См. https://echarts.apache.org/api.html#echartsInstance.setOption.
style (необязательно, объект) — стиль div для echarts. По умолчанию {height: '300px'}.
className (необязательно, строка) — класс div для echarts. Можно задать стиль CSS для диаграммы с помощью имени класса.
theme (необязательно, строка) — тема echarts. Строка, перед использованием необходимо зарегистрировать тему (формат объекта темы: https://github.com/ecomfe/echarts/blob/master/theme/dark.js). Например:

// Импортируем echarts
import echarts from 'echarts';
...
// Регистрируем объект темы
echarts.registerTheme('my_theme', {
  backgroundColor: '#f4cccc'
});
...
// Отображаем echarts с использованием опции `theme`
<ReactECharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  className='echarts-for-echarts'
  theme='my_theme' />

onChartReady (необязательно, функция) — когда диаграмма готова, будет вызвана функция с параметром echarts object.
loadingOption (необязательно, объект) — параметры загрузки echarts, см. https://echarts.apache.org/api.html#echartsInstance.showLoading.
showLoading (необязательно, bool, по умолчанию: false) bool, при рендеринге диаграммы, показывать маску загрузки.
onEvents (необязательно, массив(строка => функция))

привязка события echarts, будет вызывать обратный вызов с объектом события echarts и объектом echart в качестве параметров. например:

const onEvents = {
  'click': this.onChartClick,
  'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactECharts
  option={this.getOption()}
  style={{ height: '300px', width: '100%' }}
  onEvents={onEvents}
/>

для получения дополнительной информации о ключевых именах событий см.: https://echarts.apache.org/api.html#events.

opts (необязательно, объект)

параметры opts для echarts. object, будут использоваться при первоначальном экземпляре echarts с помощью echarts.init. Документ здесь.

<ReactECharts
  option={this.getOption()}
  style={{ height: '300px' }}
  opts={{renderer: 'svg'}} // использовать svg для рендеринга диаграммы.
/>

API компонента и API Echarts

у компонента есть только один API с именем getEchartsInstance.

getEchartsInstance(): получить объект экземпляра echarts, затем можно использовать любой API echarts.

например:

// отобразить компонент echarts ниже с rel
<ReactECharts
  ref={(e) => { this.echartRef = e; }}
  option={this.getOption()}
/>

// затем получить `ReactECharts` с помощью this.echarts_react

const echartInstance = this.echartRef.getEchartsInstance();
// затем можно использовать любой API из echarts.
const base64 = echartInstance.getDataURL();

Информацию об API echarts можно найти по адресу https://echarts.apache.org/api.html#echartsInstance.

Можно использовать API для выполнения следующих действий:

Привязка / отмена привязки события.
Динамические диаграммы с динамическими данными.
Получить dom / dataURL / base64 echarts, сохранить диаграмму в формате png.
Освободить диаграммы.

Часто задаваемые вопросы

Как отобразить диаграмму с помощью svg при использовании echarts 4.x

Используйте реквизиты opts компонента с renderer = 'svg'. Например:

<ReactECharts
  option={this.getOption()}
  style={{height: '300px'}}
  opts={{renderer: 'svg'}} // используйте svg для отображения диаграммы.
/>

Как устранить ошибку `Компонент series.scatter3D не существует. Загрузите его сначала.`

Установите и импортируйте модуль echarts-gl, когда вы хотите создать экземпляр GL.

npm install --save echarts-gl

import 'echarts-gl'
import ReactECharts from "echarts-for-react";

<ReactECharts
  option={GL_OPTION}
/>

ЛИЦЕНЗИЯ

MIT@hustcc.

OSCHINA-MIRROR/hustcc-echarts-for-react

Props компонента:

API компонента и API Echarts

Часто задаваемые вопросы

Как отобразить диаграмму с помощью svg при использовании echarts 4.x

Как устранить ошибку `Компонент series.scatter3D не существует. Загрузите его сначала.`

ЛИЦЕНЗИЯ

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/hustcc-echarts-for-react .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Props компонента:

API компонента и API Echarts

Часто задаваемые вопросы

Как отобразить диаграмму с помощью svg при использовании echarts 4.x

Как устранить ошибку Компонент series.scatter3D не существует. Загрузите его сначала.

ЛИЦЕНЗИЯ

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/hustcc-echarts-for-react

Как устранить ошибку `Компонент series.scatter3D не существует. Загрузите его сначала.`