原文地址: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 以上浏览器。

效果

使用指南

安装:

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 的图表组件的更多相关文章

  1. Vue结合原生js实现自定义组件自动生成

    就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数 ...

  2. Vue文件 引入.js文件 的组件

    Vue.component('remote-script', { render: function (createElement) { var self = this; return createEl ...

  3. vue.js相关UI组件收集

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...

  4. Vue.js——60分钟组件快速入门(上篇)

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  5. Vue.js——60分钟组件快速入门(下篇)

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  6. 转: Vue.js——60分钟组件快速入门(上篇)

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  7. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  8. vue.js学习之组件(下篇)

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  9. vue.js实例对象+组件树

    vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...

随机推荐

  1. JS模式--职责链模式

    职责链模式的定义:使用多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链, 并沿着这条链条传递下去,直到有一个对象处理它为止. var order500 = f ...

  2. ORB_SLAM2之Pangolin的安装与问题处理

    前言 本篇博客中,我们主要介绍了在安装ORB_SLAM2所需的第三方库Pangolin的过程中遇到的一些问题及解决方法. 1.Pangolin是什么? Pangolin是一个用于OpenGL显示/交互 ...

  3. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...

  4. Gym - 101102C线段树

    Judge Bahosain was bored at ACM AmrahCPC 2016 as the winner of the contest had the first rank from t ...

  5. UIView的属性

    .alpha 设置视图的透明度.默认为1. // 完全透明 view.alpha = ; // 不透明 view.alpha = ; .clipsToBounds // 默认是NO,当设置为yes时, ...

  6. python课程day_2-->总结-->字符串功能

    =======================课程大纲=======================> 基本数据类型 - 整数 - 布尔值 - 字符串 - 列表 - 元组 - 字典 - 集合 工 ...

  7. json、xml和java对象之间的转化

    其实从面相对象的角度来理解这个问题,就会很清晰.java中的一切皆对象即把世间万物(Everything in the world)看做java对象,任何处理不了的问题都可以先转化成java对象在做处 ...

  8. [刷题]算法竞赛入门经典(第2版) 5-12/UVa511 - Do You Know the Way to San Jose?

    题意:N张地图,查找某地点在不在某些地图上,若在,使用细节多的地图.使用哪个地图的破要求挺多,细心一点就好. 代码:(Accepted,0.000s) //UVa511 - Do You Know t ...

  9. 无分类编址(CIDR)构成超网

    CIDR(无分类域间路由选择) CIDR最主要有两个以下特点: 消除传统的A,B,C地址和划分子网的概念,更有效的分配IPv4的地址空间,CIDR使IP地址又回到无分类的两级编码.记法:IP地址::= ...

  10. Source Insignt注册码

    分享一下google来的 呵呵 Source Insight,一个无比强大的工具.一个很好的查看代码的工具.到它的官网上去看一下,就知道,世界上基本上所有的大的软件公司,都在用这个工具.习惯了这个工具 ...