Minimizing the final bundle footprint requires importing only specific ECharts modules rather than the entire library.

Install the dependency:

npm install echarts

Create a cantralized configuration at src/plugins/chart-core.js to register essential capabilities:

import * as echarts from 'echarts/core';
import { LineChart, PieChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export { echarts };

Attach the configured instance globally in main.js:

import { createApp } from 'vue';
import App from './App.vue';
import { echarts } from './plugins/chart-core';

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

Implement within a component using template refs for DOM access:

<template>
  <div class="dashboard-container">
    <div ref="trendGraph" class="chart-wrapper"></div>
  </div>
</template>

<script>
export default {
  name: 'TrendAnalysis',
  data() {
    return {
      visualization: null
    };
  },
  mounted() {
    this.initializeGraph();
  },
  beforeUnmount() {
    if (this.visualization) {
      this.visualization.dispose();
    }
  },
  methods: {
    initializeGraph() {
      this.visualization = this.$echarts.init(this.$refs.trendGraph);
      
      const option = {
        title: {
          text: 'Traffic Overview'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Visits',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230]
          }
        ]
      };
      
      this.visualization.setOption(option);
    }
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.chart-wrapper {
  width: 100%;
  height: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
</style>