echarts学习笔记(部分angular及ant-design)

1、在项目中修改ng-zorro组件默认样式的一些方法:

  • 类名等 前加::ng-deep
  • 类名等 前加:root
  • 类名等 前加:host /deep/

2、echarts横轴自定义时间粒度

两种解决方案,

  • 第一:使用category为category作为xAxis,就可以调用xAxis中的xAxis.axisLabel.interval
  • 第二:formatter的时候增加自己的判定,比如默认是yyyy-MM-dd格式,当满足一定条件后格式化为yyyy-MM-dd hh:mm

3、关于echarts折线图颜色渐变设置

areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: seriesItem.areaStyle.colorStart    //赋值颜色
              }, {
                offset: 0.8,
                color: seriesItem.areaStyle.colorEnd
              }], false),
              shadowColor: seriesItem.areaStyle.shadowColor,
              shadowBlur: 10
            }
          },

4、Angular开发问题:(node:11188) UnhandledPromiseRejectionWarning: Error: spawn cmd ENOENT

问题定位:

  原因系统windown开发环境变量出了问题,ipconfig等命令失效。

  这个 system32 文件夹中包含了大量的用于 Windows 的文件. 这里主要用于存储 DLL 文件, 控制面板小程序(.CPL), 设备驱动 (.drv), 帮助文件 (.hlp 和 .cnt), MS-DOS 工具 (.com), 语言支持文件 (.nls), 屏幕保护 (.scr), 安装信息文件 (.inf), 以及其它用于支持, 配置, 或操作的文件.文件说明  aclui.dll …Security Descriptor Editor,没有它,注册表编辑器会无法运行

解决办法:

  在系统属性中选择“高级系统设置”。在系统属性对话框中找到其上方的“高级”选项卡,里面有一个“环境变量”按钮,点击进入。

  下方的系统变量区中找到变量“path”,点击下方的编辑。

  如果path变量之前有内容,则需要在末尾添加一个分号,然后加入内容“c:windowssystem32”,如下图所示。环境变量设置完毕后,依次单击“确定”保存设置并退出设置界面。

  重启启动idea,并运行项目解决。

5、angular空项目添加ng-alain

ng-alian 官网中推荐使用的方式有两种:

第一种
# 确保使用的是最新版本 Angular cli
ng new my-project --style less
cd my-project
ng add ng-alain
# 如果你想创建一个英文版本,则:
ng add ng-alain --defaultLanguage=en
ng serve
ps:angular-cli的升级
# 卸载现有angular-cli
npm uninstall -g angular-cli
# 清空cache
npm cache clean -f
# 升级
npm install -g @angular/cli@latest
# 升级到固定版本号
npm install -g @angular/cli@版本号 
第二种
git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project
cd my-project
# 安装依赖包
yarn / npm i # 选一个
ng serve

第一种是一个空项目,第二种要自己删很多组件。

重点说明一下第二种,遇到通过npm添加,报很多的错误,具体的错误没有截图,这时候就需要通过yarm的方式来添加了。

全局安装yarn

npm install -g yarn

使用angular-cli成一个空项目

# 空项目
ng new ng-alain-demo --style less
cd ng-alain-demo
# 添加ng-alain
yarn add ng-alain
# 启动
ng serve

6、

原文地址:https://www.cnblogs.com/PearlRan/p/10796446.html