inula-echarts
v0.0.18
Published
Openinula component for Apache ECharts™.
Downloads
39
Readme
inula-echarts
Openinula component for Apache ECharts™.
图表组件
Installation
npm
npm i echarts inula-echarts
yarn
yarn add echarts inula-echarts
Usage
import { useState } from "openinula";
import Echarts from "inula-echarts";
const style = {
width: "500px",
height: "500px",
};
const [option, setOption] = useState({
title: {
text: "inula-echarts",
left: "center",
top: "bottom",
textStyle: {
fontSize: 22,
color: "#fff",
},
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [35, 230],
center: ["50%", "50%"],
roseType: "radius",
padAngle: 5,
itemStyle: {
borderRadius: 15,
},
label: {
show: false,
},
emphasis: {
label: {
show: true,
},
},
data: [
{ value: 30, name: "rose 1" },
{ value: 27, name: "rose 2" },
{ value: 24, name: "rose 3" },
{ value: 21, name: "rose 4" },
{ value: 18, name: "rose 5" },
{ value: 15, name: "rose 6" },
{ value: 12, name: "rose 7" },
{ value: 10, name: "rose 8" },
],
},
],
});
<Echarts style={style} option={option} />;
Props
| Prop | Type | Required | Description | | ----------- | ------------- | -------- | ------------------------------------------------------------------------------------------------ | | option | object | true | 图表的配置数据,请参照文档 https://echarts.apache.org/zh/option.html#title | | optionOpts | object | false | 图表的数据刷新参数,请参照文档 https://echarts.apache.org/zh/api.html#echartsInstance.setOption | | loadingOpts | object | false | 图表的加载动画参数,请参照文档 https://echarts.apache.org/zh/api.html#echartsInstance.showLoading | | initTheme | object,string | false | 图表创建时的皮肤样式,请参照文档 https://echarts.apache.org/zh/api.html#echarts.init | | initOpts | object | false | 图表创建时的初始化参数,请参照文档 https://echarts.apache.org/zh/api.html#echarts.init | | autoResize | bool | false | 图表是否自动随容器大小缩放 |
Events
| Prop | Type | Required | Description | | -------- | ---- | -------- | ------------------------------------------------------------ | | onInit | func | false | 图表初始化前触发的回调函数,onInit(echarts) | | onInited | func | false | 图表初始化后触发的回调函数,onInited(echartsInstance,echarts) |