sm-echarts

v1.0.7

Published

3 years ago

A smart echarts library for React.

Downloads

0High
0Medium
0Low

yantaolu

react echarts component

`最新更新`

v1.0.7
1. 增加通过接口获取数据的props，不再需要外部管理数据状态
v1.0.6
1. 组件dom根节点支持绑定鼠标相关事件，props传入
2. 增加初始化、销毁、设置option前、设置option后的钩子

`特点`

使用 TypeScript 封装，编辑器智能提醒，再也不用刷 echarts 文档了
开发使用 React 0.14 构建 class 组件，可保证各种 React 版本的兼容
外置 echarts 支持 echarts 4.x/5.x 的各种版本，可以保障浏览器的兼容性
将 option 中常用属性提到 props 中，不需要一层一层的嵌套配置，使用更加简单，同时内置智能合并逻辑，可以将 option 中的配置和 props 的配置进行合并，props 中的优先级更高
内置 resize 监听逻辑，自动重绘

`SmECharts Props`

|Prop name|Type|Default|Description| |:---|:---|:---|:---| |className|string||外置样式类名| |style|React.CSSProperties||外置内联样式| |notMerge|boolean|false|chart.setOption(option, notMerge, lazyUpdate); 设置属性时是否不跟之前设置的 option 进行合并| |lazyUpdate|boolean|false|chart.setOption(option, notMerge, lazyUpdate); 设置属性时是否不立即更新图表| |option|Omit<EChartsOption, 'legend'｜'grid'｜'xAxis'｜'yAxis'｜'geo'｜'series'｜'tooltip'>||echarts 建议除了 'legend'｜'grid'｜'xAxis'｜'yAxis'｜'geo'｜'series'｜'tooltip' 以外其他的配置项| |legend|LegendComponentOption｜LegendComponentOption[]||echarts legend 配置项| |grid|GridOption｜GridOption[]||echarts grid 配置项| |xAxis|XAXisOption｜XAXisOption[]||echarts xAxis 配置项| |yAxis|YAXisOption｜YAXisOption[]||echarts yAxis 配置项| |geo|GeoOption｜GeoOption[]||echarts geo 配置项| |series|SeriesOption｜SeriesOption[]||echarts series 配置项| |tooltip|TooltipOption｜TooltipOption[]||echarts tooltip 配置项| |type|SeriesOption['type']｜SeriesOption['type'][]|line|series 中的 type 属性| |data|SeriesOption['data']｜SeriesOption['data'][]||series 中的 data 属性| |category|XAXisOption['data']||xAxis 中的 data 属性，当 rotateAxis 为 true 时，则会设置到 yAxis 中| |multi|boolean|false|同一类型多组数据渲染，data 接收二维数组合并后有多组 series| |rotateAxis|boolean|false|旋转坐标轴，默认 xAxis 及 yAxis 的属性互换| |debug|boolean|false|控制台输出合并后的 option 方便调试| |onEvents|Record<string, EventHandler｜EventHandler[]>||1.0.4 新增，提供 ehcarts 实例绑定事件方式，内部会在更新/卸载时自动解绑| |onInit|(ins: SmECharts) => void||1.0.6 新增，完成初始化 echarts 钩子| |onDestroy|(ins: SmECharts) => void||1.0.6 新增，销毁 echarts 钩子| |beforeSetOption|(ins: SmECharts) => void||1.0.6 新增，每次 echarts.setOption 前钩子| |afterSetOption|(ins: SmECharts) => void||1.0.6 新增，每次 echarts.setOption 后钩子| |fetchData|() => (any[]｜Promise<any[]>)||1.0.7 新增，使用函数获取数据|

基本使用

import SmECharts from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts type={'line'} category={[1, 2, 3, 4, 5]} data={[7, 9, 5, 3, 10]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'bar'} category={[1, 2, 3, 4, 5]} data={[7, 9, 5, 3, 10]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'pie'} data={[7, 9, 5, 3, 10]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'gauge'} data={[7, 9, 5, 3, 10]} />
  </div>
</div>

获取数据 - fetchData

import { useCallback } from 'react';
import SmECharts from 'sm-echarts';

