Skip to content

Latest commit

 

History

History
123 lines (93 loc) · 5 KB

README.md

File metadata and controls

123 lines (93 loc) · 5 KB
Raw

rc-echart

React component wrapper for Apache ECharts based on TypeScript.
NPM Package NPM Size NPM Downloads MIT License

项目设计

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

安装

yarn add rc-echart echarts

Components

  1. 定义一个Chart组件作为画布
  2. 将echarts官方配置项每一个配置项使用统一的工厂函数构造成React Component
  3. 项目导出组件列表
导出组件
series Line, Bar, Pie, Scatter, EffectScatter, Radar, Tree, Treemap, Sunburst, Boxplot, Candlestick, Heatmap, Map, Parallel, Lines, Graph, Sankey, Funnel, Gauge, PictorialBar, ThemeRiver, Custom
axis XAxis, YAxis, Polar, RadiusAxis, AngleAxis, RadarAxis, ParallelCoordinates(parallel), ParallelAxis, SingleAxis, Calendar
dataZoom DataZoom, Inside, Slider
visualMap VisualMap, Continuous, Piecewise
graphic Graphic, Group, Image, Text, Rect, Circle, Ring, Sector, Arc, Polygon, Polyline, GraphicLine(graphic.elements-line), BezierCurve
other Title, Legend, Grid, Tooltip, AxisPointer, Toolbox, Brush, Geo, Timeline, Dataset, Aria
gl Globe, 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