效果图：
实现：
<template>
<div class="chart_wrap">
<div class="MainPopulation_chart" ref="MainPopulation_chart"></div>
</div>
</template>
<script>
import Bus from "@/utils/bus";
import * as echarts from "echarts";
export default {
name: "MainPopulation",
props: {
currentTimeArray: {
type: Object,
default: () => {
return {};
},
},
activeName: {
type: String,
default: "",
},
data: {
type: Object,
default: () => {
return {
data_X: ["第一", "第二", "第三", "第四", "第五", "第六"],
data_Y: [10, 20, 30, 5, 40, 60],
};
},
},
},
data() {
return {
myChart: null,
rate: 30, //优良率
};
},
mounted() {
this.init();
},
methods: {
init() {
this.myChart = this.$echarts.init(this.$refs.MainPopulation_chart);
this.myChart.clear();
this.crawPie(this.myChart, this.data.data_X, this.data.data_Y);
var that = this;
window.addEventListener("resize", function () {
that.myChart.resize();
});
that.myChart.on("click", "series.pie", function (params) {
Bus.$emit("ThreeSeriesName", params.name);
});
},
crawPie(myChart, data_X, data_Y) {
let barTopColor = [
"#E8C50B",
"#0CD7E2",
"#1EAAFE",
"white",
"black",
"#C23531",
];
let barBottomColor = [
"rgba(232, 197, 11,0.1)",
"rgba(12, 215, 226, 0.1)",
"rgba(30, 170, 254, 0.1)",
"rgba(255,255,255,0.1)",
"rgba(0,0,0,0.1)",
"rgba(194,53,49, 0.1)",
];
myChart.setOption({
grid: {
top: "15%",
bottom: "20%",
left: "3%",
right: "3%",
},
xAxis: {
data: data_X,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
interval: 0,
// rotate: -30,
margin: 25,
align: "center",
textStyle: {
fontSize: 12,
color: "#ffffff",
},
},
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [26, 10], // [36, 10],
symbolOffset: [0, -5], // [0, -5]
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[params.dataIndex];
},
},
},
label: {
show: true,
position: "top",
fontSize: 20,
fontFamily: "tenxu",
formatter: "{c}",
},
symbolPosition: "end",
data: data_Y,
},
{
name: "柱底部",
type: "pictorialBar",
symbolSize: [26, 10], // [36, 10]
symbolOffset: [0, 5], // [0, 5]
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[params.dataIndex];
},
},
},
data: data_Y,
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [46, 16], // [56, 16]
symbolOffset: [0, 11], // [0, 11]
z: 11,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[params.dataIndex];
},
opacity: 0.2,
},
},
data: data_Y,
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [64, 22], // [74, 22]
symbolOffset: [0, 17], // [0, 17]
z: 10,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[params.dataIndex];
},
opacity: 0.1,
},
},
data: data_Y,
},
{
type: "bar",
itemStyle: {
normal: {
// 中间柱子渐变色
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: barTopColor[params.dataIndex],
},
{
offset: 0,
color: barBottomColor[params.dataIndex],
},
]);
},
opacity: 0.8,
},
},
z: 16,
silent: true,
barWidth: 26,
barGap: "-100%", // Make series be overlap
data: data_Y,
},
],
});
},
},
computed: {
chartShow() {
return this.$store.state.chartShow;
},
},
watch: {
chartShow: function () {
var that = this;
setTimeout(function () {
that.myChart.resize();
that.init();
}, 400);
},
activeName: function () {
var that = this;
that.myChart.resize();
},
data: {
deep: true,
immediate: true,
handler(val) {
this.init();
},
},
},
};
</script>
<style scoped lang="scss">
.chart_wrap {
position: relative;
width: 100%;
max-width: 615px;
height: 246px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 15px;
margin-top: 15px;
}
.MainPopulation_chart {
width: 100%;
max-width: 615px;
height: 246px;
position: absolute;
left: 0px;
top: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>