Introduction détaillée à vue-schart

Introduction

vue-schart est un petit composant qui utilise vue.js pour encapsuler la bibliothèque de graphiques sChart.js. Prise en charge de vue.js 1.x et 2.x

• Adresse de l'entrepôt :

sChart.js En tant que petite et simple bibliothèque de graphiques, il n'est pas Il existe trop de types de graphiques, dont seulement quatre graphiques de base : graphique à barres, graphique linéaire, graphique circulaire et graphique en anneau. Bien que le moineau soit petit, il possède tous les organes internes. sChart.js peut essentiellement répondre aux besoins de ces quatre graphiques. Et sa petite taille se reflète dans sa taille. Le code ne fait que 8 Ko. S'il est compressé par Gzip sur le serveur, il sera encore plus petit, il n'y a donc pas lieu de s'inquiéter du code de projet redondant.

Cette bibliothèque est implémentée à l'aide de Canvas et est compatible avec les navigateurs IE9 et supérieurs.

• Adresse de l'entrepôt :

• Document (chinois et anglais) :

• Adresse de démonstration :

Effet

Guide d'utilisation

Installation :

npm install vue-schart -S

Utilisation dans le composant vue :

<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 Le composant vue-schart est appliqué dans le framework d'arrière-plan, qui est petit dans taille et rapide à charger.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!