前言
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 = srcreturn 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 方法 初始化echartsc. 此时echarts已初始化成功并全局生效 mychart.value = echarts.init(mainRef.value)赋值即可<template><div class="editor"><div class="header"><a-button type="primary" @click="$router.push('/')">返回首页</a-button></div><div class="content"><div class="left"><div class="operation"><a-space><a-button type="primary" @click="handleOperation">运行</a-button><a-button @click="handleSetValue">初始化</a-button><a-input-group compact><a-selectv-model:value="scriptVersion":options="versionOptions"></a-select><a-button type="primary" @click="handleChangeVersion">切换</a-button></a-input-group></a-space></div><VMonacoEditor ref="monacoRef" /></div><div class="right"><div ref="mainRef" style="width: 100%; height: 100%"></div></div></div></div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import loadScript from '@/utils/loadScript'
const { proxy } = getCurrentInstance()
const mainRef = ref(null)
import VMonacoEditor from '@/components/VMonacoEditor'
const monacoRef = ref(null)
const mychart = ref(null)
const versionOptions = [{ label: '3.8.5', value: '3.8.5' },{ label: '4.1.0', value: '4.1.0' },{ label: '5.0.0', value: '5.0.0' }
]
const scriptVersion = ref(versionOptions[0].value)async function handleOperation() {try {const value = monacoRef.value.getEditorValue()if (value) {const funCode = new Function(`option=null;${value};return option;`)const _option = funCode()mychart.value.setOption(_option)}} catch (error) {proxy.$message.error('Invalid code')}
}function handleSetValue() {const val = `option = {title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}`monacoRef.value.setEditorValue(val)
}async function handleChangeVersion() {try {await loadScript(`https://cdn.staticfile.org/echarts/${scriptVersion.value}/echarts.min.js`)mychart.value = echarts.init(mainRef.value)handleOperation()} catch (error) {proxy.$message.error('加载失败')}
}handleChangeVersion()
</script><style scoped lang="scss">
.editor {height: 100vh;display: flex;flex-direction: column;overflow: hidden;.header {padding: 10px;text-align: right;cursor: pointer;border-bottom: 1px solid #eee;}.content {display: flex;padding: 10px;flex: 1;.left {flex: 1;.operation {padding-bottom: 10px;padding-right: 20px;text-align: right;}}.right {flex: 1;}}
}
</style>效果图
至此，完全实现在线编辑 + 版本切换功能在此记录此过程
