sm-echarts v1.0.7

最新更新

• v1.0.7

  1. 增加通过接口获取数据的props，不再需要外部管理数据状态

• v1.0.6

  1. 组件dom根节点支持绑定鼠标相关事件，props传入
  2. 增加初始化、销毁、设置option前、设置option后的钩子

特点

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

SmECharts Props

基本使用

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版封装