<el-col style="margin-bottom:20px" :span="8" v-for="(item,index) in list" :key="index">
<div class="wrapper" >
<div class="roseChart"></div>
</div>
</el-col>
// 遍历饼图
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: ['#546ef3', '#a6cb09', '#f8bd00'],
legend: {
x: 'left',
textStyle: {
color: '#fft'
}
},
tooltip: {
show: true,
trigger: 'item',
// formatter: "{b} : <br/>{d}%",
formatter: "{b} : <br/>{c}",
},
series: [
// 一个饼图
// {
// type: 'pie',
// selectedMode: 'single',
// radius: ['60%', '90%'],
// label: {
// normal: {
// position: 'inner'
// }
// },
// labelLine: {
// normal: {
// show: false
// }
// },
// center:['50%','60%'],
// // roseType: 'area',
// data: this.list[i].resData // 渲染每个图表对应的数据
// }
// 双环图
{
type: 'pie',
radius: ['50%', '70%'],
label: {
normal: {
position: 'inner',
show : false
}
},
labelLine: {
normal: {
show: false
}
},
center:['50%','50%'],
data: this.list[i].aData // 渲染每个图表对应的数据
},
{
type: 'pie',
radius: ['65%', '80%'],
label: {
normal: {
position: 'inner',
show : false
}
},
labelLine: {
normal: {
show: false
}
},
center:['50%','50%'],
data: this.list[i].bData // 渲染每个图表对应的数据
},
]
},true)
}
},
list:[ // 假数据
{
aData:[
{
name:'故障',
value:20,
itemStyle: {
normal: {
color: '#94d96c'
}
}
},
{
value:40,
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#393d50',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#393d50'
}
},
}
],
bData:[
{
name:'目标',
value:40,
itemStyle: {
normal: {
color:'#fb734e'
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color:'#fb734e'
// }, {
// offset: 1,
// color: '#e32f46'
// }])
}
}
},
{
value:20,
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#393d50',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#393d50'
}
},
}
],
},
// {
// resData:[
// {name:'故障',value:7},
// {name:'目标',value:30},
// ]
// }
]
