Detaillierte Einführung in vue-schart

Einführung

vue-schart ist eine kleine Komponente, die vue.js verwendet, um die Diagrammbibliothek sChart.js zu kapseln. Unterstützen Sie vue.js 1.x & 2.x

• Lageradresse:

sChart.js Als kleine und einfache Diagrammbibliothek gibt es ist nein Es gibt zu viele Diagrammtypen, darunter nur vier Grunddiagramme: Balkendiagramm, Liniendiagramm, Kreisdiagramm und Donutdiagramm. Obwohl der Spatz klein ist, verfügt er über alle inneren Organe. sChart.js kann grundsätzlich die Anforderungen dieser vier Diagramme erfüllen. Und seine geringe Größe spiegelt sich in seiner Größe wider. Wenn er mit Gzip auf dem Server komprimiert wird, ist er noch kleiner, sodass Sie sich keine Sorgen über redundanten Projektcode machen müssen.

Diese Bibliothek wird mithilfe von Canvas implementiert und ist mit Browsern ab IE9 und höher kompatibel.

• Lageradresse:

• Dokument (Chinesisch und Englisch):

• Demo-Adresse:

Effekt

Nutzungsanleitung

Installation:

npm install vue-schart -S

Verwendung in der Vue-Komponente :

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

Anwendung

vue-manage-system Die vue-schart-Komponente wird im Hintergrund-Framework angewendet, das klein ist Größe und schnelles Laden.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in vue-schart. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!