echarts折线图多y轴

在这里插入图片描述

 options={
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var unitMap = {
              'Email': 'ml',
              'Union Ads': 'ml',
              'Video Ads': 'ml',
              'Direct': 'ml',
              'Search Engine': 'ml',
              'Search': 'ml'
            };
            var htmlStr = params[0].name + '<br>';
            for (var i = 0; i < params.length; i++) {
              var seriesName = params[i].seriesName;
              var value = params[i].value;
              var unit = unitMap[seriesName] || '';
              htmlStr += seriesName + '('+unit+'): ' + value  +'<br>';
            }
            return htmlStr;
          }
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine','Search']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          right: '50px',
          show: true,
          feature: {
            saveAsImage: {},
            magicType: { type: ['line', 'bar'] },
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: [{
          alignTicks: true,
          nameLocation: 'center',
          scale: true,
          name: '蒸发量 ml',


          type: 'value',
          position: 'right',
          offset: 0, // y轴位置的偏移量
          axisLine: {
            show: true,
            lineStyle: {
              color: 'green'
            }
          },
          axisLabel: {
            formatter: '{value}'
          },
          nameTextStyle: {
            padding: [20, 0, 0, 0],
          },
        },{
          alignTicks: true,
          nameLocation: 'center',
          scale: true,
          type: 'value',
          name: '甲醛 ml',
          position: 'right',
          offset: 50, // y轴位置的偏移量
          axisLine: {
            show: true,
            lineStyle: {
              color: 'blue'
            }
          },
          axisLabel: {
            formatter: '{value}'
          },
          nameTextStyle: {
            padding: [20, 0, 0, 0],
          },
        },{
          alignTicks: true,
          nameLocation: 'center',
          scale: true,
          type: 'value',
          name: '甲烷 ml',
          position: 'right',
          offset: 100, // y轴位置的偏移量
          axisLine: {
            show: true,
            lineStyle: {
              color: 'red'
            }
          },
          axisLabel: {
            formatter: '{value}'
          },
          nameTextStyle: {
            padding: [20, 0, 0, 0],
          },
        },
          {
            alignTicks: true,
            nameLocation: 'center',
            scale: true,
            type: 'value',
            name: '降水量 ml',
            position: 'left',
            offset: 0, // y轴位置的偏移量
            axisLine: {
              show: true,
              lineStyle: {
                color: 'red'
              }
            },
            axisLabel: {
              formatter: '{value}'
            },
            nameTextStyle: {
              padding: [0, 0, 20, 0],
            },
          },
          {
            alignTicks: true,
            nameLocation: 'center',
            scale: true,
            type: 'value',
            name: '温度°C',
            position: 'left',
            offset: 50, // y轴位置的偏移量
            axisLine: {
              show: true,
              lineStyle: {
                color: 'blue'
              }
            },
            axisLabel: {
              formatter: '{value} '
            },
            nameTextStyle: {
              padding: [0, 0, 20, 0],
            },
          },{
            alignTicks: true,
            nameLocation: 'center',
            scale: true,
            type: 'value',
            name: '氧气°C',
            position: 'left',
            offset: 100, // y轴位置的偏移量
            axisLine: {
              show: true,
              lineStyle: {
                color: 'pink'
              }
            },
            axisLabel: {
              formatter: '{value} '
            },
            nameTextStyle: {
              padding: [0, 0, 20, 0],
            },
          },
        ],
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
            yAxisIndex: 0,
            lineStyle: {
              color: 'red'
            }
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
            yAxisIndex: 1
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
            yAxisIndex: 2
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
            yAxisIndex: 3
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
            yAxisIndex: 4
          },
          {
            name: 'Search',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
            yAxisIndex: 5
          }
        ]
      };
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果你想让 Echarts 折线图从 y 轴开始,可以通过设置 `yAxis.min` 属性为 `0` 来实现。这个属性表示 y 轴的最小值,如果设置为 `0`,则折线图的起点就会从 y 轴开始。 例如,你可以这样设置 y 轴的最小值: ``` yAxis: { min: 0 } ``` 这样就能让折线图从 y 轴开始了。希望能帮到你! ### 回答2: Echarts折线图默认的显示方式是从y轴零刻度开始的。这种显示方式可以清晰地展示数据的变化趋势,使得数据的对比和分析更加直观。 在Echarts中,你可以设置y轴的最小值为0,这样折线图的起点就会从y轴的零刻度开始。设置最小值的方法如下: 在y轴的配置中,使用min属性,将其值设置为0,例如:yAxis: { min: 0 }。 通过这样设置,就可以使折线图的起点从y轴的零刻度开始,展示数据的变化情况。这样的显示方式常用于显示数量、比例等与零相关的数据。同时,这种显示方式也能够更好地展示数据的变化幅度,方便用户更直观地观察数据的波动情况。 总之,Echarts折线图可以通过设置y轴最小值为0来使折线图y轴开始显示。这种显示方式可以更好地展示数据的变化趋势和幅度,提供直观的数据分析效果。 ### 回答3: Echarts折线图可以通过调整图表的y轴的配置参数来实现从y轴开始的展示效果。具体步骤如下: 1. 设置y轴的配置参数:在Echarts折线图的配置项中,可以找到yAxis这个属性,通过设置其min属性值为0,即可将y轴的最小值设为0,使折线图y轴开始显示。 2. 调整数据的数值范围:确保折线图所展示的数据范围包含了0这个数值。可以通过调整数据的数值,使最小值为0。如果数据范围本身不包含0,则需要通过处理数据使其包含0。 3. 设置其他观测点的数值:根据实际需求,可以设置其他观测点的数值。可以在配置项的series属性中,设置data数组中各个观测点的数值。 通过以上步骤,就可以实现Echarts折线图y轴开始的效果。注意,具体的代码实现与配置方式可能因Echarts的版本和使用环境而有所差异,可以参考Echarts官方文档或相关教程进行具体操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值