首页 > 编程语言 > 在Vue 中实现循环渲染多个相同echarts图表
2020
10-08

在Vue 中实现循环渲染多个相同echarts图表

在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级别的多个不同id的设备等）。

上图效果实现代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<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:'项目二',
   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: "{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,
   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数组中。

?
1
2
3
4
5
6
7
8
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，祝你成功。

?
1
2
3
4
5
6
7
8
9
10
11
12
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图表就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持自学编程网。

编程技巧