import echarts from "echarts"; //引入echarts
export default {
methods: {
initPieChart () {
let data = [
{ value: 62, name: "视频广告" },
{ value: 243, name: "搜索引擎" }
];
let option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c} ({d}%)"
},
legend: {
orient: "vertical",
// 图例的位置
top: 60,
right: 0,
data: ["视频广告", "搜索引擎"],
// ========自定义图例和文字====================
formatter: function (name) {
let target;
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
target = data[i].value
}
}
let arr = ["{a|" + target + "}", "{b|" + name + "}"]
return arr.join("\n")
},
textStyle: {
// 为了图例与第二行文字对齐,需要设置两个样式的padding,把文字顶到合适的位置,然后为了上下行的间隔,设置了第2行文字的行高
rich: {
a: {
fontSize: 30,
color: ['#ea5817', '#80878e'],
padding: 0,
align: 'center',
fontWeight: 600
},
b: {
fontSize: 14,
color: "#000",
align: 'center',
lineHeight: 50,//上下字体位置
padding: [28, 0, 0, 10],//图例位置
fontWeight: 600
}
},
}
// ========================================
},
series: [
{
name: "占比图",
type: "pie",
radius: ["40%", "60%"],
center: ['30%', '50%'],//占比图位置
color: ['#ea5817', '#80878e'],//自定义颜色
avoidLabelOverlap: false,
// 隐藏标示线和文字
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
},
},
label: {
// show: true,
position: "outer",
fontSize: "16",
alignTo: "none",
bleedMargin: 100
},
emphasis: {
label: {
position: "center",
// show: true,
fontSize: "20",
fontWeight: "bold"
}
},
labelLine: {
// show: true,
length: 5
},
data: data
}
]
};
let chart = echarts.init(document.getElementById("myChart"));
chart.setOption(option);
}
},
mounted () {
this.initPieChart();
},
}
</script>