在Vue 中实现循环渲染多个相同echarts图表
时间：2021-07-13 08:22:40 | 栏目：vue | 点击：次
在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同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:'项目二',
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数组中。
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);
})
}