Apache ECharts
ECharts

ECharts 请求数据

# ECharts 请求数据

通过 Axios 请求数据并动态更新图表是一种常见的做法，但不同类型的图表可能需要请求不同的数据格式，因此，针对不同图表类型，数据请求和处理的方式会有所不同。

# 1. 通用数据请求设置

首先，为了避免重复代码，可以配置一个通用的 Axios 实例，用于发送 HTTP 请求。

// axiosInstance.js - 配置 Axios 实例
import axios from 'axios';

// 创建一个 Axios 实例，并设置基础 URL 和超时配置
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 基础 URL，指向后端 API 地址
  timeout: 5000 // 请求超时时间
});

// 请求拦截器（可选）
axiosInstance.interceptors.request.use(config => {
  // 在发送请求之前可以处理一些逻辑，如添加 token
  config.headers['Authorization'] = 'Bearer your_token';
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器（可选）
axiosInstance.interceptors.response.use(response => {
  // 可以对响应数据进行处理，如统一处理错误码
  return response.data;
}, error => {
  return Promise.reject(error);
});

export default axiosInstance;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 2. 使用 Axios 请求数据并更新图表

# 1. 柱状图（Bar）

后端返回的数据格式：

categories: 数组型，x 轴的分类数据。
values: 数组型，y 轴的数值数据。

{
  "categories": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  "values": [5, 20, 36, 10, 10, 20]
}

1
2
3
4

前端代码：

import axiosInstance from './axiosInstance';

// 柱状图的 ECharts 配置项
const barChartOption = {
  title: {
    text: '各类商品销量'
  },
  xAxis: {
    type: 'category', // X轴类型为类目轴
    data: [] // X轴数据，后续通过 API 更新
  },
  yAxis: {
    type: 'value' // Y轴类型为数值轴
  },
  series: [{
    name: '销量', // 系列名称
    type: 'bar', // 柱状图类型
    data: [] // 系列数据，后续通过 API 更新
  }]
};

// 获取柱状图数据并更新图表
function fetchBarChartData() {
  axiosInstance.get('/sales/products') // 请求后端 API
    .then(response => {
      const { categories, values } = response.data; // 提取响应数据
      
      // 更新图表数据
      barChartOption.xAxis.data = categories;
      barChartOption.series[0].data = values;
      
      // 使用 updatedOption 更新 ECharts 实例
      echartsInstance.setOption(barChartOption);
    })
    .catch(error => {
      console.error('获取柱状图数据失败:', error); // 错误处理
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# vue模板代码

结合我之前的封装的组件使用，只需要简单配置传入数据即可

<template>
  <e-charts-component :options="barChartOption" :width="'100%'" :height="'400px'"></e-charts-component>
</template>

<script>
import axios from 'axios';

export default {
  name: 'BarChart',
  data() {
    return {
      // 柱状图的 ECharts 配置项
      barChartOption: {
        title: {
          text: '各类商品销量' // 图表标题
        },
        xAxis: {
          type: 'category', // X轴类型为类目轴
          data: [] // X轴数据，后续通过 API 更新
        },
        yAxis: {
          type: 'value' // Y轴类型为数值轴
        },
        series: [{
          name: '销量', // 系列名称
          type: 'bar', // 柱状图类型
          data: [] // 系列数据，后续通过 API 更新
        }]
      }
    };
  },
  methods: {
    // 获取柱状图数据并更新图表
    fetchBarChartData() {
      axios.get('/sales/products') // 请求后端 API
        .then(response => {
          const { categories, values } = response.data; // 从响应数据中提取数据
          this.barChartOption.xAxis.data = categories; // 更新X轴数据
          this.barChartOption.series[0].data = values; // 更新系列数据
        })
        .catch(error => {
          console.error('获取柱状图数据失败:', error); // 错误处理
        });
    }
  },
  created() {
    this.fetchBarChartData(); // 组件创建时获取数据
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 2. 折线图（Line）

后端返回的数据格式：

categories: 数组型，x 轴的分类数据。
values: 数组型，y 轴的数值数据。

{
  "categories": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  "values": [820, 932, 901, 934, 1290, 1330, 1320]
}

1
2
3
4

前端代码：

import axiosInstance from './axiosInstance';

// 折线图的 ECharts 配置项
const lineChartOption = {
  title: {
    text: '一周销售量'
  },
  xAxis: {
    type: 'category', // X轴类型为类目轴
    data: [] // X轴数据，后续通过 API 更新
  },
  yAxis: {
    type: 'value' // Y轴类型为数值轴
  },
  series: [{
    name: '销量', // 系列名称
    type: 'line', // 折线图类型
    data: [] // 系列数据，后续通过 API 更新
  }]
};

// 获取折线图数据并更新图表
function fetchLineChartData() {
  axiosInstance.get('/sales/weekly') // 请求后端 API
    .then(response => {
      const { categories, values } = response.data; // 提取响应数据
      
      // 更新图表数据
      lineChartOption.xAxis.data = categories;
      lineChartOption.series[0].data = values;
      
      // 使用 updatedOption 更新 ECharts 实例
      echartsInstance.setOption(lineChartOption);
    })
    .catch(error => {
      console.error('获取折线图数据失败:', error); // 错误处理
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# vue模板代码

结合我之前的封装的组件使用，只需要简单配置传入数据即可

<template>
  <e-charts-component :options="lineChartOption" :width="'100%'" :height="'400px'"></e-charts-component>
</template>

<script>
import axios from 'axios';

export default {
  name: 'LineChart',
  data() {
    return {
      // 折线图的 ECharts 配置项
      lineChartOption: {
        title: {
          text: '一周销售量' // 图表标题
        },
        xAxis: {
          type: 'category', // X轴类型为类目轴
          data: [] // X轴数据，后续通过 API 更新
        },
        yAxis: {
          type: 'value' // Y轴类型为数值轴
        },
        series: [{
          name: '销量', // 系列名称
          type: 'line', // 折线图类型
          data: [] // 系列数据，后续通过 API 更新
        }]
      }
    };
  },
  methods: {
    // 获取折线图数据并更新图表
    fetchLineChartData() {
      axios.get('/sales/weekly') // 请求后端 API
        .then(response => {
          const { categories, values } = response.data; // 从响应数据中提取数据
          this.lineChartOption.xAxis.data = categories; // 更新X轴数据
          this.lineChartOption.series[0].data = values; // 更新系列数据
        })
        .catch(error => {
          console.error('获取折线图数据失败:', error); // 错误处理
        });
    }
  },
  created() {
    this.fetchLineChartData(); // 组件创建时获取数据
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 3. 饼图（Pie）

后端返回的数据格式：

data: 数组型，包含每个扇区的数值及其名称。

{
  "data": [
    { "value": 1048, "name": "搜索引擎" },
    { "value": 735, "name": "直接访问" },
    { "value": 580, "name": "邮件营销" },
    { "value": 484, "name": "联盟广告" },
    { "value": 300, "name": "视频广告" }
  ]
}

1
2
3
4
5
6
7
8
9

前端代码：

import axiosInstance from './axiosInstance';

// 饼图的 ECharts 配置项
const pieChartOption = {
  title: {
    text: '访问来源',
    left: 'center'
  },
  tooltip: {
    trigger: 'item', // 提示框触发类型为项
    formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框内容格式化
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: [] // 图例内容，通过 API 动态填充
  },    
  series: [{
    name: '访问来源',
    type: 'pie', // 饼图类型
    radius: '50%', // 半径大小
    data: [] // 系列数据，通过 API 动态填充
  }]
};

// 获取饼图数据并更新图表
function fetchPieChartData() {
  axios.get('/traffic/sources') // 请求后端 API
    .then(response => {
      const pieData = response.data.data; // 提取响应数据
      
      // 更新图例的 data
      pieChartOption.legend.data = pieData.map(item => item.name);
      
      // 更新系列的 data
      pieChartOption.series[0].data = pieData;
      
      // 使用 updatedOption 更新 ECharts 实例
      echartsInstance.setOption(pieChartOption);
    })
    .catch(error => {
      console.error('获取饼图数据失败:', error); // 错误处理
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# vue模板代码

结合我之前的封装的组件使用，只需要简单配置传入数据即可

<template>
  <e-charts-component :options="pieChartOption" :width="'100%'" :height="'400px'"></e-charts-component>
</template>

<script>
import axios from 'axios';

export default {
  name: 'PieChart',
  data() {
    return {
      // 饼图的 ECharts 配置项
      pieChartOption: {
        title: {
          text: '访问来源',
          left: 'center' // 图表标题居中
        },
        tooltip: {
          trigger: 'item', // 提示框触发类型为项
          formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框内容格式化
        },
        legend: {
          orient: 'vertical', // 图例方向为竖直方向
          left: 'left', // 图例位置在左侧
          data: [] // 图例数据，通过 API 动态填充
        },
        series: [{
          name: '访问来源',
          type: 'pie', // 饼图类型
          radius: '50%', // 饼图的半径大小
          data: [] // 系列数据，通过 API 动态填充
        }]
      }
    };
  },
  methods: {
    // 获取饼图数据并更新图表
    fetchPieChartData() {
      axios.get('/traffic/sources') // 请求后端 API
        .then(response => {
          const pieData = response.data.data; // 从响应数据中提取数据

          // 更新图例数据
          this.pieChartOption.legend.data = pieData.map(item => item.name);

          // 更新系列数据
          this.pieChartOption.series[0].data = pieData;
        })
        .catch(error => {
          console.error('获取饼图数据失败:', error); // 错误处理
        });
    }
  },
  created() {
    this.fetchPieChartData(); // 组件创建时获取数据
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# 4. 散点图（Scatter）

后端返回的数据格式：

data: 数组型，每个元素包含两个数值，分别代表 x 轴和 y 轴的坐标。

{
  "data": [
    [10.0, 8.04],
    [8.0, 6.95],
    [13.0, 7.58],
    [9.0, 8.81],
    [11.0, 8.33],
    [14.0, 9.96],
    [6.0, 7.24],
    [4.0, 4.26],
    [12.0, 10.84],
    [7.0, 4.82],
    [5.0, 5.68]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

前端代码：

import axiosInstance from './axiosInstance';

// 散点图的 ECharts 配置项
const scatterChartOption = {
  title: {
    text: '散点图示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item', // 提示框触发类型为项
    formatter: 'X: {c0}, Y: {c1}' // 提示框内容格式化
  },
  xAxis: {
    type: 'value', // X轴类型为数值轴
    name: 'X 轴',
    splitLine: { show: false } // 不显示分割线
  },
  yAxis: {
    type: 'value', // Y轴类型为数值轴
    name: 'Y 轴',
    splitLine: { show: false } // 不显示分割线
  },
  series: [{
    name: '散点',
    type: 'scatter', // 散点图类型
    data: [] // 数据，后续通过 API 更新
  }]
};

// 获取散点图数据并更新图表
function fetchScatterChartData() {
  axiosInstance.get('/scatter/data') // 请求后端 API
    .then(response => {
      const scatterData = response.data.data; // 提取响应数据
      
      // 更新图表数据
      scatterChartOption.series[0].data = scatterData;
      
      // 使用 updatedOption 更新 ECharts 实例
      echartsInstance.setOption(scatterChartOption);
    })
    .catch(error => {
      console.error('获取散点图数据失败:', error); // 错误处理
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# vue模板代码

结合我之前的封装的组件使用，只需要简单配置传入数据即可

<template>
  <e-charts-component :options="scatterChartOption" :width="'100%'" :height="'400px'"></e-charts-component>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ScatterChart',
  data() {
    return {
      // 散点图的 ECharts 配置项
      scatterChartOption: {
        title: {
          text: '散点图示例',
          left: 'center' // 图表标题居中
        },
        tooltip: {
          trigger: 'item', // 提示框触发类型为项
          formatter: 'X: {c0}, Y: {c1}' // 提示框内容格式化
        },
        xAxis: {
          type: 'value', // X轴类型为数值轴
          name: 'X 轴',
          splitLine: { show: false } // 不显示分割线
        },
        yAxis: {
          type: 'value', // Y轴类型为数值轴
          name: 'Y 轴',
          splitLine: { show: false } // 不显示分割线
        },
        series: [{
          name: '散点',
          type: 'scatter', // 散点图类型
          data: [] // 系列数据，通过 API 动态填充
        }]
      }
    };
  },
  methods: {
    // 获取散点图数据并更新图表
    fetchScatterChartData() {
      axios.get('/scatter/data') // 请求后端 API
        .then(response => {
          const scatterData = response.data.data; // 从响应数据中提取数据

          // 更新系列数据
          this.scatterChartOption.series[0].data = scatterData;
        })
        .catch(error => {
          console.error('获取散点图数据失败:', error); // 错误处理
        });
    }
  },
  created() {
    this.fetchScatterChartData(); // 组件创建时获取数据
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# 5. 雷达图（Radar）

后端返回的数据格式：

indicator: 数组型，每个元素包含 name（维度名称）和 max（最大值）。
data: 数组型，每个元素包含 value（各维度的值数组）和 name（系列名称）。

{
  "indicator": [
    { "name": "销售", "max": 6500 },
    { "name": "管理", "max": 16000 },
    { "name": "信息技术", "max": 30000 },
    { "name": "客服", "max": 38000 },
    { "name": "研发", "max": 52000 },
    { "name": "市场", "max": 25000 }
  ],
  "data": [
    { "value": [4300, 10000, 28000, 35000, 50000, 19000], "name": "预算分配" },
    { "value": [5000, 14000, 28000, 31000, 42000, 21000], "name": "实际开销" }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

前端代码：

import axiosInstance from './axiosInstance';

// 雷达图的 ECharts 配置项
const radarChartOption = {
  title: {
    text: '预算 vs 开销',
    left: 'center'
  },
  tooltip: {
    trigger: 'item' // 提示框触发类型为项
  },
  radar: {
    // 雷达图的指示器配置
    indicator: [] // 指示器数组，后续通过 API 更新
  },
  series: [{
    name: '预算 vs 开销',
    type: 'radar', // 雷达图类型
    data: [] // 数据，后续通过 API 更新
  }]
};

// 获取雷达图数据并更新图表
function fetchRadarChartData() {
  axiosInstance.get('/radar/data') // 请求后端 API
    .then(response => {
      const { indicator, data } = response.data; // 提取响应数据
      
      // 更新雷达图的指示器和数据
      radarChartOption.radar.indicator = indicator;
      radarChartOption.series[0].data = data;
      
      // 使用 updatedOption 更新 ECharts 实例
      echartsInstance.setOption(radarChartOption);
    })
    .catch(error => {
      console.error('获取雷达图数据失败:', error); // 错误处理
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# vue模板代码

结合我之前的封装的组件使用，只需要简单配置传入数据即可

<template>
  <e-charts-component :options="radarChartOption" :width="'100%'" :height="'400px'"></e-charts-component>
</template>

<script>
import axios from 'axios';

export default {
  name: 'RadarChart',
  data() {
    return {
      // 雷达图的 ECharts 配置项
      radarChartOption: {
        title: {
          text: '预算 vs 开销',
          left: 'center' // 图表标题居中
        },
        tooltip: {
          trigger: 'item' // 提示框触发类型为项
        },
        radar: {
          indicator: [] // 雷达图的指示器，通过 API 动态填充
        },
        series: [{
          name: '预算 vs 开销',
          type: 'radar', // 雷达图类型
          data: [] // 系列数据，通过 API 动态填充
        }]
      }
    };
  },
  methods: {
    // 获取雷达图数据并更新图表
    fetchRadarChartData() {
      axios.get('/radar/data') // 请求后端 API
        .then(response => {
          const { indicator, data } = response.data; // 从响应数据中提取数据

          // 更新雷达图的指示器和系列数据
          this.radarChartOption.radar.indicator = indicator;
          this.radarChartOption.series[0].data = data;
        })
        .catch(error => {
          console.error('获取雷达图数据失败:', error); // 错误处理
        });
    }
  },
  created() {
    this.fetchRadarChartData(); // 组件创建时获取数据
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# 6. 仪表盘（Gauge）

后端返回的数据格式：

rate: 数值型，表示需要在仪表盘上显示的百分比值。

{
  "rate": 75
}

1
2
3

前端代码：

import axiosInstance from './axiosInstance';

// 仪表盘的 ECharts 配置项
const gaugeChartOption = {
  title: {
    text: '系统健康度',
    left: 'center'
  },
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%' // 提示框内容格式化
  },
  series: [
    {
      name: '健康度',
      type: 'gauge', // 仪表盘类型
      detail: { formatter: '{value}%' }, // 仪表盘中显示的数值格式
      data: [{ value: 50, name: '完成率' }] // 默认值，后面会更新
    }
  ]
};

// 获取仪表盘数据并更新图表
function fetchGaugeChartData() {
  axiosInstance.get('/system/health') // 请求后端 API
    .then(response => {
      const healthRate = response.data.rate; // 从响应数据中提取健康度
      
      // 更新图表数据
      gaugeChartOption.series[0].data[0].value = healthRate;
      
      // 使用 updatedOption 更新 ECharts 实例
      echartsInstance.setOption(gaugeChartOption);
    })
    .catch(error => {
      console.error('获取仪表盘数据失败:', error); // 错误处理
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# vue模板代码

结合我之前的封装的组件使用，只需要简单配置传入数据即可

<template>
  <e-charts-component :options="gaugeChartOption" :width="'100%'" :height="'400px'"></e-charts-component>
</template>

<script>
import axios from 'axios';

export default {
  name: 'GaugeChart',
  data() {
    return {
      // 仪表盘的 ECharts 配置项
      gaugeChartOption: {
        title: {
          text: '系统健康度',
          left: 'center' // 图表标题居中
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%' // 提示框内容格式化
        },
        series: [{
          name: '健康度',
          type: 'gauge', // 仪表盘类型
          detail: { formatter: '{value}%' }, // 显示的数值格式
          data: [{ value: 50, name: '完成率' }] // 默认值，后续通过 API 更新
        }]
      }
    };
  },
  methods: {
    // 获取仪表盘数据并更新图表
    fetchGaugeChartData() {
      axios.get('/system/health') // 请求后端 API
        .then(response => {
          const healthRate = response.data.rate; // 从响应数据中提取健康度

          // 更新仪表盘数据
          this.gaugeChartOption.series[0].data[0].value = healthRate;
        })
        .catch(error => {
          console.error('获取仪表盘数据失败:', error); // 错误处理
        });
    }
  },
  created() {
    this.fetchGaugeChartData(); // 组件创建时获取数据
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 7. 树状图（Tree）

后端返回的数据格式：

name: 字符串型，节点名称。
children: 数组型，包含子节点的列表，每个子节点的结构与父节点相同。

{
  "name": "根节点",
  "children": [
    {
      "name": "节点1",
      "children": [
        { "name": "节点1-1" },
        { "name": "节点1-2" }
      ]
    },
    {
      "name": "节点2",
      "children": [
        { "name": "节点2-1" },
        { "name": "节点2-2" }
      ]
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

前端代码：

import axiosInstance from './axiosInstance';

// 树状图的 ECharts 配置项
const treeChartOption = {
  title: {
    text: '组织结构图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item', // 触发类型为项
    triggerOn: 'mousemove' // 鼠标移动时触发提示框
  },
  series: [
    {
      type: 'tree', // 树状图类型
      data: [], // 树状图数据，后续会通过 API 更新
      top: '5%', // 图表距离顶部的距离
      left: '7%', // 图表距离左侧的距离
      bottom: '2%', // 图表距离底部的距离
      right: '20%', // 图表距离右侧的距离
      symbolSize: 7, // 节点的大小
      label: {
        position: 'left', // 标签显示在左侧
        verticalAlign: 'middle', // 标签垂直居中
        align: 'right', // 标签水平对齐
        fontSize: 9 // 标签字体大小
      },
      leaves: {
        label: {
          position: 'right', // 叶子节点的标签显示在右侧
          verticalAlign: 'middle', // 标签垂直居中
          align: 'left' // 标签水平对齐
        }
      },
      expandAndCollapse: true, // 允许节点展开和收缩
      initialTreeDepth: 2, // 初始展开的深度
      animationDuration: 550, // 初始动画时长
      animationDurationUpdate: 750 // 数据更新动画时长
    }
  ]
};

// 获取树状图数据并更新图表
function fetchTreeChartData() {
  axiosInstance.get('/organization/tree') // 请求后端 API
    .then(response => {
      const treeData = response.data; // 从响应数据中提取树状结构数据
      
      // 更新图表数据
      treeChartOption.series[0].data = [treeData];
      
      // 使用 updatedOption 更新 ECharts 实例
      echartsInstance.setOption(treeChartOption);
    })
    .catch(error => {
      console.error('获取树状图数据失败:', error); // 错误处理
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# vue模板代码

结合我之前的封装的组件使用，只需要简单配置传入数据即可

<template>
  <e-charts-component :options="treeChartOption" :width="'100%'" :height="'400px'"></e-charts-component>
</template>

<script>
import axios from 'axios';

export default {
  name: 'TreeChart',
  data() {
    return {
      // 树状图的 ECharts 配置项
      treeChartOption: {
        title: {
          text: '组织结构图',
          left: 'center' // 图表标题居中
        },
        tooltip: {
          trigger: 'item', // 提示框触发类型为项
          triggerOn: 'mousemove' // 鼠标移动时触发提示框
        },
        series: [{
          type: 'tree', // 树状图类型
          data: [], // 树状图数据，通过 API 动态填充
          top: '5%', // 图表距离顶部的距离
          left: '7%', // 图表距离左侧的距离
          bottom: '2%', // 图表距离底部的距离
          right: '20%', // 图表距离右侧的距离
          symbolSize: 7, // 节点的大小
          label: {
            position: 'left', // 标签显示在左侧
            verticalAlign: 'middle', // 标签垂直居中
            align: 'right', // 标签水平对齐
            fontSize: 9 // 标签字体大小
          },
          leaves: {
            label

: {
              position: 'right', // 叶子节点的标签显示在右侧
              verticalAlign: 'middle', // 标签垂直居中
              align: 'left' // 标签水平对齐
            }
          },
          expandAndCollapse: true, // 允许节点展开和收缩
          initialTreeDepth: 2, // 初始展开的深度
          animationDuration: 550, // 初始动画时长
          animationDurationUpdate: 750 // 数据更新动画时长
        }]
      }
    };
  },
  methods: {
    // 获取树状图数据并更新图表
    fetchTreeChartData() {
      axios.get('/organization/tree') // 请求后端 API
        .then(response => {
          const treeData = response.data; // 从响应数据中提取树状结构数据

          // 更新树状图数据
          this.treeChartOption.series[0].data = [treeData];
        })
        .catch(error => {
          console.error('获取树状图数据失败:', error); // 错误处理
        });
    }
  },
  created() {
    this.fetchTreeChartData(); // 组件创建时获取数据
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

# 3. Mock.js 生成随机数据

在mock目录创建一个mock.js文件，用于生成随机数据，拦截 Ajax 请求。
下面是根据上面七种类型的图表生成的一个可以动态修改返回数据数量的 mock.js 文件，通过传递不同的参数来控制返回数据的条目数

import Mock from 'mockjs';

// 定义生成柱状图数据的函数
function generateBarChartData(categoriesCount = 6, valueRange = [5, 50]) {
  return Mock.mock({
    'categories': Array.from({ length: categoriesCount }, (_, i) => `类别${i + 1}`), // 生成指定数量的类别名称
    'values': Array.from({ length: categoriesCount }, () => Mock.Random.integer(...valueRange)) // 生成指定数量的随机数值
  });
}

// 定义生成折线图数据的函数
function generateLineChartData(days = 7, valueRange = [500, 1000]) {
  return Mock.mock({
    'categories': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].slice(0, days), // 根据天数截取数组
    'values': Array.from({ length: days }, () => Mock.Random.integer(...valueRange)) // 生成指定天数的随机数值
  });
}

// 定义生成饼图数据的函数
function generatePieChartData(itemsCount = 5, valueRange = [100, 1000]) {
  return Mock.mock({
    'data': Array.from({ length: itemsCount }, () => ({
      'name': Mock.Random.word(),
      'value': Mock.Random.integer(...valueRange)
    })) // 生成指定数量的扇区数据
  });
}

// 定义生成散点图数据的函数
function generateScatterData(pointsCount = 10, rangeX = [4, 14], rangeY = [4, 12]) {
  return Mock.mock({
    'data': Array.from({ length: pointsCount }, () => [
      Mock.Random.float(...rangeX),
      Mock.Random.float(...rangeY)
    ]) // 生成指定数量的随机坐标
  });
}

// 定义生成雷达图数据的函数
function generateRadarChartData(indicators = 6, valueRange = [4000, 60000]) {
  const indicatorNames = ['销售', '管理', '信息技术', '客服', '研发', '市场'];
  return Mock.mock({
    'indicator': indicatorNames.slice(0, indicators).map(name => ({ name, max: 65000 })), // 截取指定数量的指标
    'data': Array.from({ length: 2 }, () => ({
      'value': Array.from({ length: indicators }, () => Mock.Random.integer(...valueRange)),
      'name': Mock.Random.word()
    })) // 生成指定数量的系列数据
  });
}

// 定义生成仪表盘数据的函数
function generateGaugeChartData() {
  return Mock.mock({
    'rate': Mock.Random.integer(60, 100) // 生成一个随机的健康度百分比
  });
}

// 定义生成树状图数据的函数
function generateTreeData(depth = 2) {
  const createNode = (level) => {
    if (level > depth) return null;
    return {
      name: `节点${level}`,
      children: [
        createNode(level + 1),
        createNode(level + 1)
      ].filter(Boolean)
    };
  };
  return createNode(1);
}

// 使用 Mock.mock 拦截并返回动态生成的柱状图数据
Mock.mock('/sales/products', 'get', (options) => {
  const params = JSON.parse(options.body || '{}');
  return generateBarChartData(params.categoriesCount, params.valueRange);
});

// 使用 Mock.mock 拦截并返回动态生成的折线图数据
Mock.mock('/sales/weekly', 'get', (options) => {
  const params = JSON.parse(options.body || '{}');
  return generateLineChartData(params.days, params.valueRange);
});

// 使用 Mock.mock 拦截并返回动态生成的饼图数据
Mock.mock('/traffic/sources', 'get', (options) => {
  const params = JSON.parse(options.body || '{}');
  return generatePieChartData(params.itemsCount, params.valueRange);
});

// 使用 Mock.mock 拦截并返回动态生成的散点图数据
Mock.mock('/scatter/data', 'get', (options) => {
  const params = JSON.parse(options.body || '{}');
  return generateScatterData(params.pointsCount, params.rangeX, params.rangeY);
});

// 使用 Mock.mock 拦截并返回动态生成的雷达图数据
Mock.mock('/radar/data', 'get', (options) => {
  const params = JSON.parse(options.body || '{}');
  return generateRadarChartData(params.indicators, params.valueRange);
});

// 使用 Mock.mock 拦截并返回动态生成的仪表盘数据
Mock.mock('/system/health', 'get', () => {
  return generateGaugeChartData();
});

// 使用 Mock.mock 拦截并返回动态生成的树状图数据
Mock.mock('/organization/tree', 'get', (options) => {
  const params = JSON.parse(options.body || '{}');
  return generateTreeData(params.depth);
});

export default Mock;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

动态生成数据：每个生成函数都接收参数，用于控制返回数据的数量和范围。例如 generateBarChartData 函数可以通过传入 categoriesCount 和 valueRange 来控制生成的类别数量和数值范围。
接收参数：每个请求拦截的函数会解析 options.body，从中提取参数，以便生成动态的模拟数据。

在发送请求时，可以通过传递参数来控制返回的数据数量和范围。例如：

axios.get('/sales/products', { categoriesCount: 8, valueRange: [10, 100] });

这样就会生成 8 个类别的数据，每个类别的数值范围在 10 到 100 之间。

编辑此页

上次更新: 2024/12/28, 18:32:08

← ECharts 常见图表类型 ECharts 事件处理→