Echarts 多轴多图实现

效果图
在这里插入图片描述
基于 echarts 5.2.2
官网原话如下:

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件,在 ECharts 3 中可以存在任意个 grid 组件。

也就是在Echarts3及以上都可以实现单个实例多个图形。

示例图源代码如下,可直接复制到echarts官网实例进行修改查看。以便明白各个属性的具体作用!Echarts官网实例

option = {
  grid: [ // 该数组的每一项代表一个图形 相当于一个x轴和y轴
  
    {
      left: '10%', // 确定图形的位置, 距离左边的偏移量
      // 有 left right bottom top 属性来设置相应的偏移量
      width: "40%" // 对应图形的宽度
      // 还有个height 属性设置图形的高度, 另外 通过设置top 和bottom 也可以控制图形的高度
    },
    {
      left: '60%',
      top:'50%',
      width: "40%"
    },
    {
      left: '60%',
      bottom: '50%',
      width: "40%",
    }
  ],
  xAxis: [ 一共有三个x轴,设置 gridIndex 表示对应 grid 数组的索引
    {
      gridIndex: 0,
      type: 'value',
    },
    {
      gridIndex: 1,
      type: 'value',
    },{
      gridIndex: 2,
      show: false
    }
  ],
  yAxis: [一共有三个y轴,设置 gridIndex 表示对应 grid 数组的索引
    {
      gridIndex: 0,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      gridIndex: 1,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      gridIndex: 2,
      show: false
    }
  ],
  series: [ // 这里需要给每一个项设置 xAxisIndex、yAxisIndex 一一对应 xAxis、yAxis
    {
       xAxisIndex:1,
       yAxisIndex:1,
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    },
    {
      xAxisIndex:0,
      yAxisIndex:0,
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    },
    {
      xAxisIndex:2,
      yAxisIndex:2,
      type: 'pie',
      center: ['75%', '25%'],
      radius: ['15%', '30%'],
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值