需求:
鼠标移入:
外圆:
内圆:
实现:
<template>
<div
id="chart"
style="width: 500px; height: 200px; background: rgba(2, 15, 43, 0.7)"
></div>
</template>
<script>
export default {
data() {
return {
data: [
{
name: "公办",
value: 456,
},
{
name: "民办",
value: 123,
},
{
name: "男",
value: 100,
},
{
name: "女",
value: 200,
},
],
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
let that = this;
let colors = ["#F3974A", "#00EA9C", "#529CF6", "#FC595A"];
let danwei = "人";
let option = {
// 配置项
color: colors,
tooltip: {
// trigger: "item",
// backgroundColor: "rgba(0,0,0,0.9)",
// formatter: function (params) {
// let all = infoData.reduce((a, b) => {
// return Number(a) + Number(b.data.value);
// }, 0);
// return (
// '<div style="font-size: 16px;font-weight: bold;font-family: SourceHanSansCN">' +
// params.seriesName +
// "<br/>" +
// params.marker +
// '<span style="color:' +
// params.color +
// ';font-family: BoldCondensed">' +
// params.data["name"] +
// "\n" +
// params.data["value"]
// .toString()
// .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
// "人 " +
// "(" +
// params.percent.toFixed(2) +
// // ((params.data["value"] / all) * 100).toFixed(2) +
// "%" +
// ")" +
// "</span>" +
// "</div>"
// );
// },
},
legend: [
{
orient: "vertical",
left: "5%",
top: "35%",
itemWidth: 10,
itemHeight: 10,
icon: "rect",
itemGap: 20,
textStyle: {
fontSize: 16,
color: "rgba(255,255,255,.8)",
fontWeight: "bold",
},
data: [
{
name: "公办",
textStyle: {
rich: {
title: {
color: "#A0B2D3",
fontSize: 16,
fontWeight: "bolder",
width: 60, //文字宽度
align: "left",
},
value: {
color: "#F3974A",
fontSize: 16,
fontWeight: "bolder",
fontFamily: "BoldCondensed",
width: 30, //数据宽度
align: "left",
},
unit: {
color: "#A0B2D3",
fontSize: 16,
fontWeight: "bolder",
},
},
},
},
{
name: "民办",
textStyle: {
rich: {
title: {
color: "#A0B2D3",
fontSize: 16,
fontWeight: "bolder",
width: 60, //文字宽度
align: "left",
},
value: {
color: "#00EA9C",
fontSize: 16,
fontWeight: "bolder",
fontFamily: "BoldCondensed",
width: 30, //数据宽度
align: "left",
},
unit: {
color: "#A0B2D3",
fontSize: 16,
fontWeight: "bolder",
},
},
},
},
],
formatter: function (name) {
let newItem = "";
that.data.map((item) => {
if (item.name == name) {
newItem = item;
}
});
return `{title|${newItem.name}}{value|${newItem.value.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,")}}{unit|${danwei}}`;
},
},
{
data: [
{
name: "男",
// icon: `image://${man}`,
icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAMAAAAP3mfjAAAAvVBMVEUAAABAgP9Vqv9Jkv9Vqv9Gov9Onf9JpP9Om/9Mof9SnP9Nm/9Mn/9Onf9Rm/9Rnf9Nn/9OnP9On/tRnvxNnvxQnfxQnvxQnvxOnvxOnf1Pnv1Pnv1Qnv1Pnv1Pnf1Pnv1Pnv1On/1Qnv1Pnv1Onv1On/1Qnv5Qnv5Pnv5Pn/5Qnv5PnvxOnvxPnvxPnvxPnv1Pnv1Pnv1Onv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv3hJDdrAAAAPnRSTlMABAYHCQsNDhceHyElJykvOD5ITE9WWVxfaHF0g4SFi46PkJGWnKqwuLm9wsPHy87S1d3g4+ju7/T19vf4+zNjKZEAAACXSURBVBjTxdBFEgJBEETRxN3d3Rtr3P79j8WGaeYARPBX9Ta5KEmSMp1+Qd/yD6D59RrgHnE+A5B1ngOcQ87pAzwrvsForZF0d3trrbXW7icJSeENrlNKauFrKi39vko7LpePjiDtMObj8T9smHnucZNyw4yB4xaI90qSJANmDHgf+LVXYEbw8jyAbhkWnoP1akDFRkyS3hKPQR3ayj/hAAAAAElFTkSuQmCC",
textStyle: {
rich: {
title: {
color: "#A0B2D3",
fontSize: 16,
fontWeight: "bolder",
width: 60, //文字宽度
align: "left",
},
value: {
color: "#529CF6",
fontSize: 16,
fontWeight: "bolder",
fontFamily: "BoldCondensed",
width: 30, //数据宽度
align: "left",
},
unit: {
color: "#A0B2D3",
fontSize: 16,
fontWeight: "bolder",
},
},
},
},
{
name: "女",
// icon: `image://${woman}`,
icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAiCAMAAABhn6n1AAABGlBMVEUAAAD/AAD/VVX/VVX/SUn/YGD/Zmb/YmL/VVX/Wlr/Xl7/WVn/VVX/Xl7/WFj/V1f/W1v5WVn6XFz6Wlr6W1v6WFj7WVn7WVn7WVn7WVn7W1v7WVn8Wlr8Wlr8W1v8Wlr8W1v8W1v8W1v9W1v9WVn9Wlr9Wlr9W1v9W1v9WVn9Wlr9WVn9Wlr7Wlr7W1v7Wlr7W1v7WVn7Wlr8W1v8Wlr8W1v8WVn8Wlr8WVn8W1v8Wlr8Wlr8Wlr8Wlr8Wlr8W1v8Wlr8Wlr8WVn8Wlr8W1v8Wlr9Wlr9Wlr9Wlr9Wlr7W1v7Wlr8Wlr8Wlr8Wlr8W1v8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8WlrVqYT9AAAAXXRSTlMAAQMGBwgKDQ8RExQVGyAjKi4yMzU3OTxCRUZIT1VaXl9iZWttbm9wc3V6e32AhIWKjJGVlpidn6Cjpaiqr7C0u72/w8XHzc/S1Nba2+Hl5+jp6+3w8/b3+Pn6/P2iRbbvAAAA7UlEQVQoz8XQV1ICARBF0auYs44BAybEnMUcQDErCGJA5e5/G37AyOzA9/dOVVd3NQDQGp+MEUnvsz50R2BfdTsCl6oXEVhXTUUgdlj52mtu9LbxxPRMIt4S9nhJVQujtd5Vtp6XdgCW/cs8AFdev6oW780AdHy7VFWtrPjRAiT8WawNJHUCOPDmpAbpR3ehqeBGfU1+xycY0oVwSVL7WbO0GcLquymOPboNIXvuAf2bw9UQKsFWHzDbuHQKgNMGpAGayw3IA4wZyQDQEwSB5u58D4Kgs/4izeR8i/z0n+DTs6zFCCSzgyNXcwD8AmVGYKFUgvUsAAAAAElFTkSuQmCC",
textStyle: {
rich: {
title: {
color: "#A0B2D3",
fontSize: 16,
fontWeight: "bolder",
width: 60, //文字宽度
align: "left",
},
value: {
color: "#FC595A",
fontSize: 16,
fontWeight: "bolder",
fontFamily: "BoldCondensed",
width: 30, //数据宽度
align: "left",
},
unit: {
color: "#A0B2D3",
fontSize: 16,
fontWeight: "bolder",
},
},
},
},
],
orient: "vertical",
left: "70%",
top: "30%",
itemWidth: 15,
itemHeight: 32, //图例宽高
icon: "rect",
formatter: function (name) {
// console.log(name);
let newItem = "";
that.data.map((item) => {
if (item.name == name) {
newItem = item;
}
});
return `{title|${newItem.name}}{value|${newItem.value.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,")}}{unit|${danwei}}`;
},
},
],
series: [
{
//外圆
name: "学生比例",
type: "pie",
radius: ["75%", "60%"],
center: ["50%", "50%"], //调整图像的位置
hoverAnimation: false,
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
animationType: "expansion",
data: that.data.slice(0, 2).map((item) => {
return { value: item.value, name: item.name };
}),
tooltip: {
// show: true,
// trigger: "item",
backgroundColor: "rgba(0,0,0,0.9)",
formatter: function (params) {
let all = that.data.slice(0, 2).reduce((a, b) => {
return Number(a) + Number(b.value);
}, 0); //计算总数
// console.log(params);
return (
'<div style="font-size: 16px;font-weight: bold;font-family: SourceHanSansCN">' +
params.seriesName +
"<br/>" +
params.marker +
'<span style="color:' +
params.color +
';font-family: BoldCondensed">' +
params.data["name"] +
"\n" +
params.data["value"]
.toString()
.replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
"人 " +
"(" +
params.percent.toFixed(2) +
// ((params.data["value"] / all) * 100).toFixed(2) +
"%" +
")" +
"</span>" +
"</div>"
);
},
},
},
{
//内圆
name: "男女比例",
type: "pie",
radius: ["20%", "50%"],
center: ["50%", "50%"], //调整图像的位置
hoverAnimation: false,
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
animationType: "expansion",
data: that.data.slice(2, 4).map((item) => {
return { value: item.value, name: item.name };
}),
tooltip: {
// show: true,
// trigger: "item",
backgroundColor: "rgba(0,0,0,0.9)",
formatter: function (params) {
let all = that.data.slice(2, 4).reduce((a, b) => {
return Number(a) + Number(b.value);
}, 0); //计算总数
return (
'<div style="font-size: 16px;font-weight: bold;font-family: SourceHanSansCN">' +
params.seriesName +
"<br/>" +
params.marker +
'<span style="color:' +
params.color +
';font-family: BoldCondensed">' +
params.data["name"] +
"\n" +
params.data["value"]
.toString()
.replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
"人 " +
"(" +
params.percent.toFixed(2) +
// ((params.data["value"] / all) * 100).toFixed(2) +
"%" +
")" +
"</span>" +
"</div>"
);
},
},
},
],
};
let myChart = this.$echarts.init(document.getElementById("chart"));
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
},
};
</script>
<style>
</style>
以上