vueでechartを使用する方法-jsチュートリアル-php.cn

vueでechartを使用する方法

亚连

リリース： 2018-06-12 11:27:35

オリジナル

4475 人が閲覧しました

この記事では主に、Vue で Axios を介して echart を非同期に使用する方法を紹介し、参考にさせていただきます。

実際の作業では、前のデモで示したようにデータをハードコーディングすることはできません。そのため、この記事では、Vue プロジェクトで Echarts を使用します。 Vue を使用してそれを抽出し、static/data.json ファイルに配置し、そのファイルにデータの取得を要求します。

1.データの非同期読み込みを実装する

(1)vue-resourceを導入する

npmでaxiosをダウンロードする

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

ログイン後にコピー

main.jsにaxiosを導入して登録する

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

ログイン後にコピー

(2)データを設定する。 json

ヒストグラムのデータなしのオプションを data.json に抽出します。コードは次のとおりです:

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

ログイン後にコピー

(3) async-bar-chart.vue でデータをリクエストします

aysnc-barChart より- option.jsにオプションを導入
メソッドにdrawBarChart()メソッドを追加
mounted()のフック関数でdrawBarChart()を呼び出す

コードは以下の通り:

<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>

ログイン後にコピー

2.読み込みアニメーションを追加

データの読み込み時間が長い場合、キャンバスに空の座標軸を配置するとユーザーにバグが発生したように感じさせるため、データが読み込み中であることをユーザーに知らせるために読み込みアニメーションが必要です。

ECharts はデフォルトで単純な読み込みアニメーションを提供します。 showLoading メソッドを呼び出すだけで表示されます。データが読み込まれた後、hideLoading メソッドを呼び出して読み込みアニメーションを非表示にします。

drawLine() メソッドに showLoading() と HideLoading() を追加します。コードは次のとおりです:

 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)
  })
  }
 }

ログイン後にコピー