快捷導(dǎo)航

在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表

更新時(shí)間：2020年07月20日 14:47:14 作者：明天也要努力

這篇文章主要介紹了在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在開發(fā)過(guò)程中我們常常需要，在一個(gè)頁(yè)面中使用相同的圖表來(lái)展示同級(jí)別的多個(gè)事物（如：同級(jí)別的多個(gè)不同id的倉(cāng)庫(kù)、同級(jí)別的多個(gè)不同id的設(shè)備等）。

上圖效果實(shí)現(xiàn)代碼：

<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:[ // 假數(shù)據(jù)
  {
   id:1,
   price:{
   name:'項(xiàng)目一',
   resData:[
    {name:'訂購(gòu)費(fèi)用',value:12},
    {name:'飼養(yǎng)費(fèi)用',value:18},
    {name:'實(shí)驗(yàn)費(fèi)用',value:8},
    {name:'其他費(fèi)用',value:10},
   ]
   }
  },{
   id:2,
   price:{
   name:'項(xiàng)目二',
   resData:[
    {name:'訂購(gòu)費(fèi)用',value:18},
    {name:'飼養(yǎng)費(fèi)用',value:10},
    {name:'實(shí)驗(yàn)費(fèi)用',value:20},
    {name:'其他費(fèi)用',value:9},
   ]
   }
  }
  ]
 }
 },
 methods:{
 drawRose(){
  var echarts = require("echarts");
  var roseCharts = document.getElementsByClassName('roseChart'); // 對(duì)應(yīng)地使用ByClassName
  for(var i = 0;i < roseCharts.length;i++ ){ // 通過(guò)for循環(huán)，在相同class的dom內(nèi)繪制元素
  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: " : {c} (vvxyksv9kd%)"
   },
   legend: {
   type: "scroll",
   orient: "vartical",
   top: "center",
   right: '0px',
   itemWidth: 16,
   itemHeight: 8,
   itemGap: 16,
   textStyle: {
    color: '#FFFFFF',
    fontSize: 12,
   },
   data: ['訂購(gòu)費(fèi)用', '飼養(yǎng)費(fèi)用', '實(shí)驗(yàn)費(fèi)用', '其他費(fèi)用']
   },
   polar: {
   center:['36%','56%'],
   },
   angleAxis: {
   interval: 3, // 強(qiáng)制設(shè)置坐標(biāo)軸分割間隔
   type: 'category',
   z: 10,
   axisLine: {show: false},
   axisLabel: {show: false},
   },
   radiusAxis: {
   min: 10,
   max: 1000,
   interval: 200,
   axisLine: {show: false},
   axisLabel: {show: false},
   splitLine: {
    lineStyle: {
    color: "#2277C3",
    width: 1,
    type: "solid"
    }
   }
   },
   calculable: true,
   series: [
   {
    type: 'pie',
    radius: ["10%", "14%"],
    center:['36%','56%'],
    hoverAnimation: false,
    labelLine: {show: false},
    data: [{
    value: 0,
    itemStyle: {
     normal: {
     color: "#809DF5"
     }
    }
    }]
   },{
    stack: 'a',
    type: 'pie',
    radius: ['20%', '80%'],
    center:['36%','56%'],
    roseType: 'area',
    zlevel:10,
    label: {show: false},
    labelLine: {show: false},
    data: this.list[i].price.resData // 渲染每個(gè)圖表對(duì)應(yīng)的數(shù)據(jù)
   }]
  	})
  }
 }
 },
 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>

補(bǔ)充知識(shí)：echarts 同時(shí)控制多個(gè)圖表的屬性值變更

echarts v4.x 版本如何同時(shí)控制多個(gè)圖標(biāo)的屬性值變更

簡(jiǎn)單理解：

echarts為一個(gè)對(duì)象形式出現(xiàn)在代碼中，通過(guò) Canvas、SVG（4.0+）、VML 的形式渲染圖表

實(shí)現(xiàn)方法：

echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過(guò) setOption 方法生成一個(gè)簡(jiǎn)單的圖表

需求：

將頁(yè)面多個(gè)圖表渲染完成后選擇更新數(shù)據(jù)或者查看固定時(shí)間段區(qū)域數(shù)據(jù)等按鈕實(shí)現(xiàn)動(dòng)態(tài)的改變echarts的圖表數(shù)據(jù)表現(xiàn)。

分析：

1、首先對(duì)于echarts而言，每個(gè)圖表都是一個(gè)單獨(dú)的echarts對(duì)象，那么我們只需要將每個(gè)對(duì)象獲取到并通過(guò)getOption()函數(shù)獲取到每個(gè)對(duì)象的屬性，并對(duì)其賦值。

2、然后通過(guò)setOption(echartsObject)方法對(duì)其執(zhí)行渲染就可以了（echartsObject為每個(gè)echarts對(duì)象）。

設(shè)計(jì)思路：

1、設(shè)置一個(gè)全局?jǐn)?shù)組用來(lái)裝入每一個(gè)echarts對(duì)象。

var myCharts=[];

然后在每個(gè)echarts實(shí)例化完成后將當(dāng)前的echarts對(duì)象放進(jìn)myCharts數(shù)組中。

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

注：這里說(shuō)明id為每個(gè)表加載的時(shí)候獲取的數(shù)據(jù)id，本人通過(guò)這個(gè)id來(lái)區(qū)分不同的echarts對(duì)象，如果設(shè)置多個(gè)方法互相不關(guān)聯(lián)，可以不用這么寫，這里自由分配，主要理解實(shí)現(xiàn)思想。

2、然后外部按鈕觸發(fā)事件的方法：循環(huán)賦值實(shí)現(xiàn)，這里就簡(jiǎn)單了。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 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: