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

这篇具有很好参考价值的文章主要介绍了Echarts基础-安装语法高亮插件&less-rem转换动态适配大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基础介绍

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

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

插件安装教程

Echarts基础-安装语法高亮插件&less-rem转换动态适配大小,实用工具记录,echarts,less,前端
Echarts基础-安装语法高亮插件&less-rem转换动态适配大小,实用工具记录,echarts,less,前端

安装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,你就能快速搭建出数据大屏,是不是很酷炫!
Echarts基础-安装语法高亮插件&less-rem转换动态适配大小,实用工具记录,echarts,less,前端
ps:这张图就是AI生成的,不得不说AI是真的方便,以前还要自己找半天素材,现在输入几个字,就能搞出一张很不错的素材图,大家一定要勇于接触新事物,能让你的办事效率大大提升!
可以参考这几篇AI的博客:
《AIGC相关博客专栏》

AI时代-普通人的AI绘画工具对比(Midjouney与Stable Diffusion)
stable diffusion 提示词进阶语法-年龄&身材&肤色-学习小结
stable diffusion 提示词进阶语法-学习小结
stable diffusion webUI之赛博菩萨【秋葉】——工具包新手安裝与使用教程文章来源地址https://www.toymoban.com/news/detail-846660.html

到了这里,关于Echarts基础-安装语法高亮插件&less-rem转换动态适配大小的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Crayon Syntax Highlighter 强大的WP代码高亮插件安装方法

    无意中发现一款功能强大的Wordpress代码高亮插件 – Crayon Syntax Highlighter,我认为可以算是目前样式最多、易用性最高、功能最强的 WP 代码高亮插件了,程序员必备插件。 效果图: WordPress代码高亮插件(Crayon Syntax Highlighter) v2.7.2 类型: php其它 大小: 1.8MB 语言: 英文软件 时间

    2023年04月16日
    浏览(33)
  • 工具-Obsidian生产力工具,安装第三方插件(GitHub)教程,以安装Syntax Highlight(代码高亮)为例

    在GitHub的搜索框中,直接搜索obsidian +插件名,obsidian+Syntax Highlight 点进页面 一定要选择release版本的! 只需要下载css json js 文件,点击直接下载 个人习惯,每个插件,新建一个文件夹,命名好名字,放置路径为你的obsidian 工作区 的.obsidian 文件 进入到plugins文件中 新建立文件

    2023年04月22日
    浏览(39)
  • Less的基本语法

    less的每一个语句后必须使用\\\";\\\"结束,否则可能无法正确的转换成css 1、导入 即在当前less文件中引用其它less文件,被引入的less文件中的内容可以在此less文件中使用。在引用less文件时可以省略扩展名 2、注释 less的注释有两种, 一种为单选注释,以“//”开头,“//”后的内容

    2024年02月07日
    浏览(24)
  • Less基本语法

    编写的Less文件需要通过编译器转换为常规css后,才能被浏览器识别和应用。 变量 (Variables):在 Less 中,可以定义变量并将其用于整个样式表中,减少重复输入和提高一致性。 嵌套规则 (Nested Rules):类似于 Sass,Less 允许你将选择器嵌套在其他选择器内,模仿 HTML 结构。 混合

    2024年02月21日
    浏览(25)
  • less学习语法

    1.rgb/rgba/translate/rotate/scale 2.非常好用的css函数: var :使用css定义的变量 calc :计算css值,通常用于计算元素的大小或位置 blur :毛玻璃(高斯模糊)效果 gradient :颜色渐变函数  css中可以自定义属性: 属性名需要两个减号(--)开始 属性值则可以是任何有效的CSS值 所以我们可以

    2024年02月12日
    浏览(24)
  • 移动端Vant-Ui库以及适配Rem插件

    Vant下载以及使用 看官方文档下载一定要看清楚你要下载的是那个版本的项目 下载完成之后接下就是怎么去使用它 官方文档分三种引入使用 (1).是按需引入需要那个组件引入那个可以减少项目的大小也方便开发 上面分别也有注释首先引入VUE因为我们需要在上面挂在我们所按需

    2024年02月03日
    浏览(43)
  • 打开vim的语法高亮

    在一个Ubuntu中自带的vim版本是8.2.4919,默认就是开始了语法高亮的,打开一个Java文件效果如下: 它不仅仅对Java文件有语法高亮,对很多的文件都有,比如vim的配置文件也有语法高亮,有语法高亮时读起来会容易很多,如果没有语法高亮的话,一眼看过去全是白色的,感觉会

    2024年02月12日
    浏览(61)
  • Echarts+高德地图,获取全国省市区,区域板块地图获取并高亮显示

    当用户选择省市区之后,可以看到对应区域的高亮显示。 如图: 之前用户选择的是江苏省,因此当前高亮显示的是江苏省地图板块,如果之前用户选择的是成都市,那么地图则会变成四川省的版图,高亮显示成都市,如下图: 可以继续下钻,选择区域高亮显示。 这里分享一个

    2024年02月16日
    浏览(37)
  • echarts 使用地图,设置背景图片和高亮图片,点击实现高亮显示,更换散点图图片,高亮散点图形,3D悬浮效果展示地图,集成Vue组件

    先看下   需要实现的效果: 第一步 需准备需要的插件  1  注意新版 echarts 的引入方式为:  import * as echarts from \\\'echarts\\\',这里我把 echarts 直接挂载到了Vue上,本项目使用echarts比较多,这样的话很方便,也可以在需要echarts的模块按需引入        在main.js中添加以下代码:

    2024年02月10日
    浏览(41)
  • 前端:css less语法 /deep/ 深度影响的用法

    css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式。 这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免父组件对子组件的样式的影响。 添加后控制台显示的样式就会像这样:     设置

    2024年02月12日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包