vue-cli + vue3 + echarts5

前言

• 需求：实现柱状图、折线图、饼图、仪表盘
• 柱状图，参考
• 参考2
• 参考3

案例一

• vue-cli4.x + vue3 + echarts5
• 案例地址
• 构建vue项目参考
• 安装开发依赖

npm install less
npm install less-loader@5.0.0 

• 安装echarts

npm install echarts -S

• 项目入口main.js中挂载echarts，因为需要挂载echarts，所以main.js使用了如下写法

import Vue from "vue";
import App from './App.vue';
// 引入
import echarts from 'echarts'
// 全局方法挂载
Vue.prototype.echarts = echarts
new Vue({
  render: h => h(App)
}).$mount("#app");
 

• 结果报错：export ‘default’ (imported as ‘Vue’) was not found in ‘vue
• 错误原因：当前项目使用vue-cli4.x构建的vue3，重新构建vue2即可使用老版本的写法
• 参考

# vue老版本写法：
import Vue from "vue";
import App from './App.vue';
import router from "./router";
new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
---------------------------------
# vue新版本写法：
import {createApp} from 'vue';
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
 

• 解决方案，将main.js改为如下方式

import { createApp } from 'vue'
import App from './App.vue'
// 引入echarts
import * as echarts from 'echarts';
 
// createApp(App)默认是没有赋值，需要赋值出去
const app = createApp(App)
app.mount("#app")
// 进行挂载，类似Vue.prototype.xxx=xxx
app.config.globalProperties.$echarts = echarts
 

• 使用echarts时报错：“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
• 错误原因：引入echarts的方式不对，

# echarts4.x
import echarts from 'echarts';
# echarts5.x
import * as echarts from 'echarts';
 

案例二

• vue3+echarts5+vite2
• 案例地址
• 使用vite2构建vue3，my-vue-app是直接指定项目名

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

• 安装echarts

npm install echarts --save
 

• 方式1：直接在子组件中引入并使用

<script>
import * as echarts from 'echarts';
export default {
  	
}
</script>
 

• 方式2：项目入口main.js中挂载echarts

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
 
const app = createApp(App).mount('#app')
app.echarts=echarts