vue3.x + echarts 5.x + ant-design-vue 4.x + monaco-editor v3 新增版本切换功能

前言
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('/')">返回首页</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-select
                v-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>

效果图

至此，完全实现在线编辑 + 版本切换功能

在此记录此过程