EChart ———一个柱状三个折线

效果如下
在这里插入图片描述
Y轴只显示数值不显示竖线,没有网格线

代码:

app.title = '折柱混合';

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}//保存为图片
        }
    },
    legend: {//图表标注
        data:['蒸发量','降水量','平均温度','补充1']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','','3月','','5月','','7月'],
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{show: false},//去除网格线
            
        }
    ],
    yAxis: [
        {
            axisLine:{//Y轴只显示数值不显示竖线
                show:false,
            },
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,//每份多少
            axisLabel: {
                formatter: '{value} ml'//每个刻度后面加单位
            },
            splitLine:{show: false},//去除网格线
            
        },
        {
           axisLine:{//Y轴只显示数值不显示竖线
                show:false,
            },
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            },
            splitLine:{show: false},//去除网格线
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7,33.9],
            label:{
                normal:{
                    show:true,
                    position:'top',
                },
            },
        },
        {
            name:'降水量',
            type:'line',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2],
            label:{
                normal:{
                    show:true,
                    position:'top',
                },
            },
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4]
        },
        {
            name:'补充1',
            type:'line',
            yAxisIndex: 1,
            data:[3.0, 5.2, 6.3, 5.5, 7.3, 16.2, 25.3, 24.4],
            lineStyle:{
                color:'#000'
            },
        }
    ]
};
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值