react echats封装

 

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

　　

　data

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