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

简介: 在这里我们讨论两个例子:正常下(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]
        ]
    }
};

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

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

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

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

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


目录
相关文章
Echarts折线图line-stack数值和数值显示不一致
Echarts折线图line-stack数值和数值显示不一致
250 0
Echarts折线图line-stack数值和数值显示不一致
|
Python
echarts折线图的每个折点都显示数值
echarts折线图的每个折点都显示数值
316 0
|
Apache
Echarts折线图line-stack数值和数值显示不一致
Echarts折线图line-stack数值和数值显示不一致
186 0
Echarts折线图line-stack数值和数值显示不一致
|
22天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
47 1
|
18天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
108 0
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
3月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
428 1
微信小程序使用echarts图表(ec-canvas)
|
3月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
3月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
54 1