sChart.js：一个小型简单的图表库

介绍

sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小，体现在它的体积上，代码只有 8kb，如果经过服务器的Gzip压缩，那就更小了，因此不用担心造成项目代码冗余。
该库使用 canvas 实现，兼容 IE9 以上浏览器。

仓库地址：sChart.js
文档(中英文)：http://open.omwteam.com/sChart
演示地址：http://open.omwteam.com/sChart/demo.html

image.png

使用指南

$ npm install schart.js
import sChart from 'schart.js'

使用简单

new sChart(canvasId, type, data, options);

即可生成一个图表。

canvasId：canvas标签的id，必填。

type：图表类型，必填。

options：图表配置参数，可选，具体参考文档。

data：要生成图表的数据，格式为：

var data = [
    {name:'2015',value:1170},
    {name:'2016',value:970},
    {name:'2017',value:1450}
]

name则为数据名，value则为数据值。

其他类型的图表data格式都相同，可以同个数据生成不同图表。

vue相关

vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件。支持vue.js 1.x & 2.x
案例演示及代码：http://blog.gdfengshuo.com/example/#/vue-schart

使用指南

安装

npm install vue-chartjs chart.js

在vue组件中使用:

<template>
    <div id="app">
        <schart :canvasId="canvasId"
            :type="type"
            :data="data"
            :options="options"
            style="width:500px; height:350px;"
        ></schart>
    </div>
</template>
<script>
import Schart from 'vue-schart';
export default {
    data() {
        return {
            canvasId: 'myCanvas',
            type: 'bar',
            data: [
                {name: '2015', value: 2123},
                {name: '2016', value: 1654},
                {name: '2017', value: 1795},
            ],
            options: {
                title: '近年店铺总销售额'
            }
        }
    },
    components:{
        Schart
    }
}
</script>

以上参考林鑫的个人博客，更多案例演示及代码请见http://blog.gdfengshuo.com/example/#/vue-schart

另外推荐：

富文本编辑器：

Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。访问地址：vue-quill-editor

UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲

Tinymce：参考https://www.cnblogs.com/wisewrong/p/8985471.html

markdown编辑器

mavonEditor：基于Vue的markdown编辑器。访问地址：mavonEditor

基于cropperjs实现Vue图片裁剪压缩上传功能

vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。访问地址：vue-cropperjs

Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件。访问地址：Vue.Draggable
使用vue-qr生成支付二维码：https://blog.csdn.net/fifteen718/article/details/85850511
NPOI 导出Word 或 Excel 文档: https://www.jianshu.com/p/d352a7f09228

最后编辑于：2019.07.19 20:15:36