Detailed introduction to vue-schart

Introduction

vue-schart is a small component that uses vue.js to encapsulate the sChart.js chart library. Support vue.js 1.x & 2.x

• Warehouse address:

sChart.js As a small and simple chart library, there is no There are many chart types, including only four basic charts: bar chart, line chart, pie chart and donut chart. Small but complete. sChart.js can basically meet the needs of these four charts. And its small size is reflected in its size. The code is only 8kb. If it is compressed by Gzip on the server, it will be even smaller, so there is no need to worry about redundant project code.

This library is implemented using canvas and is compatible with IE9 and above browsers.

• Warehouse address:

• Documentation (Chinese and English):

• Demo address:

Effect

##Usage Guide

Installation:

npm install vue-schart -S

Use in vue component:

<template><p id="app"><schart :canvasId="canvasId"            :type="type"            :width="width"            :height="height"            :data="data"            :options="options"></schart></p></template><script>import Schart from &#39;vue-schart&#39;;export default {data() {return {canvasId: &#39;myCanvas&#39;,type: &#39;bar&#39;,width: 500,height: 400,data: [{name: &#39;2014&#39;, value: 1342},{name: &#39;2015&#39;, value: 2123},{name: &#39;2016&#39;, value: 1654},{name: &#39;2017&#39;, value: 1795},],options: {title: &#39;Total sales of stores in recent years&#39;}}},components:{Schart}}</script>

Application

vue-manage-system The vue-schart component is applied in the background framework, which is small in size and fast to load.

The above is the detailed content of Detailed introduction to vue-schart. For more information, please follow other related articles on the PHP Chinese website!