展示效果截图
解决方案：把多个图表放到一个方法中去绘制，然后使用window.onresize就ok
代码部分（其中有注释）
<template>
<div class="tab">
<div class="tab_box" id="bar_one"></div>
<div class="tab_box" id="bar_two"></div>
</div>
</template>
<script>
export default {
name: "Tab",
data() {
return {};
},
mounted() {
this.drawBar();
},
methods: {
drawBar: function() {
let myChartFirst = this.$echarts.init(document.getElementById("bar_one"));
let myChartSecond = this.$echarts.init(
document.getElementById("bar_two")
);
// 绘制图表
//First Start
let optionFrist = {
backgroundColor: "#f4f2e3",
title: {
text: "Super",
textStyle: {
color: "#fff",
fontSize: 60,
fontWeight: "bold"
},
left: "center",
bottom: "49%",
itemGap: 60
},
tooltip: {
show: false
},
legend: {},
series: [
{
name: "内圈",
type: "pie",
hoverAnimation: false,
tooltip: {},
radius: [0, "38%"],
color: ["#55a2f2", "#0065ba", "#35a2ff", "#12cbf6"],
label: {
normal: {
show: false,
position: "center",
color: "#fff",
formatter: function(params) {
return params.value;
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 0,
itemStyle: {
normal: {
color: "rgba(20,198,249,1)"
}
}
}
]
},
{
name: "数据",
type: "pie",
startAngle: 315,
radius: ["50%", "60%"],
legendHoverLink: false,
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "30",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 25,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)"
}
}
},
{
value: 25,
itemStyle: {
normal: {
color: "rgba(20,198,249,1)"
}
}
},
{
value: 50,
itemStyle: {
normal: {
color: "rgba(4,40,50,1)"
}
}
}
]
},
{
name: "外圈",
type: "pie",
startAngle: 315,
hoverAnimation: false,
radius: ["68%", "69%"],
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "10",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 25,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)"
}
}
},
{
value: 75,
itemStyle: {
normal: {
color: "rgba(20,198,249,1)"
}
}
}
]
}
]
};
//Second Start
let dataStyle = {
normal: {
label: { show: false },
labelLine: { show: false },
shadowBlur: 40,
shadowColor: "rgba(40, 40, 40, 0.5)"
}
};
let placeHolderStyle = {
normal: {
color: "rgba(0,0,0,0)",
label: { show: false },
labelLine: { show: false }
},
emphasis: {
color: "rgba(0,0,0,0)"
}
};
let optionSecond = {
backgroundColor: "#f4f2e3",
color: ["#85b6b2", "#6d4f8d", "#cd5e7e", "#e38980", "#f7db88"],
tooltip: {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
itemGap: 12,
top: "93%",
data: ["01", "02", "03", "04", "05", "06"]
},
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: "Line 1",
type: "pie",
clockWise: false,
radius: [180, 200],
itemStyle: dataStyle,
hoverAnimation: false,
data: [
{
value: 300,
name: "01"
},
{
value: 50,
name: "invisible",
itemStyle: placeHolderStyle
}
]
},
{
name: "Line 2",
type: "pie",
clockWise: false,
radius: [160, 180],
itemStyle: dataStyle,
hoverAnimation: false,
data: [
{
value: 150,
name: "02"
},
{
value: 60,
name: "invisible",
itemStyle: placeHolderStyle
}
]
},
{
name: "Line 3",
type: "pie",
clockWise: false,
hoverAnimation: false,
radius: [140, 160],
itemStyle: dataStyle,
data: [
{
value: 80,
name: "03"
},
{
value: 50,
name: "invisible",
itemStyle: placeHolderStyle
}
]
},
{
name: "Line 4",
type: "pie",
clockWise: false,
hoverAnimation: false,
radius: [120, 140],
itemStyle: dataStyle,
data: [
{
value: 45,
name: "04"
},
{
value: 30,
name: "invisible",
itemStyle: placeHolderStyle
}
]
},
{
name: "Line 5",
type: "pie",
clockWise: false,
hoverAnimation: false,
radius: [100, 120],
itemStyle: dataStyle,
data: [
{
value: 30,
name: "05"
},
{
value: 30,
name: "invisible",
itemStyle: placeHolderStyle
}
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChartFirst.setOption(optionFrist);
myChartSecond.setOption(optionSecond);
setTimeout(() => {
/*窗口自适应，关键代码*/
window.onresize = function() {
myChartFirst.resize();
myChartSecond.resize();
};
}, 200);
}
}
};
</script>
<style scoped>
.tab {
width: 100%;
height: 6rem;
font-size: 22px;
display: flex;
}
.tab_box {
width: 100%;
height: 5rem;
border: 1px dashed rgb(29, 33, 34);
}
.tab_box:nth-of-type(1) {
border-right: none;
}
</style>
顺便找了两个比较好看的图标抄了上去
这里卿洋
愿喜❤️
网友评论