快捷導(dǎo)航

vue中echarts的用法及與elementui-select的協(xié)同綁定操作

更新時(shí)間：2020年11月17日 14:46:07 作者：我是主角我不能死

這篇文章主要介紹了vue中echarts的用法及與elementui-select的協(xié)同綁定操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1.vue中echarts的使用

引入echarts后

let myChart = echarts.init(document.getElementById('dsm'));//dsm為綁定的dom結(jié)構(gòu)
   var option = {
    //backgroundColor:"#111c4e", 
     tooltip: {
      trigger: 'axis'
     },
     legend: {     //圖表上方的圖例顯隱
      data:['光合有效輻射'],
       textStyle: {
        color: '#fff'
       }
     },
     color:['#E4FD0A'],
     grid: {     //圖表里上下左右的空間 間隙
      left: '3%',
      right: '8%',
      bottom: '3%',
      containLabel: true
     },
     xAxis: {        //x軸屬性
      type: 'category',
      name: '日期/時(shí)間',
      // boundaryGap: false,
      data: this.xZhou,
      axisLine:{
      lineStyle:{color:'#fff'} // x軸坐標(biāo)軸顏色
      },
      axisLabel: {
       show: true,
       color: '#fff',
       fontSize:12,
       // rotate: 30
      }
     },
     yAxis: {      //y軸屬性
      type: 'value',
      name: '光合有效輻射',
      axisLine:{
      lineStyle:{color:'#fff'} // x軸坐標(biāo)軸顏色
      },
      axisLabel: {
       show: true,
       color: '#fff',
       fontSize:12,
       // rotate: 30
      }
     },
     series: [      //為鼠標(biāo)在圖表中劃過(guò)時(shí)顯示的數(shù)據(jù)
      {
       name:'光合有效輻射',
       type:'line',
       stack: '總量',
       data:this.yZhou,
       lineStyle:{
        normal:{
         color: '#E4FD0A'
        }
       }
      }
     ]
   };
   myChart.setOption(option)
   window.addEventListener("resize", function () { //設(shè)置圖表因窗口大小的變化進(jìn)行變化
    myChart.resize();
   });

上述圖表的顯示效果為：

2.echarts與elementui-select的協(xié)同綁定

實(shí)現(xiàn)依據(jù)elementui-select的變化而變化圖表。

<template>
 <div class="content">
 <div class="contentDetail" v-show="isXM">
 <div class="close" @click="close"></div>
 <div class="chartContent">
    <el-select
     v-model="defaultyAxis"  //利用v-model對(duì)默認(rèn)數(shù)據(jù)defaultyAxis進(jìn)行改變，實(shí)際綁定的數(shù)據(jù)是yAxisOption
     placeholder="請(qǐng)選擇"
     class="chartSelect"
     popper-class="trsfChartSelect-popper"
     @change="renderChart()"
    >
     <el-option v-for="item in yAxisOption" :key="item" :label="item" :value="item"></el-option>
    </el-select>
 <div id="zsfChart"></div>
 </div>
 </div>
 </div>
</template>

<script>
import { zsfEntity} from '@/api/sfcl.js'

export default {
 name: 'Home',
 data() {
 return {
 isXM: true,
   yAxisOption: ['a', 'b'],
   defaultyAxis: '',
   dataOgj: {},
 }
 },
 mounted() {
  this.$comjs.addSimplePoint([100.62713539843939, 38.620863795306164]) //cesium掛載圖標(biāo)
  this.getChartDataAndRender()
 },
 methods: {
 close() {
   this.isXM = false
 this.$store.commit('getComponent1', '')
  },
  getChartDataAndRender(){ //axios獲取異步數(shù)據(jù)
   var _this = this
   zsfEntity().then(res => {
    if(res.obj.length == 0){
     return
    }
    let keyArr = Object.keys(res.obj[0])
    for (let item of keyArr) {
  _this.dataOgj[item] = []
    }
    for (let item of res.obj) {
  for (let item1 of keyArr) {
  _this.dataOgj[item1].push(item[item1])
  }
    }
    _this.yAxisOption = keyArr.slice(1)//y軸實(shí)際數(shù)據(jù) 四項(xiàng)
    _this.defaultyAxis = _this.yAxisOption[0] //獲取y軸默認(rèn)數(shù)據(jù)
    _this.renderChart()
   })
  },
  //渲染圖表
 renderChart() {
 let myChart = echarts.init(document.getElementById('zsfChart'))
 let option = {
 tooltip: {
  trigger: 'axis',
  axisPointer: {
  type: 'cross',
  label: {
  backgroundColor: '#6a7985'
  }
  }
    },
    legend: {
     data:[this.defaultyAxis],
     textStyle: {
      color: '#fff'
     }
    },
 grid: {
     right: '5%',
     left: '5%'
 },
 color: ['#E4FD0A'],
 xAxis: {
     name: "觀測(cè)時(shí)間",
  type: 'category',
  boundaryGap: false,
     data: this.dataOgj.observeTime,
  axisLabel: {
  color: '#ffffff'
  // fontSize: 10,
  // rotate:30
  },
  axisLine: {
  lineStyle: {
  color: '#ffffff',
  type: 'dashed'
  }
  }
 },
 yAxis: {
     name: this.defaultyAxis,//掛載默認(rèn)數(shù)據(jù)
  type: 'value',
  axisLabel: {
  color: '#ffffff',
  fontSize: 10
  // rotate:30
  },
  axisLine: {
  lineStyle: {
  color: '#ffffff',
  type: 'dashed'
  }
  }
 },
 series: [
  {
  data: this.dataOgj[this.defaultyAxis],
      type: 'line',
      name: this.defaultyAxis
  }
 ]
 }
   myChart.setOption(option)
 window.addEventListener('resize', function() {
 myChart.resize()
 })
 }
 },
 destroyed(){
  this.$comjs.removeSimplePoint()
 }
}
</script>

