Zui近在项目中需要用到 ECharts 折线图，咱就是说每次kan着文档一个个配置项去写，头dou大了。

所以我决定封装一个 Hook，哈哈，这样以后再用到折线图就Ke以直接拿来用了不用再kan那么多配置项了。

左边是 UI 设计图，右边是实现的效果，复原度高达 95% 了你懂的，不容易。

说实话，这个效果还是比较满意的。

点击运行查kan实际效果。

const { chartRef } = useLineEcharts <div ref={chartRef} /> Hook 概览

职责：负责 ECharts 实例的初始化、设置 option、销毁，暴露 chartRef 以供绑定 DOM。

tooltip 的属性中是不支持设置 background 属性的，只Neng设置 backgroundColor，但是在 css 中 backgroundColor 是不Neng设置渐变色的，这里我利用了一个 bug 来实现的。

不对不对，应该是利用了一个特性来实现的。

iimport { useEffect, useRef } from 'react';import * as echarts from 'echarts';// https://echarts.apache.org/zh/option.html#titleinterface UseLineEchartsProps { /** * 图表标题文本 */ titleText?: string; /** * x轴数据 */ xAxisData: string; /** * 系列数据数组 * lineColor 系列线条颜色，若未指定则按默认颜色列表顺序取用 */ seriesData: Array<{ name: string; // 系列名称 data: number | string; // 数据 lineColor?: string; // 线条颜色 lineType?: 'solid' | 'dashed'; // 线条类型 实线 | 虚线 yAxisIndex?: number; // 显示的y轴位置 左侧 右侧 默认0 }>; /** * 提示框格式化函数 */ Tooltip?: { // 标题格式化 titleFormatter?: => string; // 值格式化 valueFormatter?: => string; };}// 默认颜色列表const DEFAULT_COLOR = ;/** * useLineEcharts * 该hooks用于封装ECharts折线图的初始化与配置 */export const useLineEcharts = 为什么百度不收录我的文章？

这个问题啊，害，说实话，我也遇到过。

有人说是内容质量不够高，有人说是关键词不够精准，还有人说是外链不够多...

就是各种说法。

但是我觉得Zui重要的还是内容质量和用户体验，你的内容要是真Neng解决用户的问题，自然就有人会转载、分享，这样搜索引擎自然就会收录了。

就是对折线图进行一层 UI 上的封装，一来方便了项目下未来折线图的需求；二来以后其他项目在Zuo图表就不需要kan密密麻麻的文档，Ke以直接在这个 Hook 上改动，Ke以大幅提高开发效率。

我期望这个 Hook 的使用是这样的，通过参数传数据，导出一个 ref，绑定到一个需要渲染的 div 上，数据变化 div 重新渲染。图表的样式有 Hook 内置好，不需要再操心其他的了。