前言
最近有一个小需求，需要快速实现图表的可视化。看了一圈的技术方案，最终选定了网页端的Echarts配合ES6来实现。因为是个小功能，所以没有考虑创建专门的web工程来做。
拉取数据的时候，感觉到原生的ES6处理输入和界面很不方便，就想到的使用Vue3做增强，说干就干。
1. 准备环境
这里我使用的是js module的开发方式
第一步是从CDN网站下载vue的es库，放到本地，加快开发速度，方便。
//字节跳动CDN https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.esm-browser.js
//cdnjs https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.esm-browser.js
//https://unpkg.com/vue@3/dist/vue.esm-browser.jsimport { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
同时下载Echarts的js文件库，
2. 开始编程
接下来其实就是常规操作了。
按照官方的示例，分别初始化Echarts的canvas和Vue的appdom。
这里需要注意，如果同时使用Echarts和Vue，把他们的Dom放在不同的div下，防止初始化时的互相干扰。(工程经验，具体原理没研究)
<body><div><canvas id="main" width="500px" height="500px" /></div><div><div id="app"></div></div>
</body>
vue的使用如下。
这里我使用的是组合式的方式。和原生ES6的fetch之间做数据交换，我使用的是ref()。
创建Module中的全局ref变量。在创建vue实例时，setup()把对应的ref变量返回出去。
同时，使用watch监听ref变化。
这样，vue和原生的ES6就可以互相传递数据，互相调用了。
<script type="module">import { createApp, ref, watch } from "./lib/vue.esm-browser.js";// vue和原生ES6之间传递消息的桥梁const teamid = ref("Raw js Vue Test")const title = ref("None Team")// 方式一: watch监听，让vue驱动原生ES6函数watch(teamid, (newVal) => {title.value = `Team id: ${newVal}`console.log("team: ", newVal);RawFunction()})const app = createApp({setup() {return { title }},methods: {// 方式二: 内部方法直接调用原生ES6函数，让vue驱动原生ES6动作DoAction() {console.log("DoAction");RawFunction()}}})app.mount('#app')function RawFunction(params) {console.log("RawFunction");// Echats的数据获取，更新等异步操作// 可以放到原生的ES6中去处理}// 方式一: 原生ES6向vue内部传值let url = "data/result.json"fetch(url).then(res => res.json()).then(data => {console.log(data);teamid.value = data.team_id})
</script>
3. 总结
这种组合方式属于是快速开发，快速验证。
这种开发的缺点也很明显，加载速度会慢，需要在浏览器端做渲染，只适合开发阶段前期验证，或者快速实现某些GUI的需求时，可以采用这样的方式。