在template中引入
<div class="chart">
<div id="pie" style="height: 100%; width: 100%"></div>
</div>
在script中实现
initPie() {
let vm = this;
let chartDom = document.getElementById(\'pie\');
let myChart = vm.$echarts.init(chartDom);
let getsjjg = [\'20~30\', \'30~60\', \'60及以上\'];
let getsjjgrs = [250, 200, 100];
let syjgdata = [];
for (let i = 0; i < getsjjg.length; i++) {
syjgdata.push({
name: getsjjg[i],
value: getsjjgrs[i]
});
}
let rich = {
name: {
color: \'#666666\',
fontSize: 14,
padding: [8, 30, 0, 30],
fontWeight: \'400\',
align: \'left\'
},
value: {
color: \'#333\',
fontSize: 15,
padding: [0, 30, 8, 30],
fontWeight: \'500\',
align: \'left\'
},
percent: {
color: \'#FFF\',
align: \'right\',
fontSize: 15,
fontWeight: \'500\'
//padding: [0, 5]
},
cir: {
fontSize: 26
}
};
let colorList = [\'#507AFF\', \'#51D9A2\', \'#FFC371\'];
let option = {
title: {
text: \'年龄\',
subtext: \'\',
top: \'43%\',
left: \'13%\',
textStyle: {
// fontSize: 18,//字体大小
color: \'#fff\' //字体颜色
}
},
legend: {
orient: \'vertical\',
top: \'23%\',
left: \'77%\',
textStyle: {
// fontSize: 18,//字体大小
color: \'#fff\' //字体颜色
}
},
tooltip: {
trigger: \'item\',
formatter: \'{a} <br/>{b} : {c} ({d}%)\'
},
series: [
{
name: \'年龄\',
itemStyle: {
normal: {
color: function (params) {
return colorList[params.dataIndex];
}
}
},
type: \'pie\',
radius: [\'0%\', \'50%\'],
center: [\'50%\', \'50%\'],
label: {
normal: {
position: \'inner\',
formatter: params => {
return \'{percent|\' + params.percent.toFixed(0) + \'%}\';
},
rich: rich
}
},
data: syjgdata
},
{
itemStyle: {
normal: {
color: function (params) {
return colorList[params.dataIndex];
}
}
},
type: \'pie\',
silent: true, //取消高亮
radius: [\'0%\', \'50%\'],
center: [\'50%\', \'50%\'],
data: syjgdata,
z: -1
}
]
};
myChart.setOption(option);
并在初始化中调用
this.initPie();
},