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

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: '',
  x:'center'
  },
  tooltip : {
  trigger: 'item',
  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!