data() { return { PartyActivity: "", imgsrc: require("../../../../assets/images/nodata.png") }; } PartyActivityPie() { if (this.PartyActivity.length > 0) { let series = []; let legendData = []; let total; for (let i = 0; i < this.PartyActivity.length; i++) { series.push({ name: this.PartyActivity[i].text, value: this.PartyActivity[i].count, totals: this.PartyActivity[i].total }); total = this.PartyActivity[i].total; legendData.push(this.PartyActivity[i].text); } _document.getElementById("PartyActivity").innerHTML = '<div id="PartyActivityPie" style="100%;height:100%;"></div>'; let myChart = echarts.init( _document.getElementById("PartyActivityPie") ); let option = { title: { text: total, right: "73%", top: "43%", textStyle: { //环形图内默认文字样式 fontSize: 20, fontWeight: "bold", color: "#333" } }, tooltip: { //提示框,可以在全局也可以在 trigger: "item", //提示框的样式 formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { top: "middle", textStyle: { fontSize: 14, color: "#333" }, x: "300px", y: "5px", orient: "vertical", data: legendData, formatter: function(name) { let count = 0; let totals = 0; for (let i = 0; i < series.length; i++) { if (series[i].name == name) { count = series[i].value; totals = Math.floor((series[i].value / series[i].totals) * 100) + "%"; } } return name + " | " + totals + " | " + count; } }, series: [ { name: "党建活动", type: "pie", //环形图的type和饼图相同 radius: ["50%", "70%"], //饼图的半径,第一个为内半径,第二个为外半径 center: ["25%", "47%"], label: { normal: { show: false, textStyle: { baseline: "top", fontSize: 12 } } }, color: ["#e57c00", "#6f9b94", "#6f8c9b", "#9b0b11"], labelLine: { normal: { show: false } }, data: series } ] }; myChart.setOption(option); } else { var html = '<div class="nodata"><img src=' + this.imgsrc + "></div>"; _document.getElementById("PartyActivity").innerHTML = html;
_document.getElementById('PartyActivity').removeAttribute('_echarts_instance_'); //echarts_instance_不能创建多个实例,所以需删除。否则无法显示有数据的界面。
}
},
如图: