Comment utiliser les graphiques électroniques dans Vue-js tutoriel-php.cn

Comment utiliser les graphiques électroniques dans Vue

亚连

Libérer： 2018-06-12 11:27:35

original

4405 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation des echarts de manière asynchrone via Axios dans Vue. Maintenant, je le partage avec vous et vous donne une référence.

Dans le travail réel, les données ne peuvent pas être codées en dur comme l'a démontré la démo précédente. Toutes les données doivent être obtenues en envoyant des requêtes, donc, dans cet article, j'écrirai les données dans le projet Vue utilisant Echarts : Introduisez les données d'Echarts dans Vue, extrayez-les, placez-les dans le fichier static/data.json et demandez au fichier d'obtenir les données.

1. Implémenter le chargement asynchrone des données

(1) Introduire vue-resource

Télécharger axios via npm

//命令行中输入
npm install axios --save

Copier après la connexion

Introduisez axios dans main.js et inscrivez-vous

// main.js
import http from &#39;./http&#39;
Vue.prototype.$http = http //挂载到原型上

Copier après la connexion

(2) Définir data.json

Il n'y aura aucune donnée dans le histogramme L'option est extraite dans data.json, le code est le suivant :

 {
 "title": { "text": "简单饼状图" },
 "tooltip": {},
 "xAxis": {
  "data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  "name": "产品"
 },
 "yAxis": {},
 "series": [{
  "name": "销量",
  "type": "bar",
  "data": [5, 20, 36, 10, 10, 20],
  "itemStyle": { 
   "normal": {
    "color": "hotpink"
   }
  }
 }]
}

Copier après la connexion

(3) Demander des données dans async-bar-chart.vue

Introduire l'option de aysnc-barChart-option.js
Ajouter la méthode drawBarChart() dans les méthodes
Dans monté( ) Le code pour appeler drawBarChart()

dans la fonction hook est le suivant :

<template>
 <p id="myChart" :style="{width: &#39;800px&#39;, height: &#39;400px&#39;}"></p>
</template>

<script>
 export default {
 name: &#39;echarts&#39;,
 data() {
  return {
  msg: &#39;Welcome to Your Vue.js App&#39;,
  goods: {}
  }
 },
 mounted() {
  this.drawLine();
 },
 created() {
  this.$http.get(&#39;./static/dat.json&#39;).then(res => {
  const data = res.data;
  this.goods = data
  console.log(this.goods);
  console.log(Array.from(this.goods.xAxis.data));
  })
 },
 methods: {
  drawLine() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = this.$echarts.init(document.getElementById(&#39;myChart&#39;))
  // 绘制图表
  myChart.setOption({
   title: {}, //{text: &#39;异步数据加载示例&#39;},
   tooltip: {},
   xAxis: {
   data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
   },
   yAxis: {},
   series: [{
   name: &#39;销量&#39;,
   type: &#39;bar&#39;,
   data: [] //[5, 20, 36, 10, 10, 20]
   }]
  });
  this.$http.get("./static/dat.json") .then((res) => {
   const data = res.data;
   const list = data.series.map(good=>{
     let list = good.data;
     return [...list]
    })
    console.log(list);
    console.log(Array.from(...list));
   myChart.setOption({
    title: data.title,
    xAxis: [{
    data: data.xAxis.data
    }],
    series: [{
    name: &#39;销量&#39;,
    type: &#39;bar&#39;,
    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
    }]
   });
   })
  }
 }
 }
</script>

Copier après la connexion

2 . Ajouter une animation de chargement

Si le temps de chargement des données est long, placer un axe de coordonnées vide sur le canevas fera également penser à l'utilisateur qu'il y a un bug, une animation de chargement est donc nécessaire pour le rappeler à l'utilisateur. que les données sont en cours de chargement.

ECharts fournit par défaut une animation de chargement simple. Appelez simplement la méthode showLoading pour afficher. Une fois les données chargées, appelez la méthode hideLoading pour masquer l'animation de chargement.

Ajoutez showLoading() et hideLoading() dans la méthode drawLine() Le code est le suivant :

 methods: {
  drawLine() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = this.$echarts.init(document.getElementById(&#39;myChart&#39;))
  // 绘制图表
  myChart.setOption({
   title: {}, //{text: &#39;异步数据加载示例&#39;},
   tooltip: {},
   xAxis: {
   data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
   },
   yAxis: {},
   series: [{
   name: &#39;销量&#39;,
   type: &#39;bar&#39;,
   data: [] //[5, 20, 36, 10, 10, 20]
   }]
  });
  //显示加载动画
  myChart.showLoading();

  this.$http.get("./static/dat.json").then((res) => {
   setTimeout(() => { //未来让加载动画效果明显,这里加入了setTimeout,实现3s延时
   const data = res.data;
   const list = data.series.map(good => {
    let list = good.data;
    return [...list]
   })
   console.log(list);
   console.log(Array.from(...list));
   myChart.hideLoading(); //隐藏加载动画
   myChart.setOption({
    title: data.title,
    xAxis: [{
    data: data.xAxis.data
    }],
    series: [{
    name: &#39;销量&#39;,
    type: &#39;bar&#39;,
    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
    }]
   });
   }, 3000)
  })
  }
 }

Copier après la connexion