vue.js实现echarts

Vue.js 集成 ECharts 的方法

在 Vue.js 项目中集成 ECharts 可以通过以下步骤完成。ECharts 是一个强大的图表库，适用于数据可视化需求。

安装 ECharts

通过 npm 或 yarn 安装 ECharts 依赖：

npm install echarts --save
# 或
yarn add echarts

基础集成方式

在 Vue 组件中直接引入 ECharts 并初始化图表：

<template>
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chartContainer);
      chart.setOption({
        title: { text: '示例图表' },
        tooltip: {},
        xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: {},
        series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 15] }]
      });
    }
  }
};
</script>

使用 Vue-ECharts 封装组件

对于更复杂的场景，可以使用 vue-echarts 封装好的组件：

1. 安装 vue-echarts：

   npm install echarts vue-echarts
   # 或
   yarn add echarts vue-echarts

2. 全局或局部注册组件：

   
   import { createApp } from 'vue';
   import ECharts from 'vue-echarts';
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
   import { BarChart } from 'echarts/charts';
   import { GridComponent, TooltipComponent } from 'echarts/components';

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

const app = createApp(App); app.component('v-chart', ECharts);

3. 在模板中使用：
```vue
<template>
  <v-chart :option="chartOption" style="width: 600px; height: 400px;" />
</template>

<script>
export default {
  data() {
    return {
      chartOption: {
        xAxis: { data: ['A', 'B', 'C'] },
        yAxis: {},
        series: [{ type: 'bar', data: [10, 20, 30] }]
      }
    };
  }
};
</script>

响应式调整

监听窗口变化或数据更新时，调用 resize() 方法：

methods: {
  handleResize() {
    this.chartInstance?.resize();
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

按需引入模块

为减小打包体积，推荐按需引入 ECharts 模块：

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, GridComponent, CanvasRenderer]);

注意事项

• 确保 DOM 容器在 mounted 生命周期后可用。
• 组件销毁时调用 dispose() 清理图表实例：

  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  }

• 对于动态数据，使用 watch 监听数据变化并更新图表：

  watch: {
    data(newVal) {
      this.chartInstance?.setOption({ series: [{ data: newVal }] });
    }
  }