react echats封装

import * as echarts from "echarts";
import {EChartsOption} from 'echarts'
function Index(props:EChartsOption) {
  const echartsRef:any= useRef<HTMLElement>();
  useEffect(() => {
    const myChart = echarts.init(echartsRef.current as HTMLElement);
    myChart.setOption(props.option as EChartsOption);
  });
  return <div ref={echartsRef} style={{ width: "100%", height: "100%" }}></div>;
}
export default Index;

import {EChartsOption } from 'echarts'
export const option:EChartsOption  = {
    // 柱状图的颜色
    color: ["#12ccee"],
    // 表的标题
    title: {
        text: "2019 年度销量",
        subtext: "Sub Title",
        // 标题的位置
        left: "center",
        top: "top",
        textStyle: {
            fontSize: 18,
            // 主标题文字的颜色。
            color: "#ee33aa",
        },
        subtextStyle: {
            fontSize: 12,
            // 主标题文字的颜色。
            color: "#445533",
        }
    },
    tooltip: {
        // 鼠标悬停柱状图是否有hover提示效果
        show: true,
        // 在哪种类型触发
        trigger: "axis",
        // 指示器类型。
        // 'line' 直线指示器
        // 'shadow' 阴影指示器
        // 'none' 无指示器
        // 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
        axisPointer: {
            type: "cross"
        }
    },
    // x轴的数据
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    // y轴的数据
    yAxis: {},
    // 柱状图的数据name名字，类型bar，数据为data
    series: [{
        name: "销量",
        // 折线图line，柱状图bar,饼状图pie
        type: "line",
        data: [10, 22, 93, 45, 44, 100]
    }]
} as EChartsOption