antd-pro使用笔记
一、添加新页面
1. 使用umi创建页面
umi g page Service/Dependency
2. 在config/router.config.js中增加路由
{
path: '/service/dependency',
name: 'dependency',
component: './Service/Dependency',
hideInMenu: false,
},
二、使用echarts
1. 安装依赖
npm install echarts --save
2. 初始化echarts
在componentDidMount中初始化比较合适：
import React, { Fragment, PureComponent } from 'react';
import styles from './Dependency.css';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';class Dependency extends PureComponent {
state = {
options: null,
}componentDidMount() {
this.myChart = echarts.init(document.getElementById('dependency-graph'))
this.setState({
options:{
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
},
});
}render() {
let { options } = this.state;
if (null !== options) {
this.myChart.setOption(options);
}
return (
);
}
}
export default Dependency;
三、修改echarts
1. 修改原码
在做依赖图时，希望点击顶点后高亮保持，由于echarts本身不支持，需要修改其原码src/chart/graph/GraphView.js：
var focusedNode = null;
data.eachItemGraphicEl(function (el, idx) {
var itemModel = data.getItemModel(idx);
// Update draggable
el.off('drag').off('dragend');
var draggable = itemModel.get('draggable');
if (draggable) {
el.on('drag', function () {
if (forceLayout) {
forceLayout.warmUp();
!this._layouting
&& this._startForceLayoutIteration(forceLayout, layoutAnimation);
forceLayout.setFixed(idx);
// Write position back to layout
data.setItemLayout(idx, el.position);
}
}, this).on('dragend', function () {
if (forceLayout) {
forceLayout.setUnfixed(idx);
}
}, this);
}
el.setDraggable(draggable && forceLayout);el[FOCUS_ADJACENCY] && el.off('mouseover', el[FOCUS_ADJACENCY]);
el[UNFOCUS_ADJACENCY] && el.off('mouseout', el[UNFOCUS_ADJACENCY]);if (itemModel.get('focusNodeAdjacency')) {
el.on('mouseover', el[FOCUS_ADJACENCY] = function () {
console.log("mouseover", focusedNode);
if (focusedNode !== null) {
return;
}
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
dataIndex: el.dataIndex
});
});
el.on('mouseout', el[UNFOCUS_ADJACENCY] = function () {
console.log("mouseout", focusedNode);
if (focusedNode !== null) {
return;
}
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
});el.on('click', function () {
console.log("click", focusedNode);
var t = 'focusNodeAdjacency';
if (focusedNode === el.dataIndex) {
// Reverse the focus.
focusedNode = null;
t = 'unfocusNodeAdjacency';
} else if (focusedNode !== null) {
// Remove focus of the old node.
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
focusedNode = el.dataIndex;
} else {
focusedNode = el.dataIndex;
}
api.dispatchAction({
type: t,
seriesId: seriesModel.id,
dataIndex: el.dataIndex
});
});
注意应该修改src下的源码，而非lib目录下的生成结果。
2. 修改源码后，需要对源码进行编译，执行：cnpm install，此时会生成lib目录下的发布代码
注意：cnpm install会莫名其妙报如下错误：
internal/modules/cjs/loader.js:582
throw err;
^Error: Cannot find module 'rimraf'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.(/Users/kevin/dev/go/src/gitlab.p1staff.com/backend/incubator-echarts/node_modules/[email protected]@fs-extra/lib/remove/index.js:1:76)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
✖ Install fail! Error: Run "sh -c node build/build.js --prepublish" error, exit code 1
Error: Run "sh -c node build/build.js --prepublish" error, exit code 1
at ChildProcess.proc.on.code (/usr/local/lib/node_modules/cnpm/node_modules/runscript/index.js:74:21)
at ChildProcess.emit (events.js:182:13)
at maybeClose (internal/child_process.js:962:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
npminstall version: 3.16.0
npminstall args: /usr/local/bin/node /usr/local/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js --fix-bug-versions --china --userconfig=/Users/kevin/.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://registry.npm.taobao.org
简单的解决办法是将node_modules全部删掉，然后重新生成即可。
2. 更新项目依赖
由于echarts并没变化，所以update不起作用，可以手动将依赖删除：
rm -rf node_modules/echarts node_modules/[email protected]@echarts
然后再执行：
cnpm install ../incubator-echarts
3. 删除umi缓存
rm -rf node_modules/umi-dlls
此问题排查了一下午，非常坑。
另外需要注意的是，echarts依赖在dist/vendors.async.js，但是在本地运行调试时，却对应到umi.dll.js。
4. 执行npm run start
其它问题，使用cnpm install https://xxx.yyy.com/backend/arch/incubator-echarts/tarball/main不能成功，报错如下：
✖ Install fail! Error: [@https://gitlab.p1staff.com/backend/arch/incubator-echarts/tarball/main] ENOENT: no such file or directory, chmod '/Users/kevin/dev/go/src/gitlab.p1staff.com/backend/tantan-backend-hermesweb/node_modules/.tmp/0ad5ebd8-912d-4e74-b03d-8c651e677260/package.json'
Error: [@https://gitlab.p1staff.com/backend/arch/incubator-echarts/tarball/main] ENOENT: no such file or directory, chmod '/Users/kevin/dev/go/src/gitlab.p1staff.com/backend/tantan-backend-hermesweb/node_modules/.tmp/0ad5ebd8-912d-4e74-b03d-8c651e677260/package.json'
at module.exports (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/download/remote.js:29:11)
at module.exports.throw ()
at onRejected (/usr/local/lib/node_modules/cnpm/node_modules/co/index.js:81:24)
npminstall version: 3.16.0
npminstall args: /usr/local/bin/node /usr/local/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js --fix-bug-versions --china --userconfig=/Users/kevin/.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://registry.npm.taobao.org https://gitlab.p1staff.com/backend/arch/incubator-echarts/tarball/main