Echarts双数值，双类目，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  ]
      ]
  }]

演示：https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard

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],
    ],
  },
};

---

通过上面案例，我们明白，

如果是 type 是value类型，是无法通过 series.data 的索引去访问 xAis 里面的值的，data 的第一个写啥值就是啥

反之，如果是category，就可以通过索引去访问类目轴里的 data dataset 这个新特性也是这样适用规则。

因此我们就能很好举一反三了！