Maison > Article > interface Web > 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) |
|
Exemple d'appel
<chart :_id="'testCharts'" :_titleText="'访问量统计'" :_xText="'类别'" :_yText="'总访问量'" :_chartData="chartData" :_type="'Pie'"></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: 'vertical', left: 'left', data: xAxisData }, series : [ { name: xText, type: 'pie', radius : '55%', center: ['50%', '60%'], data:pieData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }) }
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!