Home

Awesome

rc-echart

React component wrapper for Apache ECharts based on TypeScript.
<a href="https://www.npmjs.com/package/rc-echart"><img alt="NPM Package" src="https://img.shields.io/npm/v/rc-echart.svg?style=flat-square"></a> <a href="https://www.npmjs.com/package/rc-echart"><img alt="NPM Size" src="https://img.shields.io/bundlephobia/minzip/rc-echart"></a> <a href="https://www.npmjs.com/package/rc-echart"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/rc-echart?logo=npm&style=flat-square"></a> <a href="/LICENSE"><img src="https://img.shields.io/github/license/lloydzhou/rc-echart?style=flat-square" alt="MIT License"></a>

项目设计

  1. 参考vuecharts3对echarts进行封装
  2. 将echarts官方抽象的series以及其他的一些组件抽象成为React的组件使用，每一个组件负责管理自己的配置项。
  3. 这些配置项统一的合并到Chart画布组件。再统一的通过chart.setOption更新到图表上

安装

yarn add rc-echart echarts

Components

  1. 定义一个Chart组件作为画布
  2. 将echarts官方配置项每一个配置项使用统一的工厂函数构造成React Component
  3. 项目导出组件列表
导出组件
seriesLine, Bar, Pie, Scatter, EffectScatter, Radar, Tree, Treemap, Sunburst, Boxplot, Candlestick, Heatmap, Map, Parallel, Lines, Graph, Sankey, Funnel, Gauge, PictorialBar, ThemeRiver, Custom
axisXAxis, YAxis, Polar, RadiusAxis, AngleAxis, RadarAxis, ParallelCoordinates(parallel), ParallelAxis, SingleAxis, Calendar
dataZoomDataZoom, Inside, Slider
visualMapVisualMap, Continuous, Piecewise
graphicGraphic, Group, Image, Text, Rect, Circle, Ring, Sector, Arc, Polygon, Polyline, GraphicLine(graphic.elements-line), BezierCurve
otherTitle, Legend, Grid, Tooltip, AxisPointer, Toolbox, Brush, Geo, Timeline, Dataset, Aria
glGlobe, Geo3d, Mapbox3d, Grid3D, XAxis3D, YAxis3D, ZAxis3D, Scatter3D, Bar3D, Line3D, Lines3D, Map3D, Surface, Polygons3D, ScatterGL, GraphGL, FlowGL

DEMO

online demo

import 'echarts'
import { Chart, Line, Bar, Title, Grid, XAxis, YAxis, Tooltip } from 'rc-echart'

function App() {

  return (
    <div className="App">
      <Chart width={800}>
        <Grid top={100} />
        <Title text="顶部标题" subtext="顶部小标题" left="center" top={10} />
        <Title text="底部标题" top="bottom" left="center" />
        <Bar name="data1" data={[0.32, 0.45, 0.2]} />
        <Bar name="data2" data={[0.2, 0.5, 0.3]} />
        <Line name="data2" data={[0.2, 0.5, 0.3]} />
        <XAxis data={['x1', 'x2', 'x3']} />
        <YAxis />
        <Tooltip trigger="axis" />
      </Chart>
    </div>
  )
}

image

自定义组件

  1. 通过自定义组件实现官方切换图像的example
function TreemapSunburstTransition() {

  const [type, setType] = useState('')
  const [data, setData] = useState()
  const interval = useRef()
  const id = 'echarts-package-size'

  useEffect(() => {
    const url = "https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/echarts-package-size.json"
    fetch(url).then(res => res.json()).then(data => {
      setData(data.children)
      let type = ''
      console.log('data.value', data.children)
      interval.current && clearInterval(interval.current);
      // @ts-ignore
      interval.current = setInterval(function () {
        setType(type = type === 'treemap' ? 'sunburst' : 'treemap')
        console.log('state.type', type)
      }, 3000);
    })
    return () => interval.current && clearInterval(interval.current)
  }, [])

  if (type === 'treemap') {
    return <Treemap id={id} animationDurationUpdate={1000} roam={false} nodeClick={undefined} data={data} universalTransition label={{show: true}} breadcrumb={{show: false}} />
  }
  return <Sunburst id={id} radius={['20%', '90%']} animationDurationUpdate={1000} nodeClick={undefined} data={data} universalTransition label={{show: false}} itemStyle={{borderWidth: 1, borderColor: 'rgba(255,255,255,.5)'}} />
}


function App() {

  return (
    <div className="App">
      <Chart width={800}>
        <TreemapSunburstTransition />
      </Chart>
    </div>
  )
}

echarts-gl demo

echarts-gl demo

image