vue-schart에 대한 자세한 소개

Introduction

vue-schart는 vue.js를 사용하여 sChart.js 차트 라이브러리를 캡슐화하는 작은 구성 요소입니다. vue.js 1.x & 2.x 지원

• Warehouse 주소:

sChart.js 작고 간단한 차트 라이브러리로 막대 차트, 꺾은선형 차트 및 차트 유형만 포함하여 차트 유형이 그리 많지 않습니다. 원형 차트 기본 차트에는 막대형 차트와 도넛형 차트의 네 가지가 있습니다. 참새는 작지만 모든 내장을 가지고 있습니다. sChart.js는 기본적으로 이 네 가지 차트의 요구 사항을 충족할 수 있습니다. 그리고 그 작은 크기는 그 크기에 반영됩니다. 코드는 8kb에 불과합니다. 서버에서 Gzip으로 압축하면 더 작아지므로 중복되는 프로젝트 코드에 대해 걱정할 필요가 없습니다.

이 라이브러리는 캔버스를 사용하여 구현되었으며 IE9 이상의 브라우저와 호환됩니다.

• 창고 주소:

• 문서(중국어 및 영어):

• 데모 주소:

Effect

사용 가이드

설치 :

npm install vue-schart -S

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은 크기가 작고 로드 속도가 빠른 백그라운드 프레임워크의 vue-schart 구성 요소를 사용합니다.

위 내용은 vue-schart에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!