vue-echarts-整合

npm install -D echarts vue-echarts --save

main.js 按需引入:

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/main.css'
import ECharts from 'vue-echarts'
import {use} from "echarts/core";

// 手动引入 ECharts 各模块来减小打包体积
import {
    CanvasRenderer
} from 'echarts/renderers'
import {
    BarChart, PieChart, LineChart
} from 'echarts/charts'
import {
    LegendComponent, TitleComponent,
    GridComponent,
    TooltipComponent, MarkPointComponent
} from 'echarts/components'

use([
    LegendComponent, TitleComponent,
    CanvasRenderer, BarChart, PieChart, LineChart,
    GridComponent, TooltipComponent, MarkPointComponent,
]);

createApp(App)
    .component('v-chart', ECharts)
    .use(router)
    .use(store)
    .mount('#app')

使用时，使用v-chart标签，传入option参数即可
值得注意的是，v-chart标签及其外层标签需要设置css才能正常显示，比如：

<template>
    <div class="table-line-chart-container">
        <v-chart class="table-line-chart" :option="chartOptions"/>
    </div>
</template>

<style scoped>
.table-line-chart-container {
    /* 外层需要使用绝对定位，本层使用相对定位 */
    position: relative;
    height: 20px;
    width: 80px;
}

.table-line-chart {
    height: 100%;
    width: 100%;
}
</style>