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

快来打我* 2024-03-27 10:46 72阅读 0赞

## 前言 ##

> 项目开发中，需要做一个报表功能，看了下UI图，初步定下使用 `echarts`，不过之前使用 `echarts` 都是在 `Vue2` 和 `Vue3` 框架下开发，第一次使用 `react-hooks` 开发 echarts，将流程及一些 相关配置 写个随笔记录下。

**1、 下载 echarts 包**

npm install echarts --save

**2、引入eaharts**

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

**注意：**

*  上面的引入写法是 echarts V5版本的写法，因为下载默认下载 V5版本
 *  如果需要按需引入，请参考echarts 官网

**效果图如下所示：**

![在这里插入图片描述][ae4d00f27fd54440afe85d1eabd7cfa6.png]

**3. 使用**

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>
    	)
    }

## 相关参数配置 ##

### 1. 形成堆叠柱状图 ###

在 `series` 配置中，将每一个柱的对象，其中的 `stack` 参数，设置成一样的 ‘overlap’ / ‘Ad’

![在这里插入图片描述][64a4feb3ca294ccabfc3c2d1e7b7d02c.png]

### 2. 设置右上方的表头的位置 ###

![在这里插入图片描述][75bdc733d34c458aae4c02914593fac1.png]

### 3. 设置echarts 柱状图 横向滚动 ###

![在这里插入图片描述][d1ad33a964cd4747a7ae74812fca14e9.png]

### 4. X轴坐标 label 文字过长，无法显示 ###

![在这里插入图片描述][6aeaad9ecf7945de8ca1401fb6c40285.png]

*  **interval：间隔 每个坐标之间的间隔，正常显示设置 0 就可以了。**
 *  **rotate：偏移，也可以说是倾斜。值是number类型，视情况而定。**

如果使用了偏移，可能会出现新的问题，就是左右边距不够文字会被遮挡一部分，这时候可以进行如下配置。

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

### 5. 点击柱状图，调用方法 ###

如果项目开发中有这样的需求：点击某一个柱状图，调用接口获取柱状图的某些数据，可以进行这样操作:

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

[ae4d00f27fd54440afe85d1eabd7cfa6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/558cc444fd7d4765ac3c998962ba6efe.png
[64a4feb3ca294ccabfc3c2d1e7b7d02c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f4ebe1a644184b19bdad56861e0404e9.png
[75bdc733d34c458aae4c02914593fac1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/548cd0b53a684b6a8796289e680a3241.png
[d1ad33a964cd4747a7ae74812fca14e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2bbc13857b7c4777b567e160a72e1fa0.png
[6aeaad9ecf7945de8ca1401fb6c40285.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/decd58c64b9f403ba16e549e67597d74.png