<style lang="stylus">
.trsfChartSelect-popper
 background: rgba(1,64,64,1)
 .el-select-dropdown__item.hover, .el-select-dropdown__item:hover
  background: rgba(0,0,0,0.5)
 .el-select-dropdown__item
  color: #fff
</style>
<style lang="stylus" scoped>
 @import '../../assets/styles/varibles.styl'
.content
 position: absolute
 right: vw(10)
 top:vh(71)
 z-index: 100
 color: #fff
 background: $bgColor
 .contentDetail
  width:vw(1500)
  height:vh(348)
  position: fixed
  right: 70px
  bottom: 27px
  margin:auto
  z-index: 100
  color: #fff
  background: $bgColor
  border: 1px solid rgba(3,240,240,1)
  .close
   position:absolute
   right:vw(15)
   top:vh(10)
   cursor: pointer
   background-image:url("/images/lanhu/close.png")
   width: 20px;
   height: 20px;
   z-index: 1 
  .baseInfo
   height: 75px;
   padding-top: 30px;
   .baseInfo-item
    width: 33%;
    display: inline-block;
    text-align: left;
    margin-bottom: 20px;
    padding-left: 80px;
    .baseInfo-item-icon
     vertical-align: middle
     margin-right: 14px
    .baseInfo-item-text
     vertical-align: middle
  .separator
   height: 1px
   background: #03F0F0
  .chartContent
   height: 100%
   .chartSelect
    position:absolute
    right: 63px
    margin-top: 20px
    width: 150px
    z-index: 1
    /deep/ .el-input__inner
     height: 28px;
     line-height: 28px;
     background:rgba(1,64,64,1);
     border-radius:2px;
     border:1px solid rgba(0,252,252,1);
     color: #fff
    /deep/ .el-input__icon
     line-height: 28px;
   #zsfChart
    height: 100%
    width:100%
</style>

效果實(shí)現(xiàn)

補(bǔ)充知識(shí)：vue項(xiàng)目在同一頁(yè)面中引入多個(gè)echarts圖表，并實(shí)現(xiàn)封裝，自適應(yīng)和動(dòng)態(tài)數(shù)據(jù)改變

vue-Echarts

公司最近做項(xiàng)目需要用到圖表，以前是使用echarts,現(xiàn)在也是用這個(gè)，沒(méi)什么好糾結(jié)的！但是最近發(fā)現(xiàn)以前每次做圖表之類(lèi)的都沒(méi)有封裝，每次做圖表都要從新去配置之類(lèi)的，寫(xiě)了好多重復(fù)代碼，感覺(jué)很累啊，所以自己把圖表封裝成子組件使用，代碼工作量減輕了很多，而且子組件使用了數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)和圖表自適應(yīng)屏幕大小，這樣以后會(huì)方便很多了！

當(dāng)然公司的項(xiàng)目肯定不能發(fā)出來(lái)了，我會(huì)做個(gè)簡(jiǎn)單的demo出來(lái)

先截個(gè)圖吧！

其實(shí)我也未作什么太復(fù)雜的工作，以前工作中，頁(yè)面中要2個(gè)圖表，我在methods:{}中寫(xiě)兩個(gè)方法配置之類(lèi)的，類(lèi)似這樣子：

好了，首先第一步，使用echarts當(dāng)然要引用了

1. vue 項(xiàng)目中引用echarts

cnpm install echarts -S

執(zhí)行完畢后再 main.js中引入

因?yàn)槭莗c端的項(xiàng)目，用了element ui （不重要）,引入之后就可以在全局使用了，之前對(duì)這個(gè)不是很懂，每個(gè)要圖表頁(yè)面都引入echarts，就像這個(gè)樣子：

使代碼寫(xiě)的亂七八糟的,現(xiàn)在在全局引用了，就不需要在每個(gè)用圖表的頁(yè)面中引入了

2. 父子組件中使用圖表，現(xiàn)在我做的這個(gè)頁(yè)面把他分成兩個(gè)部分，這個(gè)頁(yè)面整體為父，兩個(gè)圖表為子組件，這樣子

1.先看下父組件代碼，樣式類(lèi)的請(qǐng)忽視

