vue2项目使用echarts

在Vue2项目中集成ECharts，首先需要安装ECharts相关的库。你可以通过npm（Node Package Manager）命令行工具来安装：

npm install echarts @vue/echarts-vue

然后，在你的Vue组件中引入并使用ECharts。例如，创建一个新的.vue文件，添加以下代码：

<template>
  <div id="chart-container" ref="chart"></div>
</template>

<script>
import { ECharts } from '@vue/echarts-vue';

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      chartOptions: {
        // 这里设置图表的基本配置，如标题、数据等
        title: {
          text: 'ECharts 示例',
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          }
        ],
      },
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chart = this.$refs.chart;
      if (chart) {
        new ECharts(chart).setOption(this.chartOptions);
      }
    },
  },
};
</script>

在`mounted()`钩子函数中，我们初始化ECharts实例，并将配置项绑定到实际的图表元素上。