vue 3.0 使用Echarts图表（vite, vue-echarts, TypeScript）

描述 Echarts官网

Echarts 使用和配置，

在 vue 项目中使用 vue-echarts 这个库, 必需下载 echarts 这个库

下载

npm install echarts vue-echarts

指定版本下载

npm install [email protected] [email protected]

配置

main.ts

关键代码

import 'echarts';
import ECharts from 'vue-echarts';

const app = createApp(App);
app.component('VueEcharts', ECharts).mount('#app');

完整配置

import Vue, { createApp } from 'vue';
import router from './router';
import { createPinia } from 'pinia';
import axios from 'axios';
import i18n from './lang';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import 'echarts';
import ECharts from 'vue-echarts';

const app = createApp(App);

app
  .use(createPinia())
  .component('VueEcharts', ECharts)
  .use(router)
  .use(Antd)
  .use(i18n)
  .mount('#app');

app.config.globalProperties.$http = axios;

组件使用

Father.vue(父组件)

dEcharts.vue(子组件)