Vue项目中引入Echarts

在Vue项目中引入ECharts，你可以使用以下步骤：

1. 安装ECharts：

npm install echarts --save

2. 在Vue组件中引入ECharts：

// 引入基本模板
import echarts from 'echarts/lib/echarts'
// 引入需要的echarts组件，这里以柱状图为例
import 'echarts/lib/chart/bar'
// 引入提示框和title组件，图例
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
 
export default {
  name: 'YourComponent',
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.chart.setOption({
        // ECharts 配置项
      });
    }
  },
  mounted() {
    this.initChart();
  }
}

3. 在组件的模板中添加图表容器：

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

确保在Vue组件的mounted钩子中初始化ECharts实例，并在beforeDestroy钩子中清理（destroy）该实例以避免内存泄漏。