Echarts基础-安装语法高亮插件&less-rem转换动态适配大小
基础介绍
Echarts是一个功能强大的JavaScript开源可视化库，专门用于创建各种图表和数据可视化。
以下是关于Echarts的一些基础介绍：
- 丰富的图表类型：Echarts提供了包括折线图、柱状图、散点图、饼图、雷达图、地图等多种常见的图表类型，满足不同的数据展示需求。
- 兼容性良好：它可以流畅运行在PC和移动设备上，并且兼容多种浏览器，如IE8/9/10/11，Chrome，Firefox，Safari等。
- 底层依赖ZRender：Echarts底层依赖于矢量图形库ZRender，这使得其能够提供直观且交互性强的数据可视化效果。
- 易于配置和使用：用户可以通过简单的配置来生成所需的图表，而无需深入了解复杂的编程知识。
- 高度可定制性：Echarts允许用户根据需要对图表进行个性化定制，以满足特定的展示要求。
- 开源和免费：作为开源项目，Echarts可以免费使用，并且拥有活跃的社区支持，不断有新功能和改进加入。
插件安装教程
安装less 插件
Easy LESS
在css文件中新建style.less,会自动生成style.css文件
我们在style.less里面编写样式，会自动同步到style.css里面
但是在引入样式时，我们还是写
<link rel="stylesheet" href="./css/style.css">
只引入style.css文件就行了
安装cssrem 插件
cssrem 直接将px转换为rem
在这个插件的设置里将Cssrem: Root Font Size 设置为80，表示每80px为1rem
这样，在css中输入80px就会跳出一个转换为1rem的提示
引入flexibel.js文件
这个js文件会随着屏幕的宽度改变进而改变设置的样式大小
修改这个js文件内的
var rem = docEl.clientWidth / 24;
这样，1920px屏幕下，每份rem就被分成80px了
比如：在1920px宽度下，设置一个文字宽度为1rem，则表示当前其width:80px (1920/24=80px)
当屏幕缩小为900px时，这个文字的宽度就变成：width:37.5px (900/24=37.5px)
学习了Echarts，你就能快速搭建出数据大屏，是不是很酷炫！
ps：这张图就是AI生成的，不得不说AI是真的方便，以前还要自己找半天素材，现在输入几个字，就能搞出一张很不错的素材图，大家一定要勇于接触新事物，能让你的办事效率大大提升！
可以参考这几篇AI的博客：
《AIGC相关博客专栏》
