折柱混合 yAxisIndex指定第二条y轴

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
      tooltip: {     ||提示框
    trigger: 'axis', ||轴触发,axis鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据
    axisPointer: {   ||坐标轴指示器,坐标轴触发有效
      type: 'cross', ||默认为line,line直线,cross十字准星,shadow阴影
      crossStyle: {  ||为 'cross' 时有效。
        color: '#999' ||线的颜色
      }
    }
  },
  toolbox: {   ||工具栏
    feature: { ||工具配置项
      dataView: { show: true, readOnly: false }, ||数据视图工具
      magicType: { show: true, type: ['line', 'bar'] }, ||动态类型切换工具
      restore: { show: true }, ||配置项还原工具
      saveAsImage: { show: true } ||保存图片工具
    }
  },
  legend: { ||图例
    data: ['tuli1', 'tuli2', 'tuli3', 'tuli4']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {   ||设置X轴上的指示器
        type: 'shadow' ||'shadow' 阴影指示器 'none' 无指示器 'line' 直线指示器
      }
    }
  ],
  yAxis: [
    {                 ||第一条Y轴,索引为0
      type: 'value',
      name: '深度',    ||坐标轴名称
      min: 0,          ||坐标轴刻度最小值
      max: 250,        ||度最大值
      interval: 50,    ||强制设置坐标轴分割间隔
      axisLabel: {     ||坐标轴刻度标签的相关设置
        formatter: '{value} ml' ||刻度标签的内容格式器,支持字符串模板和回调函数
      }
    },
    {               ||第二条Y轴 索引为1
      type: 'value',
      name: '温度',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'tuli1',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: 'tuli2',
      type: 'bar',
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 90.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: 'tuli3',
      type: 'bar',
      data: [2.6, 0, 9.0, 90.7, 70.7, 0, 190.2, 48.7, 0, 6.0, 2.3]
    },
    {
      name: 'tuli4',
      type: 'line',
      yAxisIndex: 1, ||因为有2条Y轴,这个属性可以让这条数据以索引1的Y轴为准yAxis:[{},{这个}]。默认值是0
      data: [2.0, 2.2, 3.3, 10.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};

option && myChart.setOption(option);

这样的

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值