npm i elementResizeDetectorMaker
引入import elementResizeDetectorMaker from "element-resize-detector"
<template>
<div :class="className" ref="pie" :style="{ height: height, width: width }" />
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../../dashboard/mixins/resize";
import { debounce } from '../../../../utils/index' 防抖
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function (...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}
export default {
name: "PieChart",
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
chartData: {
type: Array,
default: () => { },
},
},
watch: {
chartData: {
handler(new_value, old_value) {
this.initChart();
},
deep: true,
},
},
data() {
return {
chart: null,
secColor: " ",
pieColor: ["#FDD56A", "#FDB36A", "pink", "#73ACFF", "#FD866A"],
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
let erd = elementResizeDetectorMaker();
let that = this;
erd.listenTo(document.getElementById("SystemBar"), debounce(this.resizeFunc)) },
updated() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
resizeFunc(element) {
let that = this
that.$nextTick(function () {
//使echarts尺寸重置
that.chart.resize();
})
} initChart() {
this.chart = echarts.init(this.$el);
this.chart.showLoading({
text: "数据正在努力加载...",
color: "#0696e1", //加载动画颜色
maskColor: "rgba(255, 255, 255, 0.8)", //遮罩层
});
const colors = ["#FDD56A", "#FDB36A", "pink", "#73ACFF", "#FD866A"];
var option;
if (this.chartData.length == 0) {
option = {
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
fontSize: 11,
fontWeight: '500',
color: "#606266"
}
}
}
} else {
option = {
title: {
text: '',
},
color: this.pieColor,
legend: {
show: true, // 展示图例
x: "left", // 水平居右
y: "center", // 垂直居中
icon: "rect", // 图例icon为方块
backgroundColor: "transparent",
itemHeight: 6, // 图例icon高度
itemWidth: 6, // 图例icon宽度
orient: "vertical", // 垂直排列
textStyle: {
fontSize: 10,
rich: {
a: {
verticalAlign: 'middle',
},
},
},
type: "scroll", // 可滚动翻页的图例
pageIconSize: 8, //翻页按钮大小
pageIconColor: "#2C86FF", //翻页箭头颜色
pageIconInactiveColor: "rgba(44,132,251,0.40)", //翻页（即翻页到头时箭头的颜色
pageTextStyle: {
color: "#999", //翻页数字颜色
},
align: "left", // 图例icon在左侧,
formatter: function (value) {
if (value.indexOf('(') != -1) {
let a = value.indexOf('(')
let b = value.slice(0, a)
var strs = b.split('')
var str = ''
for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
str += s;
}
return str
} else {
return value
}
},
},
series: [
{
type: "pie",
center: ["65%", "55%"],
radius: ["0", "85%"],
data: this.chartData,
hoverAnimation: false,
itemStyle: { borderColor: '#fff', borderWidth: 2 },
color: [
'#80d6f9',
'#FD866A',
],
// 让数据不显示
label: {
show: false,
position: 'center'
},
//数据对应的线不显示
labelLine: {
show: false
},
},
],
// 鼠标悬停显示内容
tooltip: {
trigger: 'item',
},
}
}
setTimeout(() => {
this.chart.setOption(option);
this.chart.hideLoading();
}, 1000);
// 随外层div的大小变化自适应
const _this = this
let erd = elementResizeDetectorMaker();
erd.listenTo(this.$refs.pie, () => {
_this.$nextTick(() => {
_this.chart.resize();
})
})
},
},
};
