<template>
<div
ref="pie"
style="width: 500px; height: 300px; border: 1px solid red"
></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "pie",
mounted() {
let myChart = echarts.init(this.$refs.pie);
let option = {
legend: {},
series: [
{
type: "pie", //饼图
legendHoverLink: false, // 是否启用图例 hover 时的联动高亮。
avoidLabelOverlap: false, // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
// 如果不需要开启该策略，例如圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
radius: ["40%", "70%"], // numberstringArray
// roseType: 'radius',
/* 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
'area' 所有扇区圆心角相同，仅通过半径展现数据大小。 */
/* 占位圆样式。 */
emptyCircleStyle: {
color: "red",
},
/* 图形样式。 */
itemStyle: {
borderColor: "#fff", //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
borderWidth: 2, // 描边线宽。为 0 时无描边。
borderRadius: 10, //用于指定饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径的百分比值。
},
/* 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 */
label: {
show: false,
position: "center", // 标签的位置。
},
emphasis: {
scale: true, // 是否开启高亮后扇区的放大效果。
scaleSize: 10, // 高亮后扇区的放大尺寸, 在开启 emphasis.scale 后有效
label: {
show: true,
fontWeight: "bolder",
fontSize: "50", // string
},
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
},
],
tooltip: {},
};
myChart.setOption(option);
},
};
</script>
<style>
</style>
