ECharts

ECharts 是百度关于数据可视化的库，对外暴露一些接口，用来控制可视化图表的样式及展示的数据内容等等。相关的库还有HighCharts、阿里 G2、Chart.js等，还有  主打 3d 的three.js。

ECharts 基本用法

现在的项目多是用 webpack 构建工具，因此直接如下：

// # 安装echarts
npm install echarts -S

// 引入echarts，当然这是引入echarts的所有模块;如按需引入，需先引入主模块，然后再引入各个组件模块
// import引入模块，若是自执行模块，可以省略文件名，如：import '自执行模块'
import echarts from 'echarts'

// echarts实例化
// 有三个参数，参数1是元素必填，参数2是主题，参数3是选项（设备像素比，渲染器，宽高）
let newInstance = echarts.init(dom [,option])

// echarts实例初始化
// 一般情况会自定义图表组件，然后图表组件有props默认数据，然后父组件会通过props传递异步数据。图表组件watch props变化，然后更新。
// 但第一次初始化props数据时，不能触发watch，因此可以手动触发watch，即mounted时给props添加属性触发watch；还可以将watch里的逻辑抽离，然后在mounted里执行一次。
newInstance.setOption(option)

// 设置resize，echarts有自己的resize事件，无需自己控制。另外为resize时交互性更好，可以加节流
// 节流是间隔运行，防抖类似电梯，若有人上则一直停止运行
window.addEventLister('resize', throttle(() => {
  newInstance.resize();
}, 1000))

相关的知识点

1. echarts 结构
   • 其实也是类似 ps 的分层结构，series 里的很多类型图表都可以叠加在一个 echarts 实例上
   • 可以对每一层设置 zleave，然后然后可以根据 api 获取某一层的具体信息
   • 还可以将地图上的经纬度数据转换成坐标数据，进而可以基于具体地图上的点做些其他逻辑，如水波纹
2.  定义单个  图表组件时
   • 在 vue 的 mounted 钩子里通常会实例化， 通常还会  初始化（setOption），其实没有必要初始化，
   • 因为第一次即使初始化也是假数据，没有意义。另外就是第一次初始化数据时  也不会触发 watch。
   • 但可  以将 watch 里的逻辑抽离，然后在 mounted 里判断一下，如果有新数据则执行抽离的逻辑
3. 父子组件传值
   • props 方式，写默认数据啰嗦，不写又不明了
   • vuex 方式需要有  清晰的逻辑，后续完善。。。
4. 大数据块
   • 在做关于地图类的图表时，option 一般都需要很多很大的数据，可以将数据单独抽离成一个文件引入
   • vue 里 data 函数里定义的是响应式数据，如果不是页面响应式数据，可定义在实例外侧
5. 动画
   • 因为很多元素都是靠 js 操作获取的，单纯靠 css 动画比较困难，因此还可以借助第三方动画库对元素做一些动画，比如 animate或者tween
   • 逐祯动画如果步幅很小，也容易出现抖动的问题，应该如何解决？
   • 这些动画库都是相互独立的动画单元，但如果对以施加一定的逻辑，也可以实现非常可观的动画……
6. 消除滚轮，鼠标等事件

   // window.addEventListener('scroll mousewheel', fn),无法像jq那样同时绑定多个事件
   ["scroll", "mousewheel"].forEach(item => {
     window.addEventListener(item, e => {
       e.preventDefault && e.preventDefault();
       e.returnValue = false; // 已废除(但有旧浏览器支持)，用e.preventDefault()代替
       e.stopPropagation && e.stopPropagation();
       return false;
     });
   });
   

