Home >Web Front-end >JS Tutorial >Detailed introduction to vue-schart

Detailed introduction to vue-schart

零下一度
零下一度Original
2018-05-16 16:46:263397browse

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

Detailed introduction to vue-schart

##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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn