Maison  >  Article  >  interface Web  >  vue.js encapsule les graphiques en tant que composant pour une utilisation en un clic

vue.js encapsule les graphiques en tant que composant pour une utilisation en un clic

小云云
小云云original
2018-01-26 10:27:401828parcourir

Lors de la réalisation de projets, afin d'afficher les données de manière plus intuitive, des contrôles liés aux graphiques sont toujours utilisés. Lorsqu'il s'agit de contrôles graphiques, la première chose qui vient à l'esprit est ECharts, un projet open source, et ce n'est pas comme. des composants tels que iview et element-ui. Il est très pratique à utiliser, mais cela nécessite un petit détour pour plus de commodité, ECharts est encapsulé dans une seule couche.

Echarts, Remodal et Pikaday sont trois composants tiers couramment utilisés lorsque nous développons des sites Web de gestion backend. Cet article vous présente principalement le contenu pertinent sur vue.js encapsulant des echarts dans des composants pour une utilisation en un clic. partagez-le pour que tout le monde puisse s'y référer et l'étudier. Je n'en dirai pas beaucoup plus ci-dessous, jetons un coup d'œil à l'introduction détaillée.

Démonstration de contrôle


Utilisation du contrôle

Aperçu

  • Emballages secondaires basés sur des echarts

  • Pilotés par les données

  • Le code source du contrôle peut être trouvé dans src/components/charts

Documentation

props

Attribut Description Type
_id L'identifiant unique du graphique. Si l'identifiant est répété, une erreur sera signalée String
_titleText L'identifiant unique du graphique. td> Titre du graphique Chaîne
_xText Description de l'axe X Chaîne
_yText Description de l'axe Y Chaîne
_chartData td> Données de graphique Array
_type Types de graphique, fournissant trois types (LineAndBar/LineOrBar/Pie)
属性 说明 类型
_id 图表唯一标识,当id重复将会报错 String
_titleText 图表标题 String
_xText x轴描述 String
_yText y轴描述 String
_chartData 图表数据 Array
_type 图表类型,提供三种(LineAndBar/LineOrBar/Pie)

Exemple d'appel


 <chart
 :_id="&#39;testCharts&#39;"
 :_titleText="&#39;访问量统计&#39;"
 :_xText="&#39;类别&#39;"
 :_yText="&#39;总访问量&#39;"
 :_chartData="chartData"
 :_type="&#39;Pie&#39;"></chart>
 //测试数据样例 [["类别1",10],["类别2",20]]

Méthode d'implémentation

Créer un dom à rendre


<template>
 <p :id="_id" class="chart"></p>
</template>

Fonction de dessin


function drawPie(chartData,id,titleText,xText,yText) {
 var chart = echarts.init(document.getElementById(id))
 var xAxisData = chartData.map(function (item) {return item[0]})
 var pieData = []
 chartData.forEach((v,i)=>{
  pieData.push({
  name:v[0],
  value:v[1]
  })
 })
 chart.setOption({
  title : {
  text: titleText,
  subtext: &#39;&#39;,
  x:&#39;center&#39;
  },
  tooltip : {
  trigger: &#39;item&#39;,
  formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
  orient: &#39;vertical&#39;,
  left: &#39;left&#39;,
  data: xAxisData
  },
  series : [
  {
   name: xText,
   type: &#39;pie&#39;,
   radius : &#39;55%&#39;,
   center: [&#39;50%&#39;, &#39;60%&#39;],
   data:pieData,
   itemStyle: {
   emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
   }
   }
  }
  ]
 })
 }

Le montage se termine, redessine lorsque la source de données change


 watch:{
  _chartData(val){
  switch (this._type){
   case "LineAndBar":
   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
   break
   case "LineOrBar":
   drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);
   break
   case "Pie":
   drawPie(val,this._id,this._titleText,this._xText,this._yText);
   break
   default:
   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
   break
  }
  }
 },
 mounted() {
  switch (this._type){
  case "LineAndBar":
   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  case "LineOrBar":
   drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  case "Pie":
   drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  default:
   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  }
 }

Recommandations associées :

Exemple de partage d'effets graphiques générés par boucle implémentés par echarts

Explication détaillée de l'utilisation de l'ajout d'un graphique Echarts dans vue

Présentation détaillée de l'utilisation d'Echarts

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn