vue3.0 使用echarts完成图表展示

3.0使用echarts
首先跟vue2.x版本没有太大区别使用npm 或者 yarn 安装echart
例：npm install echarts --save
成功后在main.js 进行挂载配置

vue2.0 如下：

import Echarts from "echarts";
Vue.prototype.$echarts = Echarts;

vue3.0 如下:

import { createApp } from 'vue';
import App from './App.vue';
import * as echarts from 'echarts';

const AppBase = createApp(App);
AppBase.config.globalProperties.echarts = echarts;
AppBase.mount('#app');

因为vue3.0底层改写了对象一些方法属性都变成了静态方法。所以对应的调用方式也放生了变化。详细请阅读vue3.0 底层源码 跟官方文档
https://vue3js.cn/docs/zh/api...

下面组件采用vue3.0 组合式api 方式实现

最后附上成功截图