快捷導(dǎo)航

react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題

更新時(shí)間：2024年03月14日 08:56:24 作者：小劉加油！

這篇文章主要介紹了react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

項(xiàng)目開發(fā)中，需要做一個(gè)報(bào)表功能，看了下UI圖，初步定下使用 echarts，不過之前使用 echarts 都是在 Vue2 和 Vue3 框架下開發(fā)，第一次使用 react-hooks 開發(fā) echarts，將流程及一些相關(guān)配置寫個(gè)隨筆記錄下。

1、下載 echarts 包

npm install echarts --save

2、引入eaharts

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

注意：

上面的引入寫法是 echarts V5版本的寫法，因?yàn)橄螺d默認(rèn)下載 V5版本
如果需要按需引入，請(qǐng)參考echarts 官網(wǎng)

效果圖如下所示：

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: '各廠手續(xù)辦理數(shù)量總覽',
                left: 10,
                top: 10,
            },
            dataZoom: [
                {
                    type: 'slider',  // slider 代表有滑塊，inside 代表內(nèi)置，左右滑動(dòng)
                    id: 'dataZoomX',
                    start: 0, // 數(shù)據(jù)窗口范圍的起始百分比。范圍是：0 ~ 100。表示 0% ~ 100%。
                    show: true,  // 是否顯示下方滾動(dòng)條,默認(rèn)為true
                    realtime: true,   // 是否實(shí)時(shí)更新
                    minValueSpan: 5,  // 顯示數(shù)據(jù)的最小條數(shù)
                    maxValueSpan: 10,  //顯示數(shù)據(jù)的最大條數(shù)
                    

                    fillerColor: "#CED4DD", //滑動(dòng)塊的顏色

                    xAxisIndex: [0],  // 表示這個(gè) dataZoom 組件控制 第一個(gè) xAxis
                    handleSize: 0, //滑動(dòng)條的 左右2個(gè)滑動(dòng)條的大小
                    height: 10, //組件高度
                    bottom: 0, // 控制滾動(dòng)條距離底部的位置;
                    borderColor: "#FAFAFA",  // 邊框顏色
                    
                    backgroundColor: "#FAFAFA", //兩邊未選中的滑動(dòng)條區(qū)域的顏色
                    showDataShadow: false, //是否顯示數(shù)據(jù)陰影 默認(rèn)auto
                    showDetail: false, //即拖拽時(shí)候是否顯示詳細(xì)數(shù)值信息 默認(rèn)true
                    filterMode: "filter",
                    brushSelect: false  // 滾動(dòng)條上面的陰影
                }
            ],
            legend: {
                top: 10,
                right: 20
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [], // 數(shù)組-數(shù)據(jù)
                    axisLabel: {
                        interval: 0,
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // splitNumber: 5   // Y軸坐標(biāo)精度，默認(rèn)為5
                }
            ],
            series: [
                {
                    name: '已完成',
                    type: 'bar',
                    stack: 'overlap',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [], 數(shù)組-數(shù)據(jù)
                    itemStyle: {
                        color: '#0194FE'
                    }
                },
                {
                    name: '辦理中',
                    type: 'bar',
                    stack: 'overlap',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: [], 數(shù)組-數(shù)據(jù)
                    itemStyle: {
                        color: '#5CDBD3'
                    }
                },
                {
                    name: '未辦理',
                    type: 'bar',
                    stack: 'overlap',  // stack: 'Ad', 好像也有同樣效果
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: [], 數(shù)組-數(shù)據(jù)
                    itemStyle: {
                        color: '#FFC53D'
                    }
                },
            ]
        };

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

        // 這個(gè)點(diǎn)擊事件只限制于 點(diǎn)擊柱形中有數(shù)據(jù)的部分，沒有數(shù)據(jù)的部分，點(diǎn)擊無效
        myChart.on('click', function(params: any) {
            handleGetBottomList(params.name, params.seriesName)
        })
	}
	
	useEffect( () => {
		initChart()
	})

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