// 异步获取数据
const fetchData = useCallback(() => new Promise(resolve => setTimeout(() => {
  resolve([7, 9, 5, 3, 10]);
}, 300)), []);

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    {/* 异步获取数据 */}
    <SmECharts chartType={'line'} category={[1, 2, 3, 4, 5]} fetchData={fetchData} />
  </div>
  <div className='chart-wrapper'>
    {/* 同步获取数据 */}
    <SmECharts chartType={'bar'} category={[1, 2, 3, 4, 5]} fetchData={() => [7, 9, 5, 3, 10]} />
  </div>
</div>

多组数据 - multi

import SmECharts from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts type={'line'} category={[1, 2, 3, 4, 5]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} multi />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'bar'} category={[1, 2, 3, 4, 5]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} multi />
  </div>
</div>

旋转坐标轴 - rotateAxis

import SmECharts from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts type={'line'} category={[1, 2, 3, 4, 5]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} multi rotateAxis />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'bar'} category={[1, 2, 3, 4, 5]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} multi rotateAxis />
  </div>
</div>

自由组合

import SmECharts, { ColorUtil } from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts
      type={['line', 'bar']} category={[1, 2, 3, 4, 5]}
      series={[{
        smooth: true,
        areaStyle: { color: ColorUtil.generateLinearColor(['#f5bd27', 'green']) }
      }, {
        itemStyle: { color: '#f5bd27' }
      }
      ]}
      data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts
      type={['line', 'bar']} category={[1, 2, 3, 4, 5]}
      data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} rotateAxis />
  </div>
  <div className='chart-wrapper' style={{ width: '100%' }}>
    <SmECharts type={['pie', 'pie']} series={[{ center: ['30%', '50%'] }, { center: ['70%', '50%'] }]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} />
  </div>
</div>

数据动态更新 - 尝试鼠标移入/移出图表

import { useState } from 'react';
import SmECharts from 'sm-echarts';

const [data, setData] = useState([7, 9, 5, 3, 10]);

<div
  className='chart-wrapper'
  onMouseEnter={() => setData([3, 5, 7, 6, 3])}
  onMouseLeave={() => setData([7, 9, 5, 3, 10])}
>
  <SmECharts
    type={'line'} category={[1, 2, 3, 4, 5]} data={data}
    onEvents={{
      click: () => {
        alert('点击了折线图')
      }
    }}
  />
</div>

echarts 事件绑定

关于事件类型及绑定事件方式，请参照 echarts官方文档，事件绑定也可以利用 ref 获取组件内 echarts 实例属性 echartsInstance

import SmECharts from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts
      type={'line'}
      // ref={chart => console.log(chart.echartsInstance)}
      option={{
        title: {
          show: true,
          text: '点击折线图',
          left: 'center',
        }
      }}
      onEvents={{
        click: () => {
          alert('点击了折线图')
        }
      }}
      category={[1, 2, 3, 4, 5]}
      data={[7, 9, 5, 3, 10]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts
      type={['line', 'bar']}
      option={{
        title: {
          show: true,
          text: '分别点击折线图/柱状图',
          left: 'center',
        }
      }}
      onEvents={{
        click: [
          ['series.bar', () => {
            alert('点击了柱状图')
          }],
          ['series.line', () => {
            alert('点击了折线图')
          }]
        ]
      }}
      category={[1, 2, 3, 4, 5]}
      data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} />
  </div>
</div>

修改全局配置

import SmECharts from 'sm-echarts';

// 全局公共配置
SmECharts.defaultOption = {
  color: [
    '#5899f5', '#46dbc2', '#20b8e6',
    '#f5bd27', '#5ac846', '#f57d71',
    '#776edb', '#f59e6e', '#5980b3',
    '#ca91f2',
  ]
};

// 全局公共坐标系
SmECharts.defaultAxis = {
  // 坐标系
  grid: {
    show: true,
    borderColor: 'transparent',
    borderWidth: 0,
  },
  // x轴
  xAxis: {
    show: true,
    type: 'category',
  },
  // y轴
  yAxis: {
    show: true,
    type: 'value',
  },
};

更新日志

1.0.6
1. 组件dom根节点支持绑定鼠标相关事件，props传入
2. 增加初始化、销毁、设置option前、设置option后的钩子
1.0.5
1. 增加 echarts 事件绑定机制
1.0.0
1. 完成React Ts版封装

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

最新更新

特点

SmECharts Props