Echarts基础-安装语法高亮插件&less-rem转换动态适配大小_echarts无法rem转换-程序员宅基地

技术标签：实用工具记录 echarts 前端 less

Echarts基础-安装语法高亮插件&less-rem转换动态适配大小

基础介绍
插件安装教程

基础介绍

Echarts是一个功能强大的JavaScript开源可视化库，专门用于创建各种图表和数据可视化。
以下是关于Echarts的一些基础介绍：

丰富的图表类型：Echarts提供了包括折线图、柱状图、散点图、饼图、雷达图、地图等多种常见的图表类型，满足不同的数据展示需求。
兼容性良好：它可以流畅运行在PC和移动设备上，并且兼容多种浏览器，如IE8/9/10/11，Chrome，Firefox，Safari等。
底层依赖ZRender：Echarts底层依赖于矢量图形库ZRender，这使得其能够提供直观且交互性强的数据可视化效果。
易于配置和使用：用户可以通过简单的配置来生成所需的图表，而无需深入了解复杂的编程知识。
高度可定制性：Echarts允许用户根据需要对图表进行个性化定制，以满足特定的展示要求。
开源和免费：作为开源项目，Echarts可以免费使用，并且拥有活跃的社区支持，不断有新功能和改进加入。

插件安装教程

在这里插入图片描述

安装less 插件

Easy LESS

CSS的less语法，新建less文件后自动生成同名css文件

在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)

博主 DTcode7 带您溺亖在知识的海洋里，嘿嘿嘿.~
个人主页—— DTcode7 的博客
 《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

学习了Echarts，你就能快速搭建出数据大屏，是不是很酷炫！
在这里插入图片描述
ps：这张图就是AI生成的，不得不说AI是真的方便，以前还要自己找半天素材，现在输入几个字，就能搞出一张很不错的素材图，大家一定要勇于接触新事物，能让你的办事效率大大提升！
可以参考这几篇AI的博客：
《AIGC相关博客专栏》

AI时代-普通人的AI绘画工具对比（Midjouney与Stable Diffusion）
stable diffusion 提示词进阶语法-年龄&身材&肤色-学习小结
 stable diffusion 提示词进阶语法-学习小结
 stable diffusion webUI之赛博菩萨【秋葉】——工具包新手安裝与使用教程

本文链接：https://blog.csdn.net/black_cat7/article/details/137497458

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios