<template>
<div id="main"></div>
</template>
<script>
export default {
name: "",
data() {
return {
total: "总的符合数",
myEchart: null,
};
},
methods: {
drawChart() {
// 这块一定要判断
if (
this.myEchart != null &&
this.myEchart != "" &&
this.myEchart != undefined
) {
this.myEchart.dispose(); //销毁
}
this.myEchart = this.$echarts.init(document.getElementById("main"));
let option = {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "20",
},
title: [
{
text: 167,
left: "30%",
top: "45%",
show: true,
textStyle: {
fontSize: 34,
color: "#a2aee0",
},
},
],
series: [
{
type: "pie",
radius: ["50%", "70%"],
center: ["50%", "40%"],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: "center",
color: "#f00",
formatter:
"{total|" + this.total + "}" + "\n\r" + "{active|共发布活动}",
rich: {
total: {
fontSize: 35,
fontFamily: "微软雅黑",
color: "#099",
},
active: {
fontFamily: "微软雅黑",
fontSize: 16,
color: "#099",
lineHeight: 30,
},
},
},
},
center: ["30%", 200],
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
},
],
};
this.myEchart.setOption(option);
},
},
mounted() {
this.drawChart();
// 响应式
window.addEventListener("resize", () => {
this.drawChart();
});
},
};
</script>
<style scoped>
#main {
width: 100%;
height: 100%;
}
</style>
1547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
