Composant graphique léger Vue

Lorsque vous rencontrez des scénarios nécessitant de dessiner des graphiques sur une page Web, deux bibliothèques sont généralement utilisées : D3.js et Chart.js. Mais en fait, vous n’avez pas du tout besoin d’une bibliothèque aussi lourde. Parfois, vous souhaitez simplement qu'un simple graphique SVG réponde à vos besoins, vous pouvez alors utiliser les graphiques Frappe. Il s'agit d'un graphique léger qui fournit des animations interactives complètes, et avec un simple wrapper de composants, vous pouvez l'utiliser avec Vue.js !

Démarrer l'installation

Commencer à installer le composant vue2-frappe Ici, je suppose que vous travaillez sur un projet Vue.js existant :

$ npm install --save vue2-frappe

Étape suivante. pour enregistrer le composant :

import Vue from 'vue';
import VueFrappe from 'vue2-frappe';
import App from './App.vue';
Vue.use(VueFrappe);
new Vue({
  el: '#app',
  render: h => h(App)
});

Commencer à dessiner des graphiques

vue2-frappe est une couche basée sur Frappe Charts, l'encapsulant pour une utilisation avec les composants Vue.js, veuillez consulter la documentation de Frappe Chart pour plus d'utilisation :

<template>
  <div id="app">
    <h2>Chart: Benedict&#39;s Weight</h2>
    <!-- id - 每一个图表必须有一个 id. -->
    <!-- title - 图表上方显示的标题 -->
    <!-- type - 图表的类型 线性图、饼图、条形图、等 -->
    <!-- labels - x 轴上的值 -->
    <!-- height- 可选，图表的高度 -->
    <!-- colors - 将每一个数据集进行颜色区分 -->
    <!-- lineOptions - 线形图的更多选项，请见文档-->
    <!-- datasets - 数据集，对象数组 -->
    <vue-frappe
      id="my-chart-id"
      title="Benedict&#39;s Weight From 2017-2018 (lbs)"
      type="line"
      :labels="[&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;]"
      :height="650"
      :colors="[&#39;#008F68&#39;, &#39;#FAE042&#39;]"
      :lineOptions="{regionFill: 1}"
      :datasets="[
        {name: &#39;2017&#39;, values: benedictsWeight2017},
        {name: &#39;2018&#39;, values: benedictsWeight2018}
      ]"
    ></vue-frappe>
    <p>Conclusion: Benedict needs to go on a diet.</p>
  </div>
</template>
<script>
export default {
  name: &#39;app&#39;,
  data() {
    return {
      benedictsWeight2017: [480, 485, 491, 489, 485, 490, 497, 510, 512, 521, 530, 545],
      benedictsWeight2018: [540, 575, 570, 555, 572, 580, 585, 587, 588, 590, 592, 590]
    }
  }
}
</script>

Frappe Charts prend en charge une variété d'icônes, telles que des diagrammes circulaires, des diagrammes à barres, des diagrammes de proportions, des cartes thermiques, etc., pour des options d'affichage plus avancées, veuillez consulter son documentation officielle !

Tutoriel recommandé : "Tutoriel JS"

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!