使用ECharts实现数据可视化：横纵坐标配置与数据处理详解

用户8589624

发布于 2025-11-15 17:15:50

860

文章被收录于专栏：nginxnginx

使用ECharts实现数据可视化：横纵坐标配置与数据处理详解

数据可视化是现代前端开发中的重要环节，而ECharts作为一款强大的可视化库，能够帮助开发者快速实现复杂的图表需求。本文将以两个实际案例（年份-数量统计和评分-数量统计）为例，详细讲解如何在ECharts中配置横纵坐标、处理数据排序及优化图表样式，并提供完整的代码实现。

一、核心需求与实现思路

1. 需求分析

年份-数量统计：横坐标为年份（升序），纵坐标为电影数量。
评分-数量统计：横坐标为电影数量，纵坐标为评分（升序）。

2. 技术难点

数据排序（年份或评分升序）
坐标轴类型切换（category vs value）
图表样式优化（提示框、标签旋转、布局边距）

二、年份-数量统计的实现

1. 数据获取与排序

从后端接口获取数据后，需按年份升序排序：

// 假设接口返回数据格式
res = [
  { year: "2020", total: 200 },
  { year: "2018", total: 120 },
  { year: "2022", total: 250 }
];

// 按年份升序排序（处理字符串类型的年份）
res.sort((a, b) => parseInt(a.year) - parseInt(b.year));

2. 坐标轴与数据绑定

横坐标：年份（category 类型）
纵坐标：数量（value 类型）

let xAxis = res.map(item => item.year); // 年份
let yAxis = res.map(item => parseFloat(item.total)); // 数量

3. 完整ECharts配置

var option = {
  title: {
    text: '年代统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b} : {c} 部' // 提示框显示年份和数量
  },
  xAxis: {
    type: 'category',
    data: xAxis,
    axisLabel: { rotate: 45 }, // 标签旋转避免重叠
    name: '年份'
  },
  yAxis: {
    type: 'value',
    name: '数量（部）'
  },
  series: [{
    data: yAxis,
    type: 'bar',
    barWidth: '60%',
    itemStyle: { color: '#5470C6' }
  }],
  grid: {
    bottom: '20%' // 为横坐标标签留出空间
  }
};

4. 效果示例

横坐标：2018, 2020, 2022
纵坐标：120, 200, 250
提示框：2018 : 120 部

三、评分-数量统计的实现

1. 数据获取与排序

从后端接口获取数据后，按评分升序排序：

// 假设接口返回数据格式
res = [
  { pingfen: 8.5, total: 120 },
  { pingfen: 7.0, total: 90 }
];

// 按评分升序排序（处理浮点数）
res.sort((a, b) => a.pingfen - b.pingfen);

2. 坐标轴与数据绑定

横坐标：数量（value 类型）
纵坐标：评分（category 类型）

let xAxis = res.map(item => parseFloat(item.total)); // 数量
let yAxis = res.map(item => item.pingfen); // 评分

3. 完整ECharts配置

var option = {
  title: {
    text: '评分统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b} 分 : {c} 部' // 提示框显示评分和数量
  },
  xAxis: {
    type: 'value',
    name: '数量（部）'
  },
  yAxis: {
    type: 'category',
    data: yAxis,
    name: '评分'
  },
  series: [{
    data: xAxis,
    type: 'bar',
    barWidth: '60%',
    itemStyle: { color: '#91CC75' }
  }],
  grid: {
    left: '15%' // 调整纵坐标标签位置
  }
};

4. 效果示例

横坐标：90, 120
纵坐标：7.0, 8.5
提示框：7.0 分 : 90 部

四、关键配置解析

1. 坐标轴类型

category：用于离散的分类数据（如年份、评分）
value：用于连续的数值数据（如数量）

2. 数据排序

// 通用排序函数（处理数字或字符串）
function sortData(data, key) {
  return data.sort((a, b) => parseFloat(a[key]) - parseFloat(b[key]));
}

3. 样式优化技巧

标签旋转：避免横坐标标签重叠

axisLabel: { rotate: 45 }

边距调整：防止标签超出容器

grid: { bottom: '20%', left: '15%' }

提示框格式化：

formatter: '{b} : {c} 部' // {b} 为坐标轴标签，{c} 为数值

五、完整代码整合

1. 年份-数量统计组件

dianyingxinxiChat1() {
  this.$nextTick(() => {
    const chart = echarts.init(document.getElementById("dianyingxinxiChart1"), 'macarons');
    this.$http.get("dianyingxinxi/group/year").then(({ data }) => {
      if (data.code === 0) {
        const res = data.data.sort((a, b) => parseInt(a.year) - parseInt(b.year));
        const option = {
          xAxis: { data: res.map(item => item.year) },
          yAxis: { /* 数值轴配置 */ },
          series: [{ data: res.map(item => item.total) }]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
      }
    });
  });
}

2. 评分-数量统计组件

dianyingxinxiChat2() {
  this.$nextTick(() => {
    const chart = echarts.init(document.getElementById("dianyingxinxiChart2"), 'macarons');
    this.$http.get("dianyingxinxi/group/pingfen").then(({ data }) => {
      if (data.code === 0) {
        const res = data.data.sort((a, b) => a.pingfen - b.pingfen);
        const option = {
          yAxis: { data: res.map(item => item.pingfen) },
          xAxis: { /* 数值轴配置 */ },
          series: [{ data: res.map(item => item.total) }]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
      }
    });
  });
}

六、常见问题与解决方案

1. 数据格式问题

现象：排序结果异常

解决：统一转换为数值类型

parseFloat(a.year) - parseFloat(b.year)

2. 坐标轴标签溢出

现象：标签显示不全

解决：调整布局边距

grid: { left: '20%', right: '10%', bottom: '30%' }

3. 柱状图颜色自定义

itemStyle: {
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#2378f7' }, // 渐变颜色
    { offset: 1, color: '#83bff6' }
  ])
}