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)