父组件: <ordinary-ring
ref="sale"
id="sale"
:data="saleRatioData"
:options="saleOptions"
></ordinary-ring>
computed: {
saleRatioData() {
return this.saleData.map((item) => {
return {
...item,
itemStyle: {
normal: {
borderWidth: 4,
borderColor: "#fff",
borderRadius: 3,
color: item.color,
},
},
};
});
},
},
//销量占比图标配置
saleOptions: {
legend: {
top: "25%",
right: "6%",
showValue: true,
},
},
子组件:
<template>
<div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import resize from "@/views/mixins/resize";
export default {
mixins: [resize],
props: {
id: {
type: String,
default: "",
},
data: {
type: Array,
default: () => [],
},
options: {
type: Object,
default: () => {},
},
},
data() {
return {
chart: null,
};
},
watch: {
data: {
handler(newName, oldName) {
this.initChart();
},
deep: true, //深度监听
},
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = this.$echarts.init(document.getElementById(this.id));
let data = [...this.data];
let showValue = this.options.legend.showValue ? true : false; //是否显示%符号
let option = {
grid: this.options.grid
? this.options.grid
: {
top: "15%",
left: 0,
right: "5%",
bottom: "10%",
},
tooltip: {
trigger: "item",
backgroundColor: "#fff",
textStyle: {
color: "#000",
},
formatter: showValue
? function (text) {
var dotHtml =
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background:' +
text.color +
'"></span>';
return dotHtml + text.data.name + ": " + text.data.value + "%";
}
: function (text) {
var dotHtml =
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background:' +
text.color +
'"></span>';
return dotHtml + text.data.name + ": " + text.data.value;
},
},
legend: {
show: true,
orient: "vertical",
icon: "circle",
top: this.options.legend ? this.options.legend.top : "40%",
right: this.options.legend ? this.options.legend.right : "10%",
formatter: function (name) {
if (showValue) {
for (var i = 0; i < data.length; i++) {
if (data[i].name == name) {
return (
"{title|" +
name +
"}" +
" " +
"{value|" +
data[i].value +
"%}"
);
}
}
} else {
return "{title|" + name + "}";
}
},
textStyle: {
rich: {
title: {
align: "center",
fontSize: this.fontSize(15),
color: "#858A8E",
},
value: {
align: "center",
fontSize: this.fontSize(15),
color: "#858A8E",
},
},
},
},
series: [
{
name: "",
type: "pie",
center: this.options.center ? this.options.center : ["35%", "50%"],
radius: this.options.radius ? this.options.radius : ["45%", "65%"],
legendHoverLink: false, // 禁用legend的hover
hoverAnimation: true,
//圆环内部文字
label: {
normal: {
show: false,
position: "center",
formatter: showValue
? function (text) {
return (
"{value|" +
text.value +
"%}\n" +
"{title|" +
text.name +
"}"
);
}
: "{value|{d}%}\n{name|{b}}", //文字显示格式 饼图-d表示百分比 b-数据项名称
textStyle: {
//文字样式设置
rich: {
value: {
padding: 5,
align: "center",
verticalAlign: "middle",
fontSize: this.fontSize(27),
color: "#000",
fontWeight: "bold",
},
title: {
align: "center",
verticalAlign: "middle",
fontSize: this.fontSize(14),
color: "#999",
},
name: {
align: "center",
verticalAlign: "middle",
fontSize: this.fontSize(14),
color: "#999",
},
},
},
},
//高亮样式设置
emphasis: {
show: true,
textStyle: {
fontSize: this.fontSize(12),
},
},
},
//高亮圆环图标
emphasis: {
label: {
show: true,
position: "center",
formatter: "{value|{d}%}\n{name|{b}}",
rich: {
value: {
padding: 5,
align: "center",
verticalAlign: "middle",
fontSize: this.fontSize(27),
color: "#000",
fontWeight: "bold",
},
name: {
align: "center",
verticalAlign: "middle",
fontSize: this.fontSize(14),
color: "#999",
},
},
},
scale: true, //放大
// scaleSize: 20,
// itemStyle: {
// borderColor: "#fff",
// borderWidth: 10,
// shadowBlur: 10,
// },
},
labelLine: {
show: false,
},
itemStyle: {
normal: {
borderWidth: 3,
borderColor: "#fff", //边框的颜色
},
},
data: this.data,
},
],
};
this.chart.clear();
this.chart.setOption(option);
setTimeout(() => {
this.chart.resize();
}, 300);
},
//设置默认选中
getDefaultSelected(params, index = 0) {
//高亮第一条数据
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
//将data中的数据全部设置为未选中状态
for (var i = 0; i < this.data.length; i++) {
this.data[i].selected = false;
//取消之前高亮的图形
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: i,
});
}
//再data中找到传递过来要默认的数据,将其设置为选中
const idx = this.data.findIndex((el) => el.name == params.name);
if (idx !== -1) {
this.data[idx].selected = true;
}
//图例设置为选中
this.chart.setOption({
legend: { selected: { [params.name]: true } },
});
//高亮样式
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: idx,
});
//鼠标进入图表时触发的事件
this.chart.on("mouseover", (e) => {
//若是当前鼠标选择的数据不是默认数据的话,清除默认数据的高亮样式
if (e.dataIndex != index) {
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
//鼠标进入节点时的触发事件
this.chart.on("mouseout", (e) => {
index = e.dataIndex; //修改高亮的数据下标
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex, //dataIndex为数据在data中的下标
});
});
},
},
mounted() {
this.initChart();
},
};
</script>
结果: