echarts-comp
v0.4.0
Published
Apache Echarts components for React
Downloads
90
Readme
基于 Apache ECharts, 重新导出了它的子模块。基于它生成的d.ts 文件,重新打包,解决了 echarts 不支持 nodeNext 模块的问题。
重新导出
echarts-comp导出了 echarts 的 charts、components、core、features、renderers 模块。以下两个示例是等价的
import * as charts from "echarts-comp";
import * as core from "echarts-comp/core";
import * as charts from "echarts";
import * as core from "echarts/core";
React 使用
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
},
],
};
import React, { useMemo, useState } from "react";
import { ECharts } from "echarts-comp/react";
import "echarts-comp"; // 注册默认的所有组件。这相当于 import "echarts", 你可以按需注册.
export default function App() {
const [loading, setLoading] = useState<boolean>(true);
useMemo(() => {
setTimeout(() => setLoading(false), 2000);
}, []);
return <ECharts option={option} loading={loading} style={{ height: 400 }} theme="dark" />;
}
组件参数
interface EChartsProps {
/** echarts 初始化配置,变更(浅比较)会导致 echarts 实例变化 */
init?: {
locale?: string | LocaleOption;
renderer?: RendererType;
devicePixelRatio?: number;
useDirtyRect?: boolean;
useCoarsePointer?: boolean;
pointerSize?: number;
ssr?: boolean;
theme?: string;
};
option?: EChartsOption;
loading?: boolean;
/** 固定渲染大小; 默认会自动监听 window resize 事件, 自动调用 Echarts.resize(); 设置为true将不会监听 */
fixedSize?: boolean;
/**
* Echarts 实例发生变化时触发
* @param oldInstance - 如果不存在,说明是第一次初始化
*/
onChange?: (echarts: EChartsType, oldInstance?: EChartsType) => void;
/** 依赖变化会触发 resize */
resizeDep?: any[];
style?: CSSProperties;
}