vue2 echarts 获取mock 数据

在Vue2中使用ECharts来获取mock数据，通常的做法是通过axios、fetch等HTTP客户端向后端API请求数据，然后将返回的数据传入ECharts实例进行图表的绘制。这里的mock数据可以是模拟的静态数据，也可以是通过前端模拟API返回的数据。下面是一个基本的步骤说明：

1. 安装axios库，如果使用npm或yarn进行项目管理，可以通过相应的命令安装。
2. 在Vue组件中引入axios库，并在组件的methods中定义数据获取的方法。
3. 在该方法中，使用axios向后端API发送请求（对于mock数据，这里可以配置请求到前端模拟的API）。
4. 使用Promise对象处理请求成功或失败的情况，并将数据传递给ECharts实例。
5. 在ECharts实例中使用这些数据配置相应的图表选项，完成图表的绘制。

下面是一个简化的代码示例：

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

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

export default {
  mounted() {
    this.fetchMockData();
  },
  methods: {
    fetchMockData() {
      axios.get('/api/mock-data') // 假设'/api/mock-data'是你后端的mock数据接口或前端模拟接口
        .then(response => {
          const chart = echarts.init(this.$refs.chartContainer);
          const option = {
            // ECharts图表的配置项
            title: {
              text: 'Mock Data Chart'
            },
            tooltip: {},
            xAxis: {
              data: response.data.xAxis // 假设返回数据中有一个x轴数据数组
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              data: response.data.series // 假设返回数据中有一个图表系列数据数组
            }]
          };
          chart.setOption(option);
        })
        .catch(error => {
          console.error('There was an error fetching the mock data:', error);
        });
    }
  }
};
</script>

在上述代码中，我们首先在Vue组件的`mounted`钩子函数中调用了`fetchMockData`方法，该方法使用axios发送GET请求到后端（或者前端模拟的数据接口），获取数据后使用ECharts进行图表的绘制。