本文主要总结Vue3.0 中全局引用echarts及封装的公共方法。封装的公共方法参考这里（感恩.gif）
npm install echarts --save
// 引入 echarts
import * as echarts from "echarts";
const app = createApp(App);
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts;
<template>
<div
ref="lineChart"
id="lineChart"
:style="{ width: '800px', height: '400px' }"
></div>
</template>
<script>
import { getCurrentInstance, onMounted } from "vue";
export default {
setup() {
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;
onMounted(() => {
const dom = document.getElementById("lineChart");
const myChart = echarts.init(dom); // 初始化echarts实例
const option = {···}; // 图表配置参数
myChart.setOption(option);
// 设置实例参数
window.onresize = () => {
myChart.resize();
};
});
return {};
},
};
</script>
使用Echarts做数据大屏的时候，需要初始化多个图表，每个图表的都要进行初始化对应的DOM元素绑定var myChart = echarts.init(document.getElementById(‘eleDom’))；封装一个公共方法比较方便。
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入各种图表，图表后缀都为 Chart
import { BarChart, PieChart, LineChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
// GeoCoComponent
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// DIV 宽高变化监听
import { EleResize } from "@/utility/eleResize";
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
BarChart,
PieChart,
LineChart,
CanvasRenderer,
]);
/** 封装 echart初始化方法，需要传入 绘制图表的dom元素和绘制图表缩需要的相关配置项 *
* 同时还添加了图表自动适应dom的宽高变化的功能，需要引入EleResize.js
*/
function drawChart(dom, option) {
const $Chart = echarts.init(document.getElementById(dom));
const resizeDiv = document.getElementById(dom);
$Chart.setOption(option);
const listener = function () {
console.log("divRsize");
$Chart.resize();
};
EleResize.on(resizeDiv, listener);
return $Chart;
}
export { drawChart };
// 引入封装好的初始化方法
import { drawChart } from "@/utility/initEcharts";
// 在vue的原型上绑上 刚刚封装的方法，将来可以在组件中通过this.$drawChart()来进行调用
const app = createApp(App);
app.config.globalProperties.$drawChart = drawChart;
只需要配置option即可
<template>
<div
ref="lineChart"
id="lineChart"
:style="{ width: '800px', height: '400px' }"
></div>
</template>
<script>
const domEle = "lineChart";
// 图表配置项
const option = {···};
export default {
mounted() {
this.darwChart();
},
data() {
return {
lineChart: null,
};
},
methods: {
darwChart() {
this.lineChart = this.$drawChart(domEle, option);
},
},
};
</script>
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 { EleResize }