需求：
思路：一个一个添加过于麻烦，直接遍历数据源，重复渲染饼图
注意事项：因为需要遍历饼图，所以不能用id或者ref，而是需要使用class
<div class="career-model" >
<div v-for="(item,index) in tankInfoList"
:key="index"
class="career-model-item" >
<div style="width:40%">{{item.name }} </div>
<div class="career-chart-style">
<div class="career-chart"></div>
</div>
<div class="career-percentage">{{item.number }}% </div>
</div>
</div>
.career-model{
width: 400px;
height: 140px;
position: absolute;
left: 200px;
top: 20px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.career-model-item{
display: flex;
align-items: center;
width: auto;
height: 20%;
position: relative;
}
.career-chart-style{
width: 60px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.career-chart{
width: 100%;
height: 100%;
}
.career-percentage{
width: 20%;
height: auto;
position: absolute;
right: 44px;
top: 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
//数据源
tankInfoList:[
{
name:'汽油',
number:0.2,
id:1
},
{
name:'轻循环油',
number:0.2,
id:3
},
{
name:'混合芳烃',
number:0.7,
id:5
},
{
name:'生物柴油',
number:21.6,
id:7
},
{
name:'甲醇',
number:42.2,
id:9
},
{
name:'燃料油',
number:12,
id:2
},
{
name:'正丁烷',
number:19.7,
id:4
},
{
name:'煤油',
number:0.3,
id:6
},
{
name:'其他',
number:3,
id:8
},
],
//遍历渲染饼图
careerData(){
let careerEChart = document.getElementsByClassName('career-chart');
for(let i =0;i<careerEChart.length;i++){
let careerChart = echarts.init(careerEChart[i]);
let chartCareerOption = {
color: ["#f2e5fe", "#aa75ed"] /*饼状图的颜色*/,
tooltip: {
show:false,
trigger: "item",
formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,
},
legend: {
show:false,
},
series: [
{
type: "pie", //饼状图
center: ["22%", "50%"], //显示位置
name: "",
animation:false,
radius: ["0%", "82%"] /*空心圆的占比*/,
silent:true,
data: [ {
value:100 - Number(this.tankInfoList[i].number),
name: "",
},
{
value: Number(this.tankInfoList[i].number),
name: "",
},],
avoidLabelOverlap: false,
label: {
emphasis: {
show: false /*空心文字出现*/,
},
},
labelLine: {
normal: {
show: false,
},
},
},
],
};
const option = deepClone(chartCareerOption);
option && careerChart.setOption(option);
}
},
//挂载阶段调用
mounted(){
this.careerData();
},
实际效果:
