echarts5和4有一些区别
在这里插入图片描述打开之后查看:

引用 ECharts
去除 default exports 的支持
如果使用者在 v4 中这样引用了 echarts:

import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';
这两种方式,v5 中不再支持了。

使用者需要如下更改代码解决这个问题:

import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';

然后在查看vue3.x,因为3.x和2.x也是有区别的
在这里插入图片描述
然后大概就了解要怎么引入了:

import { createApp } from "vue";
import App from "./App.vue"; //引入app组件
import store from "./store"; //引入状态管理
import * as echarts from 'echarts'; //引入echarts(5.0以上版本去除了exprot default)
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入公共的css样式
import "./assets/common.css";
// 引入字体样式
import './assets/fonts/font.css';

/**
 * 在vue2.x中,一般直接new vue()实例化即可
 * 在vue3.x中,通过createApp来返回一个实例,而且可以链式操作
 */
const app = createApp(App);
app.config.globalProperties.$echarts = echarts  //绑定实例



app.use(store).use(ElementUI).mount("#app");

Logo

前往低代码交流专区

更多推荐