在Vue 中實現迴圈渲染多個相同echarts圖表

阿新 • • 發佈：2020-07-21

在開發過程中我們常常需要，在一個頁面中使用相同的圖表來展示同級別的多個事物（如：同級別的多個不同id的倉庫、同級別的多個不同id的裝置等）。

上圖效果實現程式碼：

<template>
 <div class="projectCost">
 <div class="container">
  <div class="wrapper" v-for="(item,index) in list" :key="index"> 
  <div class="roseChart"></div> // 使用class,不是id
  </div>
 </div>
 </div>
</template>

<script>
export default {
 data(){
 return {
  list:[ // 假資料
  {
   id:1,price:{
   name:'專案一',resData:[
    {name:'訂購費用',value:12},{name:'飼養費用',value:18},{name:'實驗費用',value:8},{name:'其他費用',value:10},]
   }
  },{
   id:2,price:{
   name:'專案二',value:20},value:9},]
   }
  }
  ]
 }
 },methods:{
 drawRose(){
  var echarts = require("echarts");
  var roseCharts = document.getElementsByClassName('roseChart'); // 對應地使用ByClassName
  for(var i = 0;i < roseCharts.length;i++ ){ // 通過for迴圈，在相同class的dom內繪製元素
  var myChart = echarts.init(roseCharts[i]);
  myChart.setOption({
   color: ["#4DFFFD","#7B3FF6","#1F6DFE","#34A6FE"],title: {
   text: this.list[i].price.name,left: '70',top: 5,textStyle: {
    color: '#4DFFFD',fontSize: 14,}
   },tooltip: {
   trigger: 'item',formatter: "{b} : {c} ({d}%)"
   },legend: {
   type: "scroll",orient: "vartical",top: "center",right: '0px',itemWidth: 16,itemHeight: 8,itemGap: 16,textStyle: {
    color: '#FFFFFF',fontSize: 12,},data: ['訂購費用','飼養費用','實驗費用','其他費用']
   },polar: {
   center:['36%','56%'],angleAxis: {
   interval: 3,// 強制設定座標軸分割間隔
   type: 'category',z: 10,axisLine: {show: false},axisLabel: {show: false},radiusAxis: {
   min: 10,max: 1000,interval: 200,splitLine: {
    lineStyle: {
    color: "#2277C3",width: 1,type: "solid"
    }
   }
   },calculable: true,series: [
   {
    type: 'pie',radius: ["10%","14%"],center:['36%',hoverAnimation: false,labelLine: {show: false},data: [{
    value: 0,itemStyle: {
     normal: {
     color: "#809DF5"
     }
    }
    }]
   },{
    stack: 'a',type: 'pie',radius: ['20%','80%'],roseType: 'area',zlevel:10,label: {show: false},data: this.list[i].price.resData // 渲染每個圖表對應的資料
   }]
  	})
  }
 }
 },mounted(){
 this.drawRose()
 }
}
</script>

<style lang="scss" scoped>
.projectCost{
 margin-left: 40px;
 .container{
 display: flex;
 width: 680px;
 height: 240px;
 background-size: 100% 100%;
 // background-image: url('../../../assets/images/projectTest/costDetail.png');
 .wrapper{
  margin-top: 20px;
  width: 340px;
  height:180px;
  border-right: 1px solid #0B61B3;
  .roseChart{
  width: 260px;
  height:180px;
  }
 }
 }
}
</style>

補充知識：echarts 同時控制多個圖表的屬性值變更

echarts v4.x 版本如何同時控制多個圖示的屬性值變更

簡單理解：

echarts為一個物件形式出現在程式碼中，通過 Canvas、SVG（4.0+）、VML 的形式渲染圖表

實現方法：

echarts.init 方法初始化一個 echarts 例項並通過 setOption 方法生成一個簡單的圖表

需求：

將頁面多個圖表渲染完成後選擇更新資料或者檢視固定時間段區域資料等按鈕實現動態的改變echarts的圖表資料表現。

分析：

1、首先對於echarts而言，每個圖表都是一個單獨的echarts物件，那麼我們只需要將每個物件獲取到並通過getOption()函式獲取到每個物件的屬性，並對其賦值。

2、然後通過setOption(echartsObject)方法對其執行渲染就可以了（echartsObject為每個echarts物件）。

設計思路：

1、設定一個全域性陣列用來裝入每一個echarts物件。

var myCharts=[];

然後在每個echarts例項化完成後將當前的echarts物件放進myCharts陣列中。

function darwChart(id,monitorItemData,monitorItemDecimal,oiltime) {
 ...
 var chartid = "chart_" + id;
 chartid = echarts.init(dom);
 chartid.setOption(option={...})
 myCharts.push(chartid);
 ...
}

注：這裡說明id為每個表載入的時候獲取的資料id，本人通過這個id來區分不同的echarts物件，如果設定多個方法互相不關聯，可以不用這麼寫，這裡自由分配，主要理解實現思想。

2、然後外部按鈕觸發事件的方法：迴圈賦值實現，這裡就簡單了。ok，祝你成功。

function gettimeradio(){
 var rr = $('input:radio[name="r2"]:checked').attr('id');
 Xmin = getDateTime(rr);
 Xmax = getDateTime(0);
 myCharts = Array.from(new Set(myCharts));
 myCharts.forEach(data=>{
  var chart = data.getOption();
  chart.xAxis[0].min =Xmin ;
  chart.xAxis[0].max =Xmax ;
  data.setOption(chart); 
 })
}

以上這篇在Vue 中實現迴圈渲染多個相同echarts圖表就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。