vue2 使用vue echarts

在Vue 2中使用Vue ECharts，你可以按照以下步骤进行操作：

1. 首先，安装Vue ECharts库。在命令行中运行以下命令：

npm install vue-echarts echarts --save

2. 在Vue组件中导入Vue ECharts并注册为全局组件。在你的Vue组件中，添加以下代码：

import VueECharts from 'vue-echarts';
import 'echarts/lib/chart/bar'; // 导入需要使用的图表类型，例如柱状图

export default {
  // ...
  components: {
    VueECharts,
  },
  // ...
};

3. 在你的Vue组件模板中使用Vue ECharts。你可以使用`<vue-echarts>`标签来包裹ECharts图表。例如，以下是一个简单的柱状图示例：

<template>
  <div>
    <vue-echarts :options="chartOptions" :theme="theme" :loading="loading"></vue-echarts>
  </div>
</template>

<script>
export default {
  // ...
  data() {
    return {
      chartOptions: {
        // 这里是ECharts的配置选项，根据需要进行配置
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E', 'F'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: [10, 20, 30, 40, 50, 60],
          type: 'bar',
        }],
      },
      theme: 'light', // 可选的主题
      loading: false, // 是否显示加载中状态
    };
  },
  // ...
};
</script>

这样，你就可以在Vue 2中使用Vue ECharts来绘制图表了。你可以根据需要配置ECharts的选项，并根据自己的数据填充图表。记得根据你的需求导入对应的图表类型。