请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

神马

中级会员

31

主题

171

帖子

558

积分

中级会员

积分
558
QQ
神马
中级会员   /  发表于:2024-11-25 11:37  /   查看:93  /  回复:3
100金币
Wyn三个以上纵坐标的效果图,如何实现?需要写代码的话,具体能给一个示例吗?

最佳答案

查看完整内容

您好,先确认一下,您是要的纵坐标,而不是多组数据显示。 因为图表一般正常最多就两个纵坐标,一个左边一个右边,再多也就没有地方显示,而且你不知道你的哪个数据对应的哪个坐标。 如果只是多组数据的话,您直接用组合图或者其他图表都可以: 数值轴是可以直接绑定多个的。 当然如果就是多个纵轴的话也可以,就得利用echarts的自定义代码实现了。比如你想要三个纵轴,然后绑定了三组数据,参考代码如下: 这个您就得根 ...

3 个回复

倒序浏览
最佳答案
最佳答案
Felix.LiWyn认证
超级版主   /  发表于:2024-11-25 11:37:55
来自 2#
您好,先确认一下,您是要的纵坐标,而不是多组数据显示。
因为图表一般正常最多就两个纵坐标,一个左边一个右边,再多也就没有地方显示,而且你不知道你的哪个数据对应的哪个坐标。
如果只是多组数据的话,您直接用组合图或者其他图表都可以:
image.png797848815.png
数值轴是可以直接绑定多个的。

当然如果就是多个纵轴的话也可以,就得利用echarts的自定义代码实现了。比如你想要三个纵轴,然后绑定了三组数据,参考代码如下:
image.png523489989.png
  1. option.yAxis =  [
  2.     {
  3.       type: 'value',
  4.       name: '订单金额',
  5.       position: 'right',
  6.       alignTicks: true,
  7.       axisLine: {
  8.         show: true
  9.       },
  10.       axisLabel: {
  11.         formatter: '{value}'
  12.       }
  13.     },
  14.     {
  15.       type: 'value',
  16.       name: '订单利润',
  17.       position: 'right',
  18.       alignTicks: true,
  19.       offset: 80,
  20.       axisLine: {
  21.         show: true
  22.       },
  23.       axisLabel: {
  24.         formatter: '{value}'
  25.       }
  26.     },
  27.     {
  28.       type: 'value',
  29.       name: '订单单价',
  30.       position: 'left',
  31.       alignTicks: true,
  32.       axisLine: {
  33.         show: true
  34.       },
  35.       axisLabel: {
  36.         formatter: '{value}'
  37.       }
  38.     }
  39.   ];
  40. option.series[0].yAxisIndex = 0;
  41. option.series[1].yAxisIndex = 1;
  42. option.series[2].yAxisIndex = 2;
  43. return option;
复制代码
这个您就得根据自己绑定的数据自己写了,我这里是数值绑定三个,我就创建三个yAxis ,然后把series 的数据分别指定不同的纵坐标轴。可以参考:
https://echarts.apache.org/zh/option.html#yAxis
https://echarts.apache.org/examp ... l?c=multiple-y-axis
实现效果:
image.png771171264.png image.png787183837.png

回复 使用道具 举报
神马
中级会员   /  发表于:2024-11-26 10:14:29
3#
讲的很清楚!尝试更换自己的数据就可以了,多谢!
回复 使用道具 举报
Bella.YuanWyn认证
超级版主   /  发表于:2024-11-26 10:41:58
4#
神马 发表于 2024-11-26 10:14
讲的很清楚!尝试更换自己的数据就可以了,多谢!

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部