2020年9月问题汇总

Aditya2020-10-12开发问题

2020年9月问题汇总

解决 node-gyp rebuild 报错
音频波形数据获取
echart大数据量缩放时间轴卡顿
js随机颜色的生成方法
vue-cli3.0用axios加载本地json数据
显示选取的文本文件的内容
json 文件的保存
ECharts点击非图表区域的点击事件不触发问题

1. 解决 node-gyp rebuild 报错

Xcode Command Line Tools 问题

mac OS版本升级以及node版本更新，一些老项目需要重新 yarn，但是部分项目出现了问题，下面是从网上找到的解决办法

现象和错误信息

执行 npm install -g xxxx 或者 yarn 命令的时候出现如下面类似的报错信息：

> fsevents@1.2.11 install /usr/local/lib/node_modules/hzero-cli/node_modules/fork-ts-checker-webpack-plugin-alt/node_modules/fsevents
> node-gyp rebuild

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:321:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.3.0
gyp ERR! command "/usr/local/Cellar/node/13.8.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/hzero-cli/node_modules/fork-ts-checker-webpack-plugin-alt/node_modules/fsevents
gyp ERR! node -v v13.8.0
gyp ERR! node-gyp -v v5.0.7
gyp ERR! not ok

差不多就是这样的

分析和解决办法

以上错误大概率是 Xcode Command Line Tools 没有安装或者升级到 macOS Catalina 之后 Xcode Command Line Tools 安装异常所致。所以接下来我们来检查一下这个命令行工具的安装情况。

检查 Xcode 命令行工具

首先，运行以下命令检查命令行工具是否已安装：

xcode-select --install

若返回以下信息，说明已经安装，否则会提示你继续完成这个命令行工具的安装过程。

xcode-select: error: command line tools are already installed, use "Software Update" to install updates

接下来，运行以下命令来确认已安装的命令行工具是否正常：

/usr/sbin/pkgutil --packages | grep CL

若返回以下信息，则说明以满足 node-gyp 的要求，如果没有返回任何信息，则可判断 Xcode 命令行工具出现了异常。

com.apple.pkg.CLTools_Executables
com.apple.pkg.CLTools_SDK_macOS1015
com.apple.pkg.CLTools_SDK_macOS1014
com.apple.pkg.CLTools_macOS_SDK

修复 Xcode 命令行工具

若以上检查步骤出现异常情况，则尝试以下步骤重新安装 Xcode 命令行工具，之后重复执行检查的步骤确认有信息返回。

sudo rm -rf $(xcode-select -print-path)
xcode-select --install

最后重新执行你的 npm 或者 yarn 命令，理论上就可以恢复正常了。

删除 .npmrc 再安装

按照上述步骤走了一遍，我在执行

xcode-select --install

却遇到了

安装失败不能安装该软件 因为当前无法从软件更新服务器获得

从 https://developer.apple.com/download/more/open in new window 下载了最新的 Command Line Tools ，再次重复了上述流程，是没问题的，然后项目yarn还是失败了。

错误日志大概是

gyp ERR! stack Error: 404 response downloading https://r.cnpmjs.org/node/v8.12.0/node-v8.12.0-headers.tar.gz

删除了.npmrc 再安装可以了

参考

2. 音频波形数据

会单独写一篇博文

3. echart大数据量缩放时间轴卡顿

音频波形数据量过大衍生问题
series添加

showSymbol:false,
sampling:'average',
showAllSymbol: false

4. js随机颜色的生成方法

    //颜色对象
    function Color(){
        this.r = Math.floor(Math.random()*255);
        this.g = Math.floor(Math.random()*255);
        this.b = Math.floor(Math.random()*255);
        this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
    }

js随机颜色的生成方法open in new window

5. vue-cli3.0用axios加载本地json数据

静态文件必须放在项目中静态资源文件夹（vue-cli3之前是static）

public 必须为根目录

axios({
   method: 'GET',
   url: '/test.wav',
   responseType: 'arraybuffer'
 })

6. 显示选取的文本文件的内容

// html
<input type="file" id="file" onchange="handleFiles(this.files)"/>
<p id="text"></p>

// js
function handleFiles(files)
{
  if(files.length){
	let file = files[0];
    let reader = new FileReader();
    reader.onload = function(){
      document.getElementById('text').innerHTML = this.result;
    };
    reader.readAsText(file);
   }
}

7. json 文件的保存

利用 file-saver 库来实现这一功能：

yarn add file-saver

例子：

var FileSaver = require('file-saver'); 
let data = {
          name:"hanmeimei",
          age:88
      }
var content = JSON.stringify(data);
var blob = new Blob([content ], {type: "text/plain;charset=utf-8"}); 
FileSaver.saveAs(blob, "hello world.txt");

8. ECharts点击非图表区域的点击事件不触发问题

通过 myChart.getZr().on('click', fn) 监听整个图表的点击事件，注册回调；
在 tooltip 的 formatter 函数中，每次调用都记录下需要的参数，在回调中使用参数

let option = {
    ...
    tooltip: {
      trigger: 'axis',
      // triggerOn: 'click',
      formatter: val => {
        console.log(val)
        clickIndex = val[0].axisValue
        // return 'tooltip'
      }
    },
    ...        
}

myChart.getZr().on('click', () => {
    //拿到index即可取出被点击数据的所有信息
    console.log(clickIndex)
})

方法出自关于折线图非节点的点击事件open in new window

但这个方法并不能解决我所面临的问题，因为我的配置中要解决数据量过大问题采用了

showSymbol: false,
sampling: 'average',
showAllSymbol: false,

导致很多点被合并隐藏了，当triggerOn: click 的时候，点击空白区域，并不能获取到tooltip, 即使 triggerOn: mousemove 还是会漏掉许多点，但相当于click 好很多。

但最终目的事利用其标注的用途，由于不灵敏性，所以还是不采纳，依旧选择 xAxis 横坐标点击事件。

2020年9月问题汇总

ON THIS PAGE