vue2引入echarts

### 在 Vue 2 中引入和配置 ECharts

#### 安装依赖

为了在 Vue 2 项目中使用 ECharts，首先需要安装 `echarts` 和 `vue-echarts` 插件。这可以通过 npm 或 yarn 来完成。

npm install echarts vue-echarts --save

或者

yarn add echarts vue-echarts

此操作会将必要的库添加到项目的依赖项列表中[^2]。

#### 创建组件并初始化图表

创建一个新的 Vue 组件用于承载 ECharts 图表实例。下面是一个简单的例子来说明如何设置：

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "ChartComponent",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('main');
      const myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      option && myChart.setOption(option);
    }
  }
}
</script>

这段代码展示了如何在一个新的 Vue 组件内加载 ECharts 并绘制一个基础条形图。注意这里设置了宽高样式以确保容器有足够的空间显示图表。

#### 注册全局组件 (可选)

如果希望在整个应用程序范围内都可以轻松访问 ECharts，则可以选择将其注册为全局组件而不是每次都单独导入。可以在 main.js 文件里做如下修改:

import { createApp } from 'vue';
import App from './App.vue';
// 导入 ECharts 主模块
import * as echarts from 'echarts/core';

const app = createApp(App);

app.config.globalProperties.$echarts = echarts;
app.mount('#app');

这样，在任何地方都能通过 `this.$echarts` 访问到 ECharts 对象了。