echarts.js 数据可视化

echarts.js是最简单的数据可视化，d3.js才是值得深入研究的

引入方式

无打包工具 webpack/ parcel 情况下 直接bootcdn script方式引入

有打包工具 webpack/ parcel 情况下 , 运行下面两句

• npm init --- 生成 package.json
• npm install echarts
• npm install -D @types/echarts // 用于webstorm中加强代码提示的，可以不加
• 然后在main.js中 用官方文档的方式

var echarts = require('echarts');
console.log(echarts); // 能打出东西即可

术语速查手册帮助你快速入门配置项

echarts.apache.org/zh/cheat-sh…

换肤

1. echarts.apache.org/zh/theme-bu… 上面配置颜色
2. 下载主题包
3. import themeName.js
4. echarts.init(document.getElementById('main'),'themeName');

脚本script vs 模块module

• ES5以及之前版本中，只有一种源文件类型script，ES6 引入了模块机制，有两种源文件，一种script，一种module
• script是可以由浏览器或者 node 环境引入执行的，而模块只能由 JS 代码 import 引入。
• 语法层面，module和script之间区别仅仅在于是否包含 import 和 export
• 浏览器也可以支持 script 标签引入module，必须给 script 标签添加 type=“module”

setOption更新数据

• 把新增的数据补充进去即可

如何展示loading

避免多次发起加载数据请求？

let isLoading=false; // 外部定义一个变量

// 触发的函数体内部
if(isLoading){return} // 写在第一行 表示你每次点进来我都判断一下，如果正在加载我就直接出去了
isLoading=true; // 第二行赋值
// 接收到参数以后,重新置false
isLoading=false;

如何适配手机？

1. meta viewport 抄taobao
2. 获取页面宽度 const width = document.documentElement.clientWidth;
3. 设置echarts容器的宽度以及高度

if(width<500){ // 如果屏幕宽度是手机就撑满整个手机宽度
  dom.style.width = `${width}px`;
  dom.style.height = `${width * 1.2}px`;
}

Echarts额外提供了类似@media的功能

Vue中使用Echarts / 封装一个Vue-Echarts组件

• 【封装一个Vue-Echarts组件 或者说如何让Echarts在Vue中正确使用】 本质就是让Echarts的使用思路 改写成符合Vue框架的代码 ！