这是我参与「第四届青训营 」笔记创作活动的第14天
前言
数据可视化是前端中重要的领域，在本次青训营中，老师介绍了目前主流的可视化库，例如：D3，Vega,G2,Echarts等。
因为我选择了监控系统作为大作业，在大作业中选择用开源且生态良好的Echarts作图，故在此对Echarts的学习做个记录。
本文旨在让大家熟悉和使用Echarts，故会对开发流程进行详细的阐述。在下一篇中会介绍如何封装Echarts，使其作为components方便高效的在项目中使用。
Echarts简介
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给基金会，成为ASF孵化级项目。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。(来源自百度百科)
Echarts获取及官方说明
开发环境：win10+vscode+vue3
npm下载Echarts: npm install echarts --save
Echarts官网: echarts.apache.org/
官网示例：echarts.apache.org/examples/zh…
Echarts项目简单使用
- 首先创建项目，整体目录如下：
2) 在views/Homeview.vue里使用Echarts(数据来自Echarts官网实例)
实际效果如下：
疑难点说明
<div id="main" style="height: 500px; width:600px"></div>
var myChart = echarts.init(document.getElementById('main'))
在template中 我们通过id来识别,在div中要对图进行style配置,如无其他设置，去掉style会不显示图！！！
总结
通过本文的学习，大家应该能初步掌握Echarts的用法。图的类型有很多种，比如折线图，柱状图，饼图，散点图，大家可以在echarts.apache.org/examples/zh…找到想要的图，点击图片可以进入到提供js和ts代码的页面，该页面是个互动式的页面，大家可以在里面尽情的调试~ 咱们下一篇再见啦
