Instructions d'utilisation de Vue-ECharts
vue-echarts est un composant encapsulé secondaire basé sur la méthode d'utilisation des echarts sur le site officiel d'Apache Echarts, qui nous permet de créer des diagrammes echarts et de les appliquer à nos projets.
référence:
Site officiel de vue-echarts : https://github.com/ecomfe/vue-echarts
Site officiel d'Apache Echarts : https://echarts.apache.org/zh/index.html
1-Installation
1. Installez les modules echarts et vue-echarts
npm insatll echarts vue-echarts
2. S'il s'agit d'un environnement vue2 (vue version < 2.8.0), vous devez installer le module @vue/composition-api
npm i -D @vue/composition-api
2-Exemple
Ce qui suit utilise un graphique linéaire comme exemple pour illustrer
<template>
<div style="height: 100%;">
<v-chart class="chart" :option="option" autoresize />
</div>
</template>
<script>
// 官方：按需引入echarts所需的模块
import {
use } from 'echarts/core';
import {
LineChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
} from 'echarts/components';
import {
CanvasRenderer } from 'echarts/renderers';
// 第三方组件模块
import VChart from 'vue-echarts';
// 注册安装模块(插件)
use([
CanvasRenderer,
LineChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
])
export default {
name: 'LineCharts',
components: {
//注册组件
VChart
},
data: function() {
return {
option: {
//配置选项属性
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}
}
}
Après cela, vous pouvez utiliser ce composant de graphique linéaire sur n'importe quelle page de modèle, ou vous pouvez l'utiliser directement dans la page de modèle selon le format ci-dessus (redondance du code). L'effet d'utilisation est le suivant :
Dans l'exemple ci-dessus, le composant de module tiers que nous avons introduit est le composant packagé sous le module Vue-echarts. Si nous utilisons ce composant directement, nous n'avons pas besoin d'initialiser l'élément dom du graphique selon la méthode d'enregistrement sur le site officiel, nous n'avons pas non plus besoin de passer setOption enregistre la configuration des options, simplifiant ainsi l'opération.
À l'exception de l'opération d'introduction de ce composant, les autres parties sont écrites selon la méthode d'introduction à la demande dans l'exemple de code officiel d'echarts, c'est-à-dire la méthode d'enregistrement d'utilisation dans echarts/core, la légende, le module de composant d'option utilisé dans la légende et les fonctions echarts/Rendu dans les moteurs de rendu.
Avis:
Certains modules peuvent ne pas être visibles là où ils sont utilisés, mais si le rendu de la page n'est pas normal, vous pouvez vérifier quel module n'a pas provoqué l'erreur dans la console du navigateur et l'importer en fonction du message d'erreur.
Ces modules courants incluent GridComponent, TooltipComponent, CanvasRenderer, etc.
3-Idées de graphiques d'optimisation personnalisés
Après avoir présenté l'utilisation pratique de vue-echarts ci-dessus, si nous devons personnaliser directement le diagramme, les étapes générales sont :
- Dans l'exemple sur le site officiel d'Apache Echarts [https://echarts.apache.org/examples/zh/index.html], recherchez le type de graphique que vous souhaitez créer (tel qu'un graphique linéaire, un graphique à secteurs, un graphique à nuages de points, etc.) et introduisez grossièrement le module de code avec vue-echarts pour le rendu.
- Après avoir rendu l'exemple, vous devez écrire la configuration des options. La complexité de cette configuration ne réside pas dans les données. En fait, beaucoup de temps est passé à ajuster le style. Pour des ajustements de style spécifiques correspondant à chaque attribut, veuillez reportez-vous à l'API de configuration du site officiel d'Apache Echarts [https://echarts.apache.org/zh/option.html#title] pour vérifier.