react hooks使用Echarts图表中遇到的情况及相关配置问题

npm install echarts --save

import * as echarts from 'echarts' // 引入 echarts 核心模块

import * as echarts from 'echarts' // 引入 echarts 核心模块

const index = () => {
	const initChart = () => {
		let chartDom: any = document.getElementById('chart')
        let myChart = echarts.init(chartDom)
        myChart.clear()
        let option:any = null
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            title: {
                show: true,
                text: '各厂手续办理数量总览',
                left: 10,
                top: 10,
            },
            dataZoom: [
                {
                    type: 'slider',  // slider 代表有滑块，inside 代表内置，左右滑动
                    id: 'dataZoomX',
                    start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
                    show: true,  // 是否显示下方滚动条,默认为true
                    realtime: true,   // 是否实时更新
                    minValueSpan: 5,  // 显示数据的最小条数
                    maxValueSpan: 10,  //显示数据的最大条数
                    

                    fillerColor: "#CED4DD", //滑动块的颜色

                    xAxisIndex: [0],  // 表示这个 dataZoom 组件控制 第一个 xAxis
                    handleSize: 0, //滑动条的 左右2个滑动条的大小
                    height: 10, //组件高度
                    bottom: 0, // 控制滚动条距离底部的位置;
                    borderColor: "#FAFAFA",  // 边框颜色
                    
                    backgroundColor: "#FAFAFA", //两边未选中的滑动条区域的颜色
                    showDataShadow: false, //是否显示数据阴影 默认auto
                    showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                    filterMode: "filter",
                    brushSelect: false  // 滚动条上面的阴影
                }
            ],
            legend: {
                top: 10,
                right: 20
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [], // 数组-数据
                    axisLabel: {
                        interval: 0,
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // splitNumber: 5   // Y轴坐标精度，默认为5
                }
            ],
            series: [
                {
                    name: '已完成',
                    type: 'bar',
                    stack: 'overlap',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [], 数组-数据
                    itemStyle: {
                        color: '#0194FE'
                    }
                },
                {
                    name: '办理中',
                    type: 'bar',
                    stack: 'overlap',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: [], 数组-数据
                    itemStyle: {
                        color: '#5CDBD3'
                    }
                },
                {
                    name: '未办理',
                    type: 'bar',
                    stack: 'overlap',  // stack: 'Ad', 好像也有同样效果
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: [], 数组-数据
                    itemStyle: {
                        color: '#FFC53D'
                    }
                },
            ]
        };

        myChart.resize()
        option && myChart.setOption(option);

        // 这个点击事件只限制于 点击柱形中有数据的部分，没有数据的部分，点击无效
        myChart.on('click', function(params: any) {
            handleGetBottomList(params.name, params.seriesName)
        })
	}
	
	useEffect( () => {
		initChart()
	})

	return (
		<div id='chart'></div>
	)
}

grid: {
    left:"20%",   //grid 组件离容器左侧的距离
    right:"30px", //grid 组件离容器右侧的距离
    bottom:"20%"  //grid 组件离容器下边距的距离
}

 myChart.on('click', function(params: any) {
       // params 为柱状图的参数 
       // 如果是普通柱状图，使用 params.name (对应的x轴label) 参数
       // 如果是折叠柱状图，使用 params.name   params.seriesName (对应的属性)
       // 如果还需要什么参数，可以打印 params 查找
       console.log('params', params)
 })