echarts yAxis.type设置为log,某条折线数据为0时折线图显示不正常

        原本将echarts yAxis.type设置为log是为了解决几条折线图数据差距较大时,折线重合展示的问题,结果发现在某条折线数据为0时,折线图显示不正常了:

        产生问题的原因是:

        yAxis.type = 'log'的时候,为对数解析方式,y轴坐标皆默认为10的对数方式展示,而10的对数不能为0。所以在初始化数据有0的情况下,需要换个思路。

        解决方式:

        将为0的数据遍历修改为0.1:

const newList = list.map(item => {
    if(item.value== 0) {
        item.value= 0.1;
    }
    return item;
});

        再到tooltip中自定义formatter,将0.1改变为0:

params.map((item, index) => {
    if(item.value == 0.1) {
        item.value = 0;
    }
    ...
});

        解决后的折线图显示如下:

 

要使用ECharts绘制天气预报折线图,可以通过Ajax获取数据,然后使用ECharts的API绘制折线图。以下是一个示例代码,可以根据你的实际需求进行修改: ```javascript // 初始化折线图 var chart = echarts.init(document.getElementById('weather-chart')); // 发送Ajax请求获取数据 $.ajax({ type: 'GET', url: 'https://query.asilu.com/weather/baidu', dataType: 'json', success: function(data) { // 处理数据 var days = []; var highs = []; var lows = []; for (var i = 0; i < data.length; i++) { var day = data[i].date.substring(5); var high = parseInt(data[i].high.substr(3)); var low = parseInt(data[i].low.substr(3)); days.push(day); highs.push(high); lows.push(low); } // 设置折线图的配置项 var option = { title: { text: '天气预报', left: 'center' }, xAxis: { type: 'category', data: days }, yAxis: { type: 'value', min: Math.min.apply(null, lows) - 5, max: Math.max.apply(null, highs) + 5 }, series: [{ data: highs, type: 'line', name: '最高气温' }, { data: lows, type: 'line', name: '最低气温' }] }; // 使用配置项绘制折线图 chart.setOption(option); }, error: function(xhr, status, error) { console.log(error); } }); ``` 在上面的代码中,使用了jQuery的ajax函数发送了一个GET请求,获取了天气预报数据。然后,处理数据,将日期、最高气温和最低气温分别存放在三个数组中。接着,根据数据设置折线图的配置项,并使用ECharts的API绘制折线图。最后,将折线图显示在页面上。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值