您当前的位置: 首页 >  ar

漏刻有时

暂无认证

  • 1浏览

    0关注

    717博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

Echarts实战案例代码(43):折线图中splitLine配置数据自动分组分段显示效果的解决方案

漏刻有时 发布时间:2020-10-10 09:13:06 ,浏览量:1

在这里插入图片描述

项目需求:

在折线图中,需要将数据自动以分割线分成4组,显示趋势。

解决方案:
  1. 在X轴的splitLine属性中设置 interval,解决分割线显示的问题;
  2. 前端ajax返回res.data后,将其长度平均分割成4份; var modSl = parseInt(res.data.length / 4);
  3. 将分割后的数据 modSl传递到echarts中;
实现代码:
        xAxis: {
            type: 'category',
            boundaryGap: false,
            inverse: true,
            axisLabel: {
                show: true,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,.5)'
                }
            },
            splitLine: {
                show: true,
                interval: modSl,
                lineStyle: {
                    color: '#ccc',
                    type: 'solid',
                }
            },
            data: dataName
        },

Done!

关注
打赏
1661217259
查看更多评论
立即登录/注册

微信扫码登录

0.0627s