Echarts双数值，双类目，x数值y类目的解决总结-阿里云开发者社区

Echarts双数值，双类目，x数值y类目的解决总结

2023-11-30 308

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在这里我们讨论两个例子：正常下(x是类目轴，y是数值轴)，而如果把x，y变成非正常轴，series下的data仍是一维数组时候，就会使用图表出现异常我们详细说说解决方法当x,y轴都是类目轴怎么办？

在这里我们讨论两个例子：

正常下(x是类目轴，y是数值轴)，而如果把x，y变成非正常轴，series下的data仍是一维数组时候，就会使用图表出现异常

我们详细说说解决方法

当x,y轴都是类目轴怎么办？

xAxis: {
      type: 'category',
      data: ['星期一', '星期二', '星期三', '星期四']
  },
  yAxis: {
      type: 'category',
      data: ['a', 'b', 'm', 'n', 'p', 'q']
  },
  series: [{
      data: [
          // xAxis    yAxis
          [  0,        0,    2  ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
          [  '星期四',  2,    1  ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
          [  2,       'p',   2  ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
          [  3,        3,    5  ]
      ]
  }]

演示：

x,y都是数值轴

option = {
    xAxis: {
        type: 'value',
        data: [1, 2, 3, 4, 5, 6, 7],
        name: 'x轴'
    },
    yAxis: {
        type: 'value',
        name: 'y轴'
    }，
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

使用上述代码，可以发现柱状图的左上角那个点的x和y的值是相等的，从左往右分别是70,80,110,120,130,150,200

本以为这能过渡给y轴，实则不然。

上面我们也说了这是 series.data的问题，

通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』

特别地，当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组表示

那么也就是说，需要在xAxis.type='value'的时候，把x轴的数据存放到series.data里面去。本来正常应该y是value，x是category

option = {
    xAxis: {
        type: 'value',
        name: 'x轴'
    },
    yAxis: {
        type: 'value',
        name: 'y轴'
    },
    series: [{
        data: [
            [1,120],
            [2,200],
            [3,150],
            [4,80],
            [5,70],
            [6,110],
            [7,130]
        ],
        type: 'bar'
    }]
};

还可以使用新特性dataset来设置，代码如下，效果和上图一致

option = {
    xAxis: {
        type: 'value',
        name: 'x轴'
    },
    yAxis: {
        type: 'value',
        name: 'y轴'
    },
    series: [{
        type: 'bar'
    }],
    dataset: {
        source: [
            [1, 120],
            [2, 200],
            [3,150],
            [4,80],
            [5,70],
            [6,110],
            [7,130]
        ]
    }
};