首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

17 Most popular Vue.js plugins

Vue 被一个健康插件和包生态系统所加强,使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择框架,所以有一个不断增长插件和包库,你可以在项目中使用。...Vue ChartJS 链接地址:https://www.npmjs.com/package/vue-chartjs 想在你 Vue 应用程序中添加图表?可以看看 Chart.js。...它是一个为设计师和开发者提供简单而灵活 JS 图表库。它有许多漂亮图表类型可供选择。...3 Forms 课程中介绍了如何使用这个库。...主要特征: 常用交互功能: 移动端缩放、 拖动、 平移、 拖动标记、 捏拉缩放 自定义切片图层 手机硬件加速 标记, 弹出窗口 图像叠加 TroisJS 地址:https://troisjs.github.io

6K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    推荐12个最好 JavaScript 图形绘制库

    D3 是最流行可视化库之一,它被很多其他表格插件所使用。它允许绑定任意数据到 DOM,然后将数据驱动转换应用到文档中。...你可以使用它用一个数组创建基本 HMTL 表格,或是利用它流体过度和交互,用相似的数据创建惊人 SVG 条形图。 ChartJS ?...它有很强交互功能,有许多信息提示,可 点击 legend 关键字,还有 dril-down,缩放/滚动 和单击打印图表功能。 Flot ?...Flot 是受 Plotr 和 PlotKit  启发,Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为 flot。...Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图,可以被控制,并通过对 CSS3 媒体查询和 SASS 定制。另外 Chartist.js 提供很酷动画。

    7.5K30

    6个你应该知道 JavaScript 图表

    家好,我是「前端实验室」爱分享了不起~ 上次给大家分享卧槽!Javascript 图表绘制还能这么玩? 今天再给大家推荐6款超牛JavaScript 图表库~ 1....ECharts ECharts 是一个基于 JavaScript 开源可视化图表库,涵盖各行业图表,多达20多种图表和十几种组件,支持各种图表和组件任意组合,满足各种需求,也是前端项目中大屏应用最多...ChartJS ChartJS图表提供了漂亮平面设计,如果是追求其展现和动画效果项目,ChartJS 是个不错选择。...ChartJS 图表默认是响应式,它们在手机和平板电脑上运行良好,开箱即用。 官网地址:https://www.chartjs.org/ 4....提供图表组件都是交互式且支持自定义选项,跨浏览器兼容性(为较旧 IE 版本采用 VML),以及跨平台移植到 iOS 和新 Android 版本能力。无需插件

    1.7K30

    javascript 组件

    cycle2 普通幻灯 浏览图片 fancybox 弹出查看图片,视屏等等 demo yoxview 弹出查看图片,图片尺寸缩放很自然 图片墙 wookmark 加载资源 imagesLoaded...选取图片都加载好后执行回调 表单验证 jQuery-Validation-Engine 表格组件 datatables 表格可交互(对内容进行排序,删除等) 图表组件 highcharts...是收费。。。 390$ * 6 = 2400左右 flot 文档不给力 chartJs 中文文档 demo很漂亮,很清晰。比较轻量级。 ichartJs 中国一个家伙搞,感觉还不错。...内容(不能跨域,所以后台要做代理,所谓解析Rss其实就是解析xml) jFeed jRss 简单版jFeed 其他 nouislider 用滚动条来设置/控制(音量等) blockUI...也可以自己定制loadingcss

    1.3K30

    20多个好用 Vue 组件库,请查收!

    .. handsontable是一款页面端表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。...Vue Toasted是 Vue 最好toast(提示)插件之一。它被Vue,Laravel,NuxtJS 等许多组织所信任,它响应性强,兼容性好,使用方便,吸引人,有丰富功能、图标、动作等。...Apexcharts是一个现代JavaScript图表库/可通过简单API构建交互式图表和可视化。Vue Apexcharts是ApexChartsVue.js组件。...vue-chartjs 是一个 Vue 对于 Chart.js 封装,让用户可以在Vue中轻松使用Chart.js,很简单创建可复用图表组件,非常适合需要简单图表并尽可能快地运行的人。...V-Charts 是基于 Vue2.0 和 Echarts 封装图标组件,只需要统一提供一种对前后端都友好数据格式设置简单配置项,就可以生成常见图表

    7.4K10

    BlazorCharts 原生图表建设历程

    基于G2Plot mariusmuntean/ChartJs.Blazor - 基于ChartJs blazor-cn/Blazor.ECharts - 基于ECharts ant-design-charts-blazor...可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用于描述二维矢量图形,基于 XML 标记语言。...使用简单 组件库是拿来用,所以使用方式要简单,使用方法要符合常规逻辑,争取使用时最大可能减少对文档依赖。 功能实用 实现一堆极少场景才会使用图表,不如集中精力做好用最多那些图表。...实现方式介绍 首先我们看一下图表包含基本元素 基于这个结构,下面是我项目的类图,通过一些抽象,将图表一些元素进行了归纳。...图表中每一个元素大小位置变化都会影响到其他元素,所以位置和布局的确定存在一个先后关系,顺序如下: 图表效果 下面是一个最简单图表示例 所需配置 <BcChart Height="600" Width

    1.4K10

    2019年最好JavaScript图表

    与此同时,高分辨率屏幕出现以及通过触摸手势进行更常见缩放,使分辨率独立矢量图表成为最前沿。 进入当前由JavaScript和SVG(可缩放矢量图形)主导数据可视化时代。...需要明确定义包括轴和其他图表项在内所有元素。许多示例显示了如何使用CSS来设置图表元素样式。没有基于图表功能自动应用。如果你想进入杂草并利用创造力来完全控制每一个元素,那么它是最好选择。...包含示例使用配置对象来自定义图表。创建和控制图表类型设置非常易于使用。指定更复杂图表类型需要很少属性设置,而JSCharting具有强大动态默认,这意味着它会尝试自动为场景选择最佳设置。...API已详细记录,每个属性都有示例图表。还提供173页PDF手册。 两个月试用期可供评估。试用期结束后需要许可。 chart.js https://www.chartjs.org/ ?...它使用canvas元素进行渲染,并对窗口大小调整进行响应以保持缩放粒度。它向后兼容IE9。Polyfill也可以与IE7一起使用。 样本视觉效果相当现代,并且在首次绘制时包含初始动画。

    5.1K20

    如何设置HashMap容量初始

    如何设置HashMap容量初始?...ok,我们还是找到崇山版编程规范,这是最新文档,在阿里《阿里编程规范崇山版》#(六) 集合处理 # 17里找到阿里规范对hashMap初始化容量建议: 【推荐】集合初始化时,指定集合初始大小...注意负载因子(即 loader factor)默认 为 0.75,如果暂时无法确定初始大小,请设置为 16(即默认)。...反例: HashMap 需要放置 1024 个元素,由于没有设置容量初始大小,随着元素增加而被迫不断扩容, resize()方法总共会调用 8 次,反复重建哈希表和数据迁移。...从上面信息可以知道几个知识点: HashMap默认初始化容量是16,也就是不指定情况,就是16 规范里建议我们设置 initialCapacity = (需要存储元素个数 / 负载因子) + 1

    6.2K20

    【学习】15个最棒JavaScript图形图表

    阅读目录 D3.js — Data-Driven Documents Google Charts ChartJS Chartist.js n3-charts Ember Charts Smoothie...此外,一个好图也可以提高你网站整体设计。 这篇文章为大家展示一些最好JavaScript图形/图表库。这些库会为你将来项目创建漂亮可定制化图表。...D3.js不支持旧版本浏览器,如IE8,为了跨浏览器适应,你可以使用 aight插件。 回到顶部 Google Charts ? Google Charts 创 建图表更加简单。...它还包含支持旧版本IEVML。 这里是一些使用Google Charts生成图表例子。 回到顶部 ChartJS ? ChartJS图表提供了漂亮平面设计风格。...它通过HTML5canvas属性渲染。支持旧版本浏览器如IE7/8。ChartJS 默认是响应式,它良好适应手机端和平板端。 回到顶部 Chartist.js ?

    4.2K40

    62款前端数据可视化插件大盘点

    我把前端数据可视化分为了五种: 1.图表 2.图谱 3.地图 4.关系图 5.立体图 我将按照顺序介绍62款前端可视化插件,下面就分享下其中34款图表插件: 1.amcharts url: http:/...8.chartjs url:http://www.chartjs.org/ github:https://github.com/nnnick/Chart.js browser:IE9+、chrome、safari...、firefox、opear、部分支持IE7/8 resume:chartjs是一个可以绘制多种图表库,使用了html5canvas技术 ?...jscharts绘制图表是一个简单和容易任务,因为您只需要使用客户端脚本(即由web浏览器)。不需要额外插件或服务器模块。...提供超过100个图表类型,独特特性,如缩放和交互式。 ? 小结: 每款插件各有千秋,根据项目需求挑选不同插件

    24.4K101

    【Demo】各类图表Demo源码+相关组件

    各类图表功能,小程序自带API并没有提供,所以很多人就用了其他方法来实现,极乐大叔将这些实现方法和教程聚合一下,以便大家能够迅速而方便使用。...— 相关文章 — 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 在微信小程序中绘制图表:饼图绘制及如何添加动画效果 微信小程序不支持图表工具,通过实例带你了解绘制方案...— 相关组件 — 微信小程序精品插件图表charts组件:适用1122版本 wxChart:微信小程序图表插件:饼状图,K线图 wx-charts:基于canvas绘制:饼图,线图,柱状图 微信小程序精品组件...:chartjs:饼图,折线图,bar,point-styles 微信小程序实用组件:带有x轴y轴折线图 微信小程序demo推荐:股票;动态分时图、K线图 微信小程序demo组件:canvas股票分时图...基于微信小程序 Canvas API 实现柱状图和趋势图 微信小程序demo:canvas手绘雷达图 微信小程序学习用demo:wx-charts-demo;图表插件学习demo 微信小程序练习demo

    3.7K90

    前端组件整理

    外观比uniform好 switchery ios7风格开关组件 nouislider 用滚动条来设置/控制(音量等) 图片类 holderjs 生成占位图片 lazyload imagesLoaded...选取图片都加载好后执行回调 浏览图片 fancybox 弹出查看图片,视屏等等 demo yoxview 弹出查看图片,图片尺寸缩放很自然 图片墙 wookmark UI组件类 数据可视化(图表...是收费。 Plottable.JS 基于D3一个图表库 flot 文档不给力 chartJs 中文文档 demo很漂亮,很清晰。比较轻量级。...jquery动画不支持颜色变化。改库提供了这个支持。...transit 对元素进行css变换 视觉差插件 scrollorama 比较简单 superscrollorama 能做效果更多,但要用第三方Tween库,使用起来比较复杂。

    12.8K40

    vue常用组件库_vue内置组件

    :应用于Vuejs2TwitterBootstrap 4组件 vue-swipe:VueJS触摸滑块 vue-amap:基于Vue 2和高德地图地图组件 vue-chartjs:vue中Chartjs...:VueJS移动加载指示器插件 chartjs:Vue Bulmachartjs组件 vue-scroll:vue滚动 vue-ripple:制作谷歌MD风格涟漪效果Vue组件 vue-touch-keyboard...– VueJSMarkdown编辑器组件 vue-quill – vue组件构建quill编辑器 05、图表 Echarts vue-table – 简化数据表格 vue-chartjs –...vue中Chartjs封装 vue-charts – 轻松渲染一个图表 vue-chart – 强大高速vue图表解析 vue-highcharts – HighCharts组件 chartjs...– Vue Bulmachartjs组件 vue-chartkick – VueJS一行代码实现优美图表 06、日历 vue-calendar – 日期选择插件 vue-datepicker –

    8K20

    2021,17个 最流行 Vue 插件

    Vue 被一个健康插件和包生态系统所加强,使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择框架,所以有一个不断增长插件和包库,你可以在项目中使用。...你是否曾纠结于如何让应用在视觉上看起来更吸引人?Vuetify是一个基于Material DesignUI库,支持谷歌和Android设计语言。...vue-meta有以下特点: 在组件内设置 metaInfo,便可轻松实现头部标签管理 metaInfo 数据都是响应,如果数据变化,头部信息会自动更新 支持 SSR Vue ChartJS...想在你Vue应用程序中添加图表?可以看看 Chart.js。它是一个为设计师和开发者提供简单而灵活 JS 图表库。它有许多漂亮图表类型可供选择。...一个Vue组件,可轻松设置滚动驱动交互(又称滚动讲演)。 在引擎盖下使用 Scrollama。

    4.3K10

    解决laravel-admin 自己新建页面里 js 需要刷新一次问题

    主要是参考laravel-admin 自定义图表 方法,下面简要介绍一下 1、将需要用到需要引用插件采用下面的方法引入: 用echart.js举例,首先要下载echart.js,放到public目录下面...vendor/echart.js目录,然后在app/Admin/bootstrap.php引入组件: use Encore\Admin\Facades\Admin; Admin::js('/vendor/chartjs.../prettydocs/js/main.js’); 这个其实在bootstrap.php注释中是有简单介绍。...2、新建你自己视图文件,另外可以将本页面用到js添加上 <script $(function () { //放入你js }); </script 3、将你页面引入当前框架 public........'); $content- body(view('admin.charts.bar')); }); } 以上这篇解决laravel-admin 自己新建页面里 js 需要刷新一次问题就是小编分享给大家全部内容了

    1.8K31
    领券