vue根据获取的数据动态循环渲染多个echart(多个dom节点,多个ID)
//在dom节点加载之后调用渲染echart仪表盘方法,this.$nextTick(function(){ }<divclass="chart"><divclass="geo"v-for="(dataval,index)indataVal":key="index":id="forId(index)"></div>...
·
//在dom节点加载之后调用渲染echart仪表盘方法,this.$nextTick(function(){ }
<div class="chart">
<div class="geo" v-for="(dataval, index) in dataVal" :key="index" :id="forId(index)"></div>
</div>
methods: {
forId:function(index){
return "geo_" +index
},
mapTree() {
this.$nextTick(function(){
for(var i=0;i<this.dataVal.length;i++){
//获取id放入数组中,以便下面渲染echart仪表盘使用
this.getId.push(this.$echarts.init(document.getElementById('geo_'+i)));
this.getId[i].setOption({
title: {
text: this.dataVal[i].name+'栋',
textStyle: {
color: '#00f2f1',
fontSize: 14
},
left: 'center',
top: 5
},
tooltip: {
formatter: '{a} <br/>{c}'
},
series:[
{
name: '工作电表数',
type: 'gauge',
radius: '80%',
min: 0,
max: Number(this.dataVal[i].sum),
splitNumber: 10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.30, '#ff4500'], [0.80, '#1e90ff'], [1, 'lime']],
width: 1,
shadowColor: '#fff', //默认透明
}
},
axisLabel: { // 坐标轴小标记
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
},
axisTick: { // 坐标轴小标记
length: 4, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
splitLine: { // 分隔线
length: 7, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width: 2,
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
pointer: { // 分隔线
width:4,//指针的宽度
length:"70%", //指针长度,按照半圆半径的百分比
shadowColor: '#fff', //默认透明
shadowBlur: 5
},
title: {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
detail: {
fontSize: 12,
},
data: [{value: this.dataVal[i].normalSum, name: ''}]
}]
});
}
})
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)