1.echartAll
<template>
<div
class="echart"
:id="classname"
:class="classname"
@click="echartclick"
></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-wordcloud";
import EleResize from "./js/esresize";
export default {
props: {
option: {
type: Object,
},
},
data() {
return {
defineOption: {
legend: [
{
icon: "circle",
textStyle: {
color: "#fff",
},
},
],
tooltip: {
show: true,
backgroundColor: "rgba(0,0,0,.51)",
borderWidth: 0,
padding: 20,
},
xAxis: [
{
type: "category",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#F0F0F0",
},
splitLine: {
lineStyle: {
color: "rgba(238,238,238, .1)",
},
},
boundaryGap: true,
},
],
yAxis: [
{
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#F0F0F0",
},
nameTextStyle: {
color: "#F0F0F0",
},
splitLine: {
lineStyle: {
color: "rgba(238,238,238, .1)",
},
},
splitNumber: 3,
},
{
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#F0F0F0",
},
splitLine: {
show: false,
},
nameTextStyle: {
color: "#F0F0F0",
},
splitNumber: 3,
},
],
grid: [
{
top: 0,
left: 0,
right: 0,
bottom: 0,
containLabel: true,
},
],
},
classname: `echart${this.randomNum(1, 99999999999)}`,
chart: null,
optionResetList: [
"title",
"legend",
"grid",
"xAxis",
"yAxis",
"dataZoom",
"visualMap",
"series",
],
};
},
watch: {
option: {
deep: true,
handler(val) {
this.setOption(val);
},
},
},
methods: {
//初始化函数，用于第一次进入组件时的初始化操作
initialize() {
this.chart = echarts.init(
document.getElementsByClassName(this.classname)[0]
);
let resizeDiv = document.getElementById(this.classname);
EleResize.on(resizeDiv, () => {
this.chart.resize();
});
this.setOption(this.option);
},
//渲染函数
setOption(data) {
let target = this.Deepcloned(this.defineOption, data);
if(!this.chart){
this.chart = echarts.init(
document.getElementsByClassName(this.classname)[0]
);
}
this.chart.clear();
setTimeout(()=>{
this.chart.setOption(target);
},100)
},
// 该函数用于执行合并操作
Deepcloned(prevdata, nextdata) {
return this.dealwith(
this.dealwith({}, this.loned(prevdata)),
this.pretreatment(nextdata)
);
},
//合并函数，用于合并默认配置对象与外部配置对象
dealwith(Olddata, Newdata) {
let onetype = this.type(Olddata), onetypes = this.type(Newdata)
//获取两个数据的类型
//如果相等且为对象或数组，进行递归，否则不是同一类型，完全以外部为准，赋值一个深拷贝的外部对象
//考虑到如果外部没有改变默认配置的时候，需要以外部对象为准进行for in循环
//如果不是对象或者数组，则可以直接进行赋值
if (onetype === onetypes) {
if (onetype === 'array'||onetype === 'object') {
for (let key in Newdata) {
Olddata[key] = this.dealwith(Olddata[key], Newdata[key])
}
}else{
Olddata = Newdata
}
}else{
Olddata = this.loned(Newdata)
}
return Olddata;
},
// 配置对象初始化函数，为保持数据格式统一
pretreatment(option) {
let obj = this.loned(option);
for (let key in option) {
if (this.optionReset(key)) {
if (Array.isArray(option[key])) {
} else {
obj[key] = [obj[key]];
}
}
}
return obj;
},
// 重置配置对象判断函数
optionReset(type) {
return this.optionResetList.some((es) => es === type);
},
//对象类型判断函数，自定义类型判断
type(type) {
if (
typeof type == "string" ||
typeof type == "number" ||
typeof type == "boolean" ||
typeof type == "undefined" ||
typeof type == "function"
) {
return 'notobject'
} else if (typeof type == "object") {
if (Array.isArray(type)) {
return 'array'
} else {
return 'object'
}
}
},
//深克隆函数
loned(obj) {
if (
typeof obj == "string" ||
typeof obj == "number" ||
typeof obj == "boolean" ||
typeof obj == "undefined" ||
typeof obj == "function"
) {
return obj;
}
let arr = "";
if (Array.isArray(obj)) {
arr = [];
arr = obj.map((item) => {
return this.loned(item);
});
} else if (typeof obj == "object") {
arr = {};
for (let key in obj) {
arr[key] = this.loned(obj[key]);
}
}
return arr;
},
//随机数生成函数，用于创建随机类名
randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
default:
return 0;
}
},
//点击事件，用于抛出点击事件
echartclick(e) {
this.$emit("onClick", e);
},
},
mounted() {
this.initialize();
},
};
</script>
<style>
.echart {
width: 100%;
height: 100%;
}
</style>
2.EleResize
var EleResize = {
_handleResize: function (e) {
var ele = e.target || e.srcElement
var trigger = ele.__resizeTrigger__
if (trigger) {
var handlers = trigger.__z_resizeListeners
if (handlers) {
var size = handlers.length
for (var i = 0; i < size; i++) {
var h = handlers[i]
var handler = h.handler
var context = h.context
handler.apply(context, [e])
}
}
}
},
_removeHandler: function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (handlers) {
var size = handlers.length
for (var i = 0; i < size; i++) {
var h = handlers[i]
if (h.handler === handler && h.context === context) {
handlers.splice(i, 1)
return
}
}
}
},
_createResizeTrigger: function (ele) {
var obj = document.createElement('object')
obj.setAttribute('style',
'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
obj.onload = EleResize._handleObjectLoad
obj.type = 'text/html'
ele.appendChild(obj)
obj.data = 'about:blank'
return obj
},
_handleObjectLoad: function (evt) {
this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
}
}
if (document.attachEvent) { // ie9-10
EleResize.on = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (!handlers) {
handlers = []
ele.__z_resizeListeners = handlers
ele.__resizeTrigger__ = ele
ele.attachEvent('onresize', EleResize._handleResize)
}
handlers.push({
handler: handler,
context: context
})
}
EleResize.off = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (handlers) {
EleResize._removeHandler(ele, handler, context)
if (handlers.length === 0) {
ele.detachEvent('onresize', EleResize._handleResize)
delete ele.__z_resizeListeners
}
}
}
} else {
EleResize.on = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (!handlers) {
handlers = []
ele.__z_resizeListeners = handlers
if (getComputedStyle(ele, null).position === 'static') {
ele.style.position = 'relative'
}
var obj = EleResize._createResizeTrigger(ele)
ele.__resizeTrigger__ = obj
obj.__resizeElement__ = ele
}
handlers.push({
handler: handler,
context: context
})
}
EleResize.off = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (handlers) {
EleResize._removeHandler(ele, handler, context)
if (handlers.length === 0) {
var trigger = ele.__resizeTrigger__
if (trigger) {
trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
ele.removeChild(trigger)
delete ele.__resizeTrigger__
}
delete ele.__z_resizeListeners
}
}
}
}
export default EleResize
