ecahrt 多个图在一个界面中展示的画法

我是在官网的例子进行修改的,大家可以直接把代码粘贴进去就可以看了在这里插入图片描述



option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    grid: [
                  //0降雨
                  {x: '7%', y: '7%', height: '20%', left: '10%'},
                  //1水位流量
                  {x: '7%', y2: '7%',top:"middle", height: '20%', left: '10%',},
                
                  {x: '7%', y3: '7%', height: '20%', left: '10%',bottom:'10%' }
                ],

    legend: {
        data:['蒸发量','平均温度','蒸发量1','平均温度1','蒸发量2','平均温度2']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            }
        },{
            type: 'category',
            gridIndex: 1,//对应前面grid的索引位置(第2个)
            axisTick: {
                    alignWithLabel: true
                },
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            }
        },
        {
            type: 'category',
            gridIndex: 2,//对应前面grid的索引位置(第3个)
            axisTick: {
                    alignWithLabel: true
            },
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
   ],
    yAxis: [
        {
            type: 'value',
            name: '蒸发量',
            gridIndex: 0,
             splitLine: {show: false},
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '平均温度',
            gridIndex: 0,
            splitLine: {show: false},
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        {
            type: 'value',
            name: '蒸发量1',
            gridIndex:1,
             splitLine: {show: false},
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '平均温度1',
            gridIndex: 1,
            splitLine: {show: false},
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        {
            type: 'value',
            name: '蒸发量2',
            gridIndex:2,
             splitLine: {show: false},
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '平均温度2',
            gridIndex: 2,
            splitLine: {show: false},
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            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:'平均温度',
            type:'line',
            xAxisIndex: 0,
            yAxisIndex: 1,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        },{
            name:'蒸发量1',
            type:'line',
             xAxisIndex: 1,
            yAxisIndex: 2,
            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:'平均温度1',
            type:'line',
            xAxisIndex: 1,
            yAxisIndex: 3,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        },{
            name:'蒸发量2',
            type:'line',
             xAxisIndex: 2,
             yAxisIndex: 4,
            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:'平均温度2',
            type:'line',
             xAxisIndex: 2,
            yAxisIndex: 5,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值