echarts 实现多坐标轴效果

option = {
        legend: [
          {
            right: '10',
            top: 0
          }
        ],
        grid: [
          {
            top: 40,
            bottom: 130
          },
          {
            height: 60,
            bottom: 0
          }
        ],
        xAxis: [
          {
            type: 'category',
            data: [
              { value: '2024年1月' },
              { value: '2024年2月' },
              { value: '2024年3月' },
              { value: '2024年4月' },
              { value: '2024年5月' },
              { value: '2024年2月' },
              { value: '2024年3月' },
              { value: '2024年8月' },
              { value: '2024年9月' },
              { value: '2024年10月' },
              { value: '2024年11月' }
            ],
            gridIndex: 0,
            zlevel: 2,
            axisLabel: {
              rotate: 90
            },
            axisTick: {
              length: 100,
              inside: false,
              lineStyle: {
                color: '#999'
              },
              interval: function (index, value) {
                if (
                  (value === '2024年1月' && index === 0) ||
                  (value === '2024年4月' && index === 3) ||
                  (value === '2024年2月' && index === 5) ||
                  (value === '2024年9月' && index === 8) ||
                  (value === '2024年11月' && index === 10)
                ) {
                  return value
                }
              }
            }
          },
          {
            type: 'category',
            axisLine: {
              show: true
            },
            axisTick: {
              show: false,
              length: 60
            },
            zlevel: 1
          }
        ],
        yAxis: [
          {
            type: 'value',
            gridIndex: 0
          },
          {
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: 'IV',
            type: 'line',
            data: [
              {
                value: 0.1
              },
              {
                value: 0
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0.2
              },
              {
                value: 0.1
              },
              {
                value: 0.1
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0.1
              }
            ],
            smooth: true,
            xAxisIndex: 0,
            yAxisIndex: 0
          },
          {
            name: 'PSI',
            type: 'line',
            data: [
              {
                value: 0.2
              },
              {
                value: 0.1
              },
              {
                value: 0.1
              },
              {
                value: 0.6
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0.1
              },
              {
                value: 0.3
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0.9
              }
            ],
            smooth: true,
            xAxisIndex: 0,
            yAxisIndex: 0
          },
          {
            name: '饱和度',
            type: 'line',
            data: [
              {
                value: 0.1
              },
              {
                value: 0.9
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0.2
              },
              {
                value: 0.1
              },
              {
                value: 0.1
              },
              {
                value: 0
              },
              {
                value: 0.1
              },
              {
                value: 0.1
              }
            ],
            smooth: true,
            xAxisIndex: 0,
            yAxisIndex: 0
          },
          {
            name: '调用量',
            type: 'bar',
            barWidth: '10',
            data: [
              { value: 5 },
              { value: 20 },
              { value: 36 },
              { value: 10 },
              { value: 30 },
              { value: 190 },
              { value: 12 },
              { value: 23 },
              { value: 34 },
              { value: 45 },
              { value: 56 },
              { value: 67 },
              { value: 17 }
            ],

            xAxisIndex: 0,
            yAxisIndex: 1
          },
          {
            data: [
              {
                name: 'data1',
                value: 1
              }
            ],
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}',
              offset: [0, 95],
              textStyle: {
                color: '#000'
              }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '27.2727%',
            itemStyle: {
              normal: {
                color: 'rgba(134,176,237, 0)',
                borderColor: '#ccc',
                borderWidth: 0.5
              }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          {
            data: [
              {
                name: 'data2',
                value: 1
              }
            ],
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}',
              offset: [0, 95],
              textStyle: {
                color: '#000'
              }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '18.1818%',
            itemStyle: {
              normal: {
                color: 'rgba(40,191,126, 0)',
                borderColor: '#ccc',
                borderWidth: 0.5
              }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          {
            data: [
              {
                name: 'data3',
                value: 1
              }
            ],
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}',
              offset: [0, 95],
              textStyle: {
                color: '#000'
              }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '27.2727%',
            itemStyle: {
              normal: {
                color: 'rgba(237,124,47, 0)',
                borderColor: '#ccc',
                borderWidth: 0.5
              }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          {
            data: [
              {
                name: 'data4',
                value: 1
              }
            ],
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}',
              offset: [0, 95],
              textStyle: {
                color: '#000'
              }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '18.1818%',
            itemStyle: {
              normal: {
                color: 'rgba(242,169,59, 0)',
                borderColor: '#ccc',
                borderWidth: 0.5
              }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          {
            data: [
              {
                name: 'data5',
                value: 1
              }
            ],
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}',
              offset: [0, 95],
              textStyle: {
                color: '#000'
              }
            },
            type: 'bar',
            barCategoryGap: 0,
            barGap: 0,
            barWidth: '9.0909%',
            itemStyle: {
              normal: {
                color: 'rgba(249,207,54, 0',
                borderColor: '#ccc',
                borderWidth: 0.5
              }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
          }
        ]
      }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值