前言
1. 因为vue架构中,大多数包都是通过npm / yarn 等工具直接安转到node_modules 使用
2. 多个版本切换时,不可能全部安装echarts版本
3. 所以思路围绕如何通过cdn动态引入echarts
一、添加工具代码 loadScript 路径 utils/loadScript.js
export default function loadScript(src) {
const script = document.createElement('script')
script.src = src
return new Promise((resolve, reject) => {
script.onload = (res) => {
resolve(res)
}
script.onerror = (error) => {
reject(error)
}
document.head.appendChild(script)
})
}
二、改造编辑器vue文件
a. 将之前的 import * as echarts from 'echarts' 干掉 (通过yarn安装的)
b. 设置初始版本 执行 handleChangeVersion 方法 初始化echarts
c. 此时echarts已初始化成功并全局生效 mychart.value = echarts.init(mainRef.value)赋值即可
<template>
<div class="editor">
<div class="header">
<a-button type="primary" @click="$router.push('/')"