vue-schart ： vue.js 的圖表組件

CoderStudy 發(fā)布于2019-08-20 17:19 / 1211人閱讀

摘要：介紹是使用封裝了圖表庫(kù)的一個(gè)小組件。支持倉(cāng)庫(kù)地址作為一個(gè)小型簡(jiǎn)單的圖表庫(kù)，沒(méi)有過(guò)多的圖表類(lèi)型，只包含了柱狀圖折線(xiàn)圖餅狀圖和環(huán)形圖四種基本的圖表。基本可以滿(mǎn)足這四種圖表的需求。

介紹

vue-schart 是使用vue.js封裝了sChart.js圖表庫(kù)的一個(gè)小組件。支持vue.js 1.x & 2.x

倉(cāng)庫(kù)地址：https://github.com/lin-xin/vue-schart

sChart.js 作為一個(gè)小型簡(jiǎn)單的圖表庫(kù)，沒(méi)有過(guò)多的圖表類(lèi)型，只包含了柱狀圖、折線(xiàn)圖、餅狀圖和環(huán)形圖四種基本的圖表。麻雀雖小，五臟俱全。sChart.js 基本可以滿(mǎn)足這四種圖表的需求。而它的小，體現(xiàn)在它的體積上，代碼只有 8kb，如果經(jīng)過(guò)服務(wù)器的Gzip壓縮，那就更小了，因此不用擔(dān)心造成項(xiàng)目代碼冗余。

該庫(kù)使用 canvas 實(shí)現(xiàn)，兼容 IE9 以上瀏覽器。

倉(cāng)庫(kù)地址：https://github.com/lin-xin/sChart.js

文檔(中英文)：http://blog.gdfengshuo.com/example/sChart/

演示地址：http://blog.gdfengshuo.com/example/#/vue-schart

效果

使用指南

安裝:

npm install vue-schart -S

在vue組件中使用:

應(yīng)用

vue-manage-system 后臺(tái)框架中應(yīng)用了 vue-schart 組件，體積小，加載快。

演示地址：http://blog.gdfengshuo.com/ex...

更多文章：lin-xin/blog 微信贊賞

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83484.html

相關(guān)文章

sChart.js：一個(gè)小型簡(jiǎn)單的圖表庫(kù)

摘要：介紹作為一個(gè)小型簡(jiǎn)單的圖表庫(kù)，沒(méi)有過(guò)多的圖表類(lèi)型，只包含了柱狀圖折線(xiàn)圖餅狀圖和環(huán)形圖四種基本的圖表。其他類(lèi)型的圖表格式都相同，可以同個(gè)數(shù)據(jù)生成不同圖表。相關(guān)是用封裝了的一個(gè)庫(kù)。方便在的項(xiàng)目中使用。這個(gè)庫(kù)當(dāng)然不足以與它們相媲美。介紹 sChart.js 作為一個(gè)小型簡(jiǎn)單的圖表庫(kù)，沒(méi)有過(guò)多的圖表類(lèi)型，只包含了柱狀圖、折線(xiàn)圖、餅狀圖和環(huán)形圖四種基本的圖表。麻雀雖小，五臟俱全。sChart....

microcosm1994 2019-08-20 16:55 評(píng)論0 收藏0
2017-06-18 前端日?qǐng)?bào)

摘要：前端日?qǐng)?bào)精選精讀高階組件知乎專(zhuān)欄是如何重新定義前端開(kāi)發(fā)的知乎專(zhuān)欄為您的性能選擇最佳的引擎知乎專(zhuān)欄中的尺寸單位掘金一種生成雪碧圖的懶惰姿勢(shì)中文第期編寫(xiě)現(xiàn)代代碼周刊第期的平凡之路我們到底可以通過(guò)多少種方式修改元素樣式掘金 2017-06-18 前端日?qǐng)?bào) 精選精讀 React 高階組件 - 知乎專(zhuān)欄React 是如何重新定義前端開(kāi)發(fā)的 - 知乎專(zhuān)欄為您的 Node 性能選擇最佳的 JS 引...

Yang_River 2019-08-20 17:20 評(píng)論0 收藏0
觀(guān)眾老爺們，來(lái)試試這個(gè)用 Vue 擼的數(shù)據(jù)可視化后臺(tái)吧

摘要：至于如何優(yōu)雅地管理使用，再次祭出潘神的文章手摸手，帶你優(yōu)雅的使用掘金項(xiàng)目的后端接口文檔我是用的進(jìn)行的管理，其實(shí)有很多強(qiáng)大的功能，不僅僅是一個(gè)接口測(cè)試工具，接口文檔管理就是其中一個(gè)。首先放個(gè)線(xiàn)上地址大家感受一下(由于后端用的是 leancloud 的免費(fèi)套餐，因此可能會(huì)比較慢)： vue-data-board P.S. 建議大家盡量自己注冊(cè)一個(gè)賬號(hào)(可以隨便填一個(gè)密碼)，如果用默認(rèn)的測(cè)...

JinB 2019-08-23 18:12 評(píng)論0 收藏0
用WijmoJS玩轉(zhuǎn)您的Web應(yīng)用 —— Vue.js

摘要：相反，我們將專(zhuān)注于將添加到用編寫(xiě)的簡(jiǎn)單應(yīng)用程序中。使用創(chuàng)建應(yīng)用程序。示例應(yīng)用程序有兩個(gè)組件應(yīng)用程序和。除在全球率先支持外，現(xiàn)已全面應(yīng)用于等主流框架中。 showImg(https://segmentfault.com/img/bVbcvaQ?w=500&h=278); 概述在本文中，我們將展示如何將WijmoJS與NPM和Webpack一起使用來(lái)創(chuàng)建最流行的基于JavaScript應(yīng)...

OnlyMyRailgun 2019-08-22 18:09 評(píng)論0 收藏0