import linegraph from '@/components/linegraph.vue'
export default {
 data(){
 return{
 notAccess:false,
 ChartLineGraph2:null,
 option:{
   title: {
     text: '全年產(chǎn)量趨勢(shì)圖',
     left: 'center'
   },
   tooltip: {
     trigger: 'item',
     formatter: '{a} <br/> : {c}'
   },
   legend: {
     left: 'center',
     data: ['本年', '上年'],
     bottom:0
   },
   xAxis: {
     type: 'category',
     name: 'x',
     splitLine: {show: false},
     data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
   },
   grid: {
     left: '1%',
     right: '2%',
     bottom: '8%',
     containLabel: true
   },
   yAxis: {
     type: 'category',
     name: 'y',
     splitLine: {show: true},
     data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']   
   },
   series: [
     {
       name: '本年',
       type: 'line',
       data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
     },
     {
       name: '上年',
       type: 'line',
       data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
     },
   ]
 },
 option2:{
    title: {
     text: '全年設(shè)備產(chǎn)量對(duì)比圖',
     left: 'center'
   },
   xAxis: {
     type: 'category',
     data: ['檢品機(jī)1', '檢品機(jī)2', '檢品機(jī)3', '檢品機(jī)4', '檢品機(jī)5', '檢品機(jī)6', '檢品機(jī)7']
   },
   yAxis: {
     type: 'value'
   },
   legend: {
     left: 'center',
     data: ['本年', '上年'],
     bottom:0
   },
   grid: {
     left: '1%',
     right: '2%',
     bottom: '8%',
     containLabel: true
   },
   series: [
   {
   name: '本年',
     data: [120, 200, 150, 80, 70, 110, 130],
     type: 'bar',
     barWidth:30,
   },
   {
   name: '上年',
     data: [120, 200, 150, 80, 70, 110, 130],
     type: 'bar',
     barWidth:30,
   }]
 }
   
 }
 },
 mounted(){
 
 },
 components:{
 ErrorTip,
 linegraph,
 }

}

這是父組件代碼，兩個(gè)圖表不管是折線(xiàn)圖還是柱狀圖都是使用 linegraph.vue這個(gè)子組件來(lái)進(jìn)行的，因?yàn)槲野裡charts圖表生成的配置項(xiàng)都放在了父組件里面，然后通過(guò)父組件給子組件傳值實(shí)現(xiàn)圖表生成，

3.父組件我們看完了，現(xiàn)在我們看下是如何封裝的圖表類(lèi)linegraph.vue子組件，我先截圖一下，然后解釋?zhuān)?/p>

這里需要注意一下這幾個(gè)問(wèn)題，

第一個(gè)：父子組件傳值問(wèn)題，父組件需要傳id值和配置項(xiàng)的值給子組件生成圖表，通過(guò)vue的prop傳過(guò)來(lái)的id和data（配置項(xiàng)），具體怎么傳值可看父子組件傳值代碼或百度；

第二點(diǎn)：我們首先設(shè)想這樣一個(gè)場(chǎng)景：當(dāng)父組件的傳值 option或者option2 (圖表配置項(xiàng))，剛開(kāi)始在data()里面是設(shè)置為option:null,或者是一個(gè)空的對(duì)象,或者配置項(xiàng)缺少數(shù)據(jù)這部分，在methods中通過(guò)ajax調(diào)用接口獲取到數(shù)據(jù)然后賦值給option,例如：this.option = 一個(gè)對(duì)象，可以成圖表之類(lèi)的，當(dāng)option值未改變時(shí)就把option=null的值傳遞給了子組件，這樣圖表生成不了，像這樣

數(shù)據(jù)不能動(dòng)態(tài)傳值，數(shù)據(jù)不能動(dòng)態(tài)傳值！要解決這個(gè)問(wèn)題，必須用到vue watch的對(duì)象深度監(jiān)聽(tīng)，我之前寫(xiě)了一篇watch，正好用上了

對(duì)子組件接受到的data（配置項(xiàng)）進(jìn)行深度監(jiān)聽(tīng)，當(dāng)父組件通過(guò)ajax改變了傳過(guò)來(lái)的data的值，圖表將會(huì)重新渲染。

3.第三個(gè)問(wèn)題

圖表自適應(yīng)，當(dāng)屏幕大小改變時(shí)，圖表也需要進(jìn)行自適應(yīng)，本來(lái)挺簡(jiǎn)單的東西，被我頭腦轉(zhuǎn)不過(guò)來(lái)，搞了一個(gè)小時(shí)，總算搞好了啊，其實(shí)之前寫(xiě)的就是在子組件的 drawLineGraph（）方法里面寫(xiě)入一個(gè)方法，這個(gè)方法

window.onresize =this.ChartLineGraph.resize;

還是出問(wèn)題了，這個(gè)頁(yè)面兩個(gè)圖表，結(jié)果只有后面的圖表會(huì)自適應(yīng)，前面的那個(gè)沒(méi)反應(yīng)???,我就蒙了，還以為自己方法寫(xiě)錯(cuò)了，真是蛋疼，改成這樣，那個(gè)this一定要注意，我就是搞錯(cuò)對(duì)象了，然后兩個(gè)圖表都可以自適應(yīng)