在Vue 中實現循環渲染多個相同echarts圖表

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

上圖效果實現代碼：

<template> <div class='projectCost'> <div class='container'> <div 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:’項目二’, resData:[ {name:’訂購費用’,value:18}, {name:’飼養費用’,value:10}, {name:’實驗費用’,value:20}, {name:’其他費用’,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: ' : {c} (zjlf1h5%)' }, 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, 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 // 渲染每個圖表對應的數據 }] }) } } }, 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圖表就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。