主页

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

正常下(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

img

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

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

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

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

img

img

那么也就是说,需要在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'
    }]
};

img

还可以使用新特性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的第一个写啥值就是啥

image-20220329205432217

反之,如果是category,就可以通过索引去访问类目轴里的data

image-20220329205600658

dataset这个新特性也是这样适用规则。

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

版权属于:染念
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
7
查看目录

目录

来自 《Echarts双数值,双类目,x数值y类目的解决总结》
评论

染念

博主很懒,啥都没有
145 文章数
533 评论量
4 分类数
149 页面数
已在风雨中度过 5年95天17小时30分
© 2022 染念的笔记
浙ICP备19020194号-1