暑假第五周
ES10-11,ECharts入门,华为官网部分
ES10
对象扩展方法
Object.fromEntries
trimStart 清除左侧空白
trimEnd 清除右侧空白
flat 将多维数组转化为低位数组,参数为深度,是一个数字(相当于展开数组层数)
flatMap
Symbol.prototype.description
ES11
私有属性
<script>
class Person{
//公有属性
name;
//私有属性
#age;
#weight;
//构造方法
constructor(name,age,weight){
this.name = name;
this.#age = age;
this.#weight = weight;
}
intro(){
console.log(this.name);
console.log(this.#age);
console.log(this.#weight);
}
}
//实例化
const girl = new Person('哈哈',19,'45kg');
console.log(girl);
</script>
ES11
Promise.allSetted
字符串扩展 String.prototype.mathchAll
返回 可迭代对象
可迭代操作符 ?.
动态import
BigInt类型
绝对全局变量globalThis
一、Echarts
1.项目运行
启动后端工程:
cd koa2-server
npm install
node app.js
启动前端工程:
cd vision
npm install
npm run serve
2.技术选型
Echarts
Vue, Vue Router, vuex
Webpack
Axios
WebSocket
3.数据可视化
把数据以更直观的形式展现 ——图表
清晰有效的传达与沟通信息
可视化的实现方式:报表类(Excel、水晶报表)、商业智能BI(Microsoft BI、Power-BI)、编码类(ECharts.js 、D3.js)
二、ECharts的介绍
ECharts是一个使用JavaScript实现的开源可视化库,兼容性强,底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
实现步骤:
1.引入echarts.js文件
2.准备一个呈现图表的盒子
3.初始化echarts实例对象
4.准备配置项
5.将配置项设置给echarts实例对象
三、ECharts的基本使用
相关配置
xAxis: x轴
yAxis: y轴
series: 系列列表。每个系列通过type决定自己的图表类型
- type: ‘bar’:柱状/条形图
- type: ‘line’:折线/面积图
- type: ‘pie’:饼图
- type: ‘scatter’:散点(气泡)图
- type: ‘effectScatter’:带有涟漪特效动画的散点(气泡)
- type: ‘radar’:雷达图
- type: ‘tree’:树型图
- type: ‘treemap’:树型图
- type: ‘sunburst’:旭日图
- type: ‘boxplot’:箱形图
- type: ‘candlestick’:K线图
- type: ‘heatmap’:热力图
- type: ‘map’:地图
- type: ‘parallel’:平行坐标系的系列
- type: ‘lines’:线图
- type: ‘graph’:关系图
- type: ‘sankey’:桑基图
- type: ‘funnel’:漏斗图
- type: ‘gauge’:仪表盘
- type: ‘pictorialBar’:象形柱图
- type: ‘themeRiver’:主题河流
- type: ‘custom’:自定义系列
四、 总结
这周把ES10和11剩余的给学完了,ECharts学了一点不是很多,然后把华为官网完成一点,还写下了python期末作业,就这样一周过去了,也没学到啥,有好多地方都迷糊过去了,学完不知道咋用。快开学了,剩下的时间把期末作业完成,应该不会学新的内容了,最后把华为官网彻底完善,不能再拖了。