vue echarts 线形 line x轴年月日时间换行问题

在这里插入图片描述

options:{
                title: {
                    // text: '考试次数34次'
                     text: '考试次数0次'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (datas) {
                        console.log(datas)
                        var res = datas
                        let ret = ''
                        res.forEach((itm, idx) => { //这自定义是为了处理百分号
                            ret +=
                                `<div class="line">${datas[idx].marker}${itm.seriesName} ${itm.data}<span>%</span></div>`
                        })
                        return `<div>${datas[0].axisValue}</div>${ret}`
                    }
                },
                legend: {
                    data: ['最高正确率', '平均正确率', '最低正确率'],
                    right: 40,
                    top: 30,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    splitLine:{
                            lineStyle: {
                                // color: ['red', 'green'],  // 设置网格线颜色
                                width: 1, // 设置网格线宽度
                                type: 'solid' //设置线的类型 虚线(dashed)、实线(solid)
                            },
                        show:true//加不加网格
                    },
                    data: [],
                    axisLabel : {
                        interval : 0,
                        formatter : function(params){ //x轴时间换行问题
                            var newParamsName = "";
                            var paramsNameNumber = params.length;
                            var provideNumber =11;
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = params;
                            }
                            return newParamsName
                        }

                    }
                },
                yAxis: {
                    type: 'value',
                    // splitLine:{
                    //     show:true
                    // }
                },
                series: [
                    {
                        name: '最高正确率',
                        type: 'line',
                        stack: '总量',
                        data: ["111撒啊"]
                    },
                    {
                        name: '平均正确率',
                        type: 'line',
                        stack: '总量',
                        data: []
                    },
                    {
                        name: '最低正确率',
                        type: 'line',
                        stack: '总量',
                        data: []
                    },
                ]
            }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端代码の搬运工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值