vue2 创建mock数据后，echarts调用mock数据

在Vue2项目中创建mock数据并使用ECharts图表库进行调用，通常需要通过以下步骤来实现：

1. 创建mock数据：可以在项目中创建一个专门用于存放模拟数据的模块或文件。这里可以使用JavaScript的数组或对象来模拟真实的数据结构。例如，创建一个名为`mockData.js`的文件，并定义一些模拟的数据。

// mockData.js
export default [
    {name: '分类A', value: 1048, label: {show: true}},
    {name: '分类B', value: 735, label: {show: true}},
    {name: '分类C', value: 580, label: {show: true}},
    // ...其他分类数据
];

2. 在Vue组件中引入mock数据：在需要使用这些数据的组件中，使用`import`语句将mock数据导入。

// YourComponent.vue
import mockData from './mockData';

3. 初始化ECharts实例并使用mock数据：在Vue组件的`mounted`生命周期钩子中，初始化ECharts实例，并将mock数据设置为ECharts图表的数据源。

// YourComponent.vue
export default {
    // ...
    mounted() {
        // 初始化ECharts实例
        var myChart = echarts.init(this.$refs.chart); // 假设已经有一个ref为'chart'的dom元素

        // 使用mock数据设置ECharts图表的option
        var option = {
            series: [{
                type: 'pie', // 使用饼图
                radius: '55%', // 饼图半径
                data: mockData, // 使用mock数据
                label: {
                    position: 'inside',
                    formatter: '{b}: {d}%', // 显示标签
                }
            }]
        };

        // 配置图表，并应用option
        myChart.setOption(option);
    },
    // ...
};

4. 在模板中添加ECharts容器：在Vue组件的模板部分添加一个容器，用于放置ECharts图表，并使用`ref`属性以便在JavaScript中引用。

<!-- YourComponent.vue -->
<template>
    <div>
        <div ref="chart" style="width: 600px;height:400px;"></div>
    </div>
</template>

通过以上步骤，即可在Vue2项目中创建mock数据，并在ECharts图表中使用这些数据。