1.0.7 • Published 3 years ago
sm-echarts v1.0.7
最新更新
v1.0.7
- 增加通过接口获取数据的props,不再需要外部管理数据状态
v1.0.6
- 组件dom根节点支持绑定鼠标相关事件,props传入
- 增加初始化、销毁、设置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
- 组件dom根节点支持绑定鼠标相关事件,props传入
- 增加初始化、销毁、设置option前、设置option后的钩子
1.0.5
- 增加 echarts 事件绑定机制
1.0.0
- 完成React Ts版封装