欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+echarts實(shí)現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法

 更新時間:2018年10月17日 11:20:33   作者:FannieGirl  
vue寫的后臺管理,需要將表格數(shù)據(jù)繪制成圖表(折線圖,柱狀圖),圖表數(shù)據(jù)都是通過接口請求回來的。這篇文章主要介紹了vue+echarts 動態(tài)繪制圖表及異步加載數(shù)據(jù)的相關(guān)知識,需要的朋友可以參考下

前言

  背景:vue寫的后臺管理,需要將表格數(shù)據(jù)繪制成圖表(折線圖,柱狀圖),圖表數(shù)據(jù)都是通過接口請求回來的。

安裝

  cnpm install echarts --s   (我這里用了淘寶鏡像,不知道同學(xué)自行百度)

實(shí)例化

   在已有的項(xiàng)目中下載好了echarts 之后,可以打開官方文檔,但是我覺得官方文檔對于實(shí)例化介紹的不夠清晰,這也是我為什么在這么多的文章中還要寫的原因,前輩寫的太模糊了,我決定好好給后來人,需要在項(xiàng)目中引用圖表的人,一些實(shí)用,快捷的東西。

  官方文檔:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

  不廢話,貼代碼

1.在需要用圖表的地方引入 例如:hello.js

    import echarts from 'echarts'

2.hello.vue  中寫個容器

<div id='myChart' style='width:600px;height:600px'>
</div>

3.在hello.js

 export default {
 name: 'hello',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 mounted(){
  this.drawLine();
 },
 methods: {
  drawLine(){
    // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 繪制圖表
    myChart.setOption({
      title: { text: '在Vue中使用echarts' },
      tooltip: {},
      xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
      },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
  }
 }
}

    這樣就調(diào)用好了視力了,在頁面刷新就可以了

  效果如圖:

  

這樣是很簡單的方法,嗯重點(diǎn)來了,我的數(shù)據(jù)又不是寫死的~數(shù)據(jù)都是后臺給我的呀(官方,還真的沒有怎么說,示例也是ajax異步請求的)

項(xiàng)目一開始是有完整的一個表格數(shù)據(jù),也就是我要把表格數(shù)據(jù)繪制成圖表,還有一堆的篩選條件,有點(diǎn)懵逼~

  感覺問題很多啊,給我五分鐘,分析分析,分解分解一下

  1.數(shù)據(jù)我都是有的,我需要繪制四條折線,表格數(shù)據(jù)循環(huán)復(fù)制給新的四個數(shù)組(篩選條件一變,四組數(shù)據(jù)也跟著變)

  2.橫坐標(biāo)也是動態(tài),項(xiàng)目是時間(剛開始我還想偏了,自動填充日期的那種),表格的第一行就是日期,同樣用新數(shù)組儲存

  3.數(shù)據(jù)重新請求了,我的圖表也要跟著變才對呀(圖表重新繪制)

  再次貼代碼(廢話再多,不如一行代碼)

1.在調(diào)用篩選條件的方法那里,創(chuàng)建五個新的數(shù)組(四條折線),橫坐標(biāo)(日期)

    這里沒有代碼

2.橫坐標(biāo)動態(tài)的:

 xAxis: {
     type: 'category',
     boundaryGap: false,
     data: this.xData, //xData 就是日期這個數(shù)組
   },

3.series (四條折線的數(shù)據(jù))

 series : [{
    name:this.tooltipData[0],
    type:'line',
    stack: '總量',
    data:this.new_userData,
  },
  {
    name:this.tooltipData[1],
    type:'line',
    stack: '總量',
    data:this.new_deviceData,
  },
  {
    name:this.tooltipData[2],
    type:'line',
    stack: '總量',
     data:this.active_userData,
  },
  {
    name:this.tooltipData[3],
    type:'line',
    stack: '總量',
    data:this.active_deviceData,
  }] 

4.隨著篩選數(shù)據(jù),重新繪制圖表

    調(diào)用篩選條件方法的時候再調(diào)用這個實(shí)例化 drawline 方法就可以了

    this.drawLine();

總結(jié)

以上所述是小編給大家介紹的vue+echarts實(shí)現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 前端 Vue.js 和 MVVM 詳細(xì)介紹

    前端 Vue.js 和 MVVM 詳細(xì)介紹

    這篇文章主要介紹了前端 Vue.js 和 MVVM 詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
    2016-12-12
  • vue3中Vant的使用及說明

    vue3中Vant的使用及說明

    這篇文章主要介紹了vue3中Vant的使用及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue封裝svg-icon組件使用教程

    Vue封裝svg-icon組件使用教程

    SVG(Scalable?Vector?Graphics)可縮放矢量圖形,是一種用于描述基于二維的矢量圖形的?XML?標(biāo)記語言,其基本矢量顯示對象包括矩形、圓、橢圓、多邊形、直線、任意曲線等,還能顯示文字對象和嵌入式外部圖像
    2023-02-02
  • ant-desigin-vue中form表單的使用解讀

    ant-desigin-vue中form表單的使用解讀

    這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue3:vue2中protoType更改為config.globalProperties問題

    vue3:vue2中protoType更改為config.globalProperties問題

    這篇文章主要介紹了vue3:vue2中protoType更改為config.globalProperties問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue-cli3.0修改打包后的文件名和文件地址,打包后本地運(yùn)行報(bào)錯解決

    vue-cli3.0修改打包后的文件名和文件地址,打包后本地運(yùn)行報(bào)錯解決

    這篇文章主要介紹了vue-cli3.0修改打包后的文件名和文件地址,打包后本地運(yùn)行報(bào)錯的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue3中遇到reactive響應(yīng)式失效的問題記錄

    vue3中遇到reactive響應(yīng)式失效的問題記錄

    這篇文章主要介紹了vue3中遇到reactive響應(yīng)式失效的問題記錄,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue.js從安裝到搭建過程詳解

    vue.js從安裝到搭建過程詳解

    這篇文章主要為大家詳細(xì)介紹了vuejs從安裝到搭建的整個過程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • vue2與vue3下如何訪問使用public下的文件

    vue2與vue3下如何訪問使用public下的文件

    這篇文章主要介紹了vue2與vue3下如何訪問使用public下的文件,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue實(shí)現(xiàn)el-select的change事件過程

    vue實(shí)現(xiàn)el-select的change事件過程

    這篇文章主要介紹了vue實(shí)現(xiàn)el-select的change事件過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-04-04

最新評論