总结一下最近遇到的两个小问题

Webpack 多级路由导致二级路由刷新 404 的问题

React 配置多级路由之后, Webpack 如果没有特意配置的话, 可能会出现二级路由页面刷新报 404 的问题, 咕咕搜出来的解决方法一般是在 Webpack 的 output 里面增加配置项 output: { publicPath: '/' }

这样可以解决二级路由刷新 404, 但是又会导致打包之后图片等静态文件引入路径不对的问题

完整解决方法

1. Webpack 添加配置项 output: { publicPath: '/' }
2. Webpack file-loader 添加 options, 配置静态文件输出路径 options: { outputPath: 'images/' }
3. Webpack url-loader 添加 options, 配置静态文件输出路径 options: { outputPath: 'images/' }

Echarts 折线非节点选中问题

Echarts 自带的事件监听里面, 鼠标 click 对于折线只有数据点能触发, 折线上的其他部分是无法触发的, 咕咕搜出来全是抄来抄去的重复答案, 而且根本解决不了问题

思路

1. 利用 getZr 函数绑定图表事件
2. 重点 设置 series 的 z 属性, 用于判断当前触发的是哪个 series
3. 执行业务操作

直接贴个代码

// 注意 series 配置, 添加 z 属性 (或者用其他非官方属性来作为索引, 没试过, 应该也可以)
/*
  options {
    ...
    series: {
      ...
      z: [index],
    }
  }
*/

// echarts 实例, echarts-for-react 用 ref 获取, 普通 echarts 直接 init 获取
const echartsInstance = echartsRef.current.getEchartsInstance();
echartsInstance.getZr().on("click", click);
// 必须用 getZr 来绑定事件, 不然没办法触发折线事件
// 可以绑定 mousemove, click 等

/**
 * 事件回调
 */
const click = (e) => {
  const echartsInstance = echartsRef.current.getEchartsInstance();
  // 获取当前点击的位置
  const { target, offsetX, offsetY } = e;
  const pointInPixel = [offsetX, offsetY];
  // 判断点击是否位于图表内
  if (echartsInstance.containPixel("grid", pointInPixel)) {
    // 获取点击的 seriesIndex
    if (target) {
      const index = target.z;
      // 利用 series 的 z 属性获取当前的折线 series 索引
      // 执行其他逻辑
      // ...
    } else {
      // 执行取消选中逻辑
      // ...
    }
  }
};