echarts图表x轴基准线(平行y轴)

1. 生成当前时间基准线

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
                '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
                '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00',
                '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
                '21:00', '22:00', '23:00'
            ]
    },
    yAxis: {
        type: 'value',
        /*min: 0,
        max:260,
        splitNumber:10*/
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [
                120, 132, 101, 134, 90, 230, 210,
                120, 132, 101, 134, 90, 260, 210,
                120, 132, 101, 134, 90, 230, 210,
                120, 132, 101
                ]
        },
        {
            name:'平行于y轴的趋势线',
            type:'line',
            markLine: {
            data: [[
                    {coord:[new Date().getHours(),0]},
                    {coord:[new Date().getHours(),300]}
                ]],
            label: {
                     normal: {
                        show: true,
                        position: 'end',
                        formatter: new Date().getHours()
                            },
                        },
                    }
        }
    ]
};

2. 随鼠标移动生成带箭头基准线

option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip: {
        trigger: 'axis',
        formatter:function(params,ticket,callback){
            var str1= params[0].name;
            var ymax= myChart.getModel().getComponent('yAxis').axis.scale._extent[1];//获取y轴上侧最大值,此方法获取结果为数组[y轴最小值,y轴最大值]
            var str2= params[0].name.split(" ")[0];
            option.series=s(str1,ymax,str2);
            myChart.setOption(option);
            return params[0].name+'<br>'+params[0].seriesName+":"+params[0].value;       
        }
    },
    legend: {
        data: ['邮件营销']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一 00:00', '周二 01:00', '周三 03:00', '周四 04:00', '周五 05:00', '周六 06:00', '周日 07:00'],
            axisLabel: {  
                interval: 0,  
                formatter:function(value) {  
                                debugger  
                                var str= value.substring(2, value.length);
                                return str;
                            }  
            } 
            
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 280, 210]
        },
       
    ]
};

function s(str1,ymax,str2){
    //alert(echarts.version);
    var series=[
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 280, 210]
            },
            {
                    name:'平行于y轴的趋势线',
                    type:'line',
                    markLine: {
                        //name:'cda',
                        data: [[
                            {coord:[str1,0]},
                            {coord:[str1,ymax]}
                        ]],
                        label: {
                            normal: {
                                show: true,
                                position: 'end',
                                formatter: str2
                            },
                        },
                    }
                }
        ]
        
        return series;
}

 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值