vue-schart : vue.js 的图表组件
原文地址:http://blog.gdfengshuo.com/article/16/
介绍
vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件。支持vue.js 1.x & 2.x
sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小,五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小,体现在它的体积上,代码只有 8kb,如果经过服务器的Gzip压缩,那就更小了,因此不用担心造成项目代码冗余。
该库使用 canvas 实现,兼容 IE9 以上浏览器。
- 仓库地址: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组件中使用:
<template>
<div id="app">
<schart :canvasId="canvasId"
:type="type"
:width="width"
:height="height"
:data="data"
:options="options"
></schart>
</div>
</template>
<script>
import Schart from 'vue-schart';
export default {
data() {
return {
canvasId: 'myCanvas',
type: 'bar',
width: 500,
height: 400,
data: [
{name: '2014', value: 1342},
{name: '2015', value: 2123},
{name: '2016', value: 1654},
{name: '2017', value: 1795},
],
options: {
title: 'Total sales of stores in recent years'
}
}
},
components:{
Schart
}
}
</script>
应用
vue-manage-system 后台框架中应用了 vue-schart 组件,体积小,加载快。
演示地址:http://blog.gdfengshuo.com/example/work/#/basecharts
更多文章:lin-xin/blog
vue-schart : vue.js 的图表组件的更多相关文章
- Vue结合原生js实现自定义组件自动生成
就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数 ...
- Vue文件 引入.js文件 的组件
Vue.component('remote-script', { render: function (createElement) { var self = this; return createEl ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- Vue.js——60分钟组件快速入门(上篇)
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟组件快速入门(下篇)
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
- 转: Vue.js——60分钟组件快速入门(上篇)
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- vue.js学习之组件(下篇)
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- vue.js实例对象+组件树
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...
随机推荐
- 解析http协议的url
package util; import java.io.BufferedReader;import java.io.InputStream;import java.io.InputStreamRea ...
- Java多线程中的单例模式
一.在多线程环境下创建单例 方式一: package com.ietree.multithread.sync; public class Singletion { private static cla ...
- Vue2.x中的父组件数据传递至子组件
父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...
- 蓝桥杯-打印十字图-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- Linux 定时任务详解
原文地址:http://edu.codepub.com/2011/0104/28518.php crond分为系统级定时和用户级定时,系统级定时主要编辑/etc/crontab,用户级定时主要利用 ...
- hdu2059 龟兔赛跑 DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2059 虽然 知道是DP ,刚开始一直没有想出状态转移方程. 刚开始的思路就是定义dp[i]表示到达第i ...
- struts和struts2的区别
1.Structs2简介和Structs2开发环境搭建 一.Structs2简介: 1.什么是Struct2? 著名的SSH三大框架分别为:表现层(Structs).业务逻辑层(Spring),持久化 ...
- Eclipse常用的6个Debug技巧
1. Ctrl+Shift+i: Person father = new Person(); father.setName("father"); System.out.printl ...
- 编写自己的一个简单的web容器(二)
昨天我们已经能够确定浏览器的请求能够被我们自己编写的服务类所接收并且我们服务类响应的数据也能够正常发送到浏览器客户端,那么我们今天要解决的问题就是让我们的数据能够被浏览器识别并解析. Http(Htt ...
- Arduino编译bootloader
最近打算自己定制一个Arduino的板子,改改Arduino的烧写机制.好在bootloader都是有源代码的,说干就干,改写前当然要试试这个源码能不能编译,可是到了bootloader目录就茫然了. ...