7. 禁止页面文字选中

   /* 如果配合autoprefixer，可以只写user-select:none */
   body {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
   

8. 背景图完全 100%适配屏幕
   8.1. 不考虑背景图失真，只需让其在屏幕任意缩放时充满屏幕（注意是不裁剪填充）可以用如下： ```css
   • { box-sizing: border-box; margin: 0; padding: 0; } .image { width: 100vw; height: 100vh; background-image: url(“xxx”); background-size: 100% 100%; }

     8.2. 上面的方式使得背景图比例失调，如果  是可裁剪充满屏幕，可以如下：
     ```css
     .box {
     width: 100vw;
     height: 100vh;
     background-image: url("xxx");
     background-position-x: 50%;
     background-position-y: 50%;
     background-size: cover;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     }
     

     8.3. 如果只使用 cover 属性值，则相比 8.2 只是一侧缩放，而 8.2 是两侧缩放

9. 引用数据类型，修改子组件影响父组件数据
   9.1. 栈 (stack)分配固定大小内存（存放指针及基本数据类型），系统自动回收内存。堆 (heap)是动态分配内存大小， 不自动释放内存（引用数据类型的数据存放于此）
   9.2.
   9.3. 如下:

   9.4.  知道了赋值与浅拷贝的区别，那深拷贝就是递归浅拷贝了。可以借助第三方库 lodash 等实现，还可以通过如下方式：

// 但需要指出的是这种方法对于包含function函数或者Date类型的对象则不管用
let deepCloneData = JSON.parse(JSON.stringify(originData));

1. vw 及 vh 及 rem
   10_1. rem 代表 html 元素的 font-size 大小，vw 是视口宽度的 1/100，vh 是视口高度的 1/100
   10_2. 设置 rem 基准值，设备像素又称物理像素，是设备能控制显示的最小单位；下面的设备独立像素暂可理解为屏幕一个方向的像素数，待完善！！！

   (function() {
     "use strict";
     /**
      * 根节点
      * @type {Element}
      */
     var el = document.documentElement,
       /**
        * 事件类型，如果不存在旋转事件，则以reisze代替
        * @type {String}
        */
       eventType =
         "orientationchange" in window ? "orientationchange" : "resize",
       /**
        * font size基准参考值
        * @type {Number}
        */
       size = 16,
       /**
        * 设备独立像素基准参考值，以 iPhone 6(s) 为基准
        * @type {Number}
        */
       dipWidth = 1600,
       /**
        * 设置根节点font-size
        */
       setRootFontSize = function() {
         el.style.fontSize = (el.clientWidth / dipWidth) * size + "px";
         window.$rootFontSize = el.style.fontSize.replace("px", "");
             
       };
     setRootFontSize();
     window.addEventListener(eventType, setRootFontSize, false);
     // dom加载完毕后计算，而非文档加载完毕（load事件）
     document.addEventListener("DOMContentLoaded", setRootFontSize, false);
   })();
   

   10_3.  屏幕缩放后页面要自适应，可以用 vw，vh 配合 css 的 calc()函数进行页面布局，字体等通过 rem 来适配页面。
   10_4. 在屏幕宽高变化时，echarts 图表  会 resize，但图表的尺寸依据的是容器的宽还是高并不固定， 而是依据屏幕分辨率比（也就是我们常说的 16:9 的屏幕  宽高比），当大于临界值时取哪个，当小于临界值时取哪个。
   

   // 当屏幕宽高比小于1.665时应用此样式，也就是高的值取自宽，也就是以宽为基准。
   // 这里子元素的宽高分别取之父元素的宽高，先calc()子元素宽高，然后将宽/高得出1.665。
   // 此处横向有三个元素，要计算每个父元素的一半尺寸；如果有3rem单位，可手动转换成px如：3 * (clientWidth/dipWidth) * baseFontSize
   @media screen and (max-aspect-ratio: 1665/1000) {
     .main .circle {
       height: calc((34vw - 16px) / 3 * 0.5);
       width: calc((34vw - 16px) / 3 * 0.5);
     }
   }
   

2. LED 字体 
   11_1. @font-face 的 CSS @规则 ，它允许网页开发者为其网页指定在线字体。意味着你可以为网页定制各种字体

   // 下载需要的字体，然后定义字体，font-family即是名字，使用时将定义的字体导入，直接使用即可
   // TrueType是苹果与微软开发的字体格式,扩展名为：.ttf
   // 注意这里的波浪线和别名之间没有斜杠
   @font-face {
     font-family: "Digital7Mono";
     src: url("~assets/xxx/Digital-7Mono-font.ttf") format("truetype");
     font-style: normal;
     font-weight: normal;
   }