在Vue 中實現(xiàn)循環(huán)渲染多個相同echarts圖表
在開發(fā)過程中我們常常需要，在一個頁面中使用相同的圖表來展示同級別的多個事物（如：同級別的多個不同id的倉庫、同級別的多個不同id的設(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:'項目一',
resData:[
{name:'訂購費用',value:12},
{name:'飼養(yǎng)費用',value:18},
{name:'實驗費用',value:8},
{name:'其他費用',value:10},
]
}
},{
id:2,
price:{
name:'項目二',
resData:[
{name:'訂購費用',value:18},
{name:'飼養(yǎng)費用',value:10},
{name:'實驗費用',value:20},
{name:'其他費用',value:9},
]
}
}
]
}
},
methods:{
drawRose(){
var echarts = require("echarts");
var roseCharts = document.getElementsByClassName('roseChart'); // 對應(yīng)地使用ByClassName
for(var i = 0;i < roseCharts.length;i++ ){ // 通過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} (wppm3vysvbp%)"
},
legend: {
type: "scroll",
orient: "vartical",
top: "center",
right: '0px',
itemWidth: 16,
itemHeight: 8,
itemGap: 16,
textStyle: {
color: '#FFFFFF',
fontSize: 12,
},
data: ['訂購費用', '飼養(yǎng)費用', '實驗費用', '其他費用']
},
polar: {
center:['36%','56%'],
},
angleAxis: {
interval: 3, // 強制設(shè)置坐標軸分割間隔
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 // 渲染每個圖表對應(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>
補充知識：echarts 同時控制多個圖表的屬性值變更
echarts v4.x 版本如何同時控制多個圖標的屬性值變更
簡單理解：
echarts為一個對象形式出現(xiàn)在代碼中，通過 Canvas、SVG（4.0+）、VML 的形式渲染圖表
實現(xiàn)方法：
echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的圖表
需求：
將頁面多個圖表渲染完成后 選擇更新數(shù)據(jù)或者查看固定時間段區(qū)域數(shù)據(jù)等按鈕實現(xiàn)動態(tài)的改變echarts的圖表數(shù)據(jù)表現(xiàn)。
分析：
1、首先對于echarts而言，每個圖表都是一個單獨的echarts對象，那么我們只需要將每個對象獲取到并通過getOption()函數(shù)獲取到每個對象的屬性，并對其賦值。
2、然后通過setOption(echartsObject)方法對其執(zhí)行渲染就可以了（echartsObject為每個echarts對象）。
設(shè)計思路：
1、設(shè)置一個全局數(shù)組用來裝入每一個echarts對象。
var myCharts=[];
然后在每個echarts實例化完成后將當前的echarts對象放進myCharts數(shù)組中。
function darwChart(id, monitorItemData, monitorItemDecimal,oiltime) {
...
var chartid = "chart_" + id;
chartid = echarts.init(dom);
chartid.setOption(option={...})
myCharts.push(chartid);
...
}
注：這里說明id為每個表加載的時候獲取的數(shù)據(jù)id，本人通過這個id來區(qū)分不同的echarts對象，如果設(shè)置多個方法互相不關(guān)聯(lián)，可以不用這么寫，這里自由分配，主要理解實現(xiàn)思想。
2、然后外部按鈕觸發(fā)事件的方法：循環(huán)賦值實現(xià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 中實現(xiàn)循環(huán)渲染多個相同echarts圖表就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 使用 sortable 實現(xiàn) el-table 拖拽排序功能
這篇文章主要介紹了vue 使用 sortable 實現(xiàn) el-table 拖拽排序功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
vite 這個是尤大開發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項目的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章給大家介紹了vue項目全局配置微信分享思路講解，使用vue作為框架，使用vux作為ui組件庫，具體內(nèi)容詳情大家跟隨腳本之家小編一起學習吧2018-05-05
IDEA中Debug調(diào)試VUE前端項目調(diào)試JS只需兩步
這篇文章主要為大家介紹了在IDEA中Debug調(diào)試VUE前端項目，只需要兩步就可以調(diào)試JS的實現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-02-02
本文主要介紹了記一次Vue中$route序列號報錯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了關(guān)于Vue v-on指令的一些使用場景，比如監(jiān)聽事件、傳入event參數(shù)、事件修飾符的一些場景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下2021-10-10
django簡單的前后端分離的數(shù)據(jù)傳輸實例 axios
這篇文章主要介紹了django簡單的前后端分離的數(shù)據(jù)傳輸實例 axios，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-05-05
Vue項目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue 監(jiān)聽 Treeselect 選擇項的改變操作
這篇文章主要介紹了vue 監(jiān)聽 Treeselect 選擇項的改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue源碼探究之狀態(tài)初始化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11