React + Hooks + Echarts 处理dataZoom记录

公司本来有专门做Echarts工程师一直过得很舒服不需要处理所图表📈有关于事务，好景不长人员变动需要自己动手操作了，ε=(´ο｀*)))哎。

废话不多说直接上代码展示结果 需求如上图

1.定义ref

import React, { useEffect, useRef, useState } from 'react'

const DOM = useRef<HTMLDivElement | any>(null);

2. 将ref复制得dom节点 （width, height）是自定义的宽高

<div ref={DOM} style={{ width: width, height: height }}></div>

3. 渲染Echart图

3.1  初始化Echarts

 let myChart = echarts.init(DOM.current);

3.2 自定义tooltip内容  主要工作量在formatter中，所以这里改成自定义的即可

           let tooltip = {
                className: 'toolwrapDefault',
                trigger: 'axis',
                show: true,
                axisPointer: {
                    type: 'shadow'
                },
                formatter: (res) => {
                    let D = allData[res[0].dataIndex];
                    return (
                        `
                            <div class="tooltip_wrap">
                                <div class="tooltip_info_wrap">
                                    <div class="page_info_wrap">
                                        <div class="page_info">
                                            <img src=${signIconEcharts} width=16 height=16>
                                            ${D.label_name}
                                        </div>
                                    </div>
                                </div>
                                <div class="con_info">
                                    <div class="con_info_sign">
                                        <span></span>
                                        ${tooltipName}
                                    </div>
                                    <div class="con_info_num">
                                        <span>${D.rate === null ? '-' : D.rate+'%'}</span>
                                        <span>${customize.numberFormatMust(D.data)}</span>
                                    </div>
                                </div>
                            </div>
                        `
                    )
                }
            }

3.3 定义dataZoom

let dataZoom = [
    {
        type: 'slider',
        width: 12,
        yAxisIndex: 0,
        startValue: 10,	// 起始位置 
        endValue: 3,	// 结束位置(Y轴展示条数 3 = 10(总条数) - 7(展示条数) )
        handleIcon: 'none',
        filterMode: 'none',
        fillerColor: 'rgba(29, 169, 160, 0.19)',
        borderColor: 'rgba(160, 220, 216, 1)',
        showDataShadow: false,
        moveHandleSize: 4,
        moveHandleStyle: {
            color: '#73C1BA'
        },
        showDetail: false,
        emphasis: {
            moveHandleStyle: {
                color: '#73C1BA'
            }
        },
        brushSelect: false
    }
]

3.4 设置option

let option = {
    tooltip: tooltip,
    color: color,
    grid: {
        top: '0',
        bottom: '0',
        left: '0',
        right: '40',
        containLabel: true
    },
    dataZoom: dataZoom,
    xAxis: {
        type: 'value',
    },
    yAxis: {
        type: 'category',
        axisTick: {
            show: false
        },
        data: [
          ...yAxisData	// 真实数据
        ],
        axisLabel:{
            formatter: function (v) {
                return `{signIcon|} {labelName| ${v}}`   
            },
            rich: {	// 处理字体样式
                labelName:{
                    color:'#273333',
                    align: 'left',
                    fontWeight: 500,
                    fontSize: 14,
                },
                signIcon:{
                    backgroundColor:{
                        image: signIconEcharts	// 展示图片
                    },
                    align: 'left',
                    width: 16,
                    height: 16,
                }
            }
        }
       
    },
    series: [
        {
            type: 'bar',
            barWidth: 12,
            data: [
                ...seriesData	// 真实数据
            ],
        }
    ]
};

3.5 应用数据

myChart.setOption(option);

完成，这样就做出了一个符合需求的Echarts图，记录工作内容，也同时希望能够帮到你😄