使用echarts.js实现折线图，实现x轴可以滑动

旧巷幽草{香

已于 2022-07-20 15:34:26 修改

阅读量3.4k

点赞数

分类专栏： HTML js 文章标签： echarts javascript

于 2022-07-20 15:05:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38181746/article/details/125892205

版权

ECharts 折线图 x轴滑动数据展示动态加载

关键词由优快云通过智能技术生成

HTML 同时被 2 个专栏收录

13 篇文章

订阅专栏

13 篇文章

订阅专栏

本文介绍了如何使用ECharts在折线图中实现x轴滑动功能，以便在数据量大时展示一段时间内的数据。通过设置dataZoom组件，可以控制图表的滚动范围，提供更好的数据浏览体验。示例代码展示了如何配置ECharts选项，并结合AJAX获取数据，动态更新图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echart折线图，x轴滑动

在使用echart开发折线图，因为x轴的展示数据太多，想默认展示一段时间的数据
在这里插入图片描述

<div id="flowDay" class="index_height index_width" style="width: 1100px; height: 560px"></div>

var dayFlowEcharts = echarts.init(document.getElementById('flowDay'));
    dayFlowEcharts.setOption(optionTemp);
    getDayFlow(dayFlowEcharts, listData.iotMsisdn);

function getDayFlow(dayFlowEcharts, iotMsisdn) {
    $.ajax({
        url: pjUrl + "iot/cardDetail/flowDay",
        dataType: 'json',
        contentType: "application/json",
        type: 'post',
        xhrFields: {
            withCredentials: true
        },
        data: JSON.stringify({"iotMsisdn": iotMsisdn}),
        success: function (data) {
            if (data.status == "200") {
                if (data.data && data.data != null && data.data.length > 0) {
                    var num = 0.000
                    var legendData = []
                    var cateData = []
                    data.data.forEach(item => {
                        legendData.push(item.flow)
                        cateData.push(item.time)
                    });
                    legendData.forEach(item => {
                        num = (num + parseInt(item))
                    });
                    dayFlowEcharts.setOption({
                        title: {text: '总计：' + num + '(MB)'},
                        xAxis: {data: cateData},
                        series: [{data: legendData}]
                    });
                }
            }
        },
        error: function (d) {
            closeIndexPopUp(index_user_load);
            alertErrorMsg("基础信息初始化失败，请重试");
        }
    });
}

/**
 * 卡详情 折线图
 */
var optionTemp = {
    title: {
        text: '总计：' + 0 + '(MB)'
    },
    tooltip: {
        trigger: 'axis'
    },
    color: '#2db7f5',
    grid: {
        left: '5%',
        right: '3%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        data: ['2020-01']
    },
    yAxis: {
        name: '使用量(MB)',
        type: 'value',
        // axisLine: {
        //     lineStyle: {
        //         // 设置y轴颜色
        //         color: '#c9c9c9'
        //     }
        // },
    },
    dataZoom: [{
        type: 'inside',
        start: 40,
        end: 100
    }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '100%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 4,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    series: [
        {
            name: '使用量(MB)',
            type: 'line',
            stack: '总量',
            data: [0],
            symbolSize: 8,
            itemStyle: {
                normal: {
                    // 拐点上显示数值
                    label: {
                        show: true
                    },
                    borderColor: '#2db7f5',  // 拐点边框颜色
                    lineStyle: {
                        width: 5,  // 设置线宽
                        type: 'solid'  //'dotted'虚线 'solid'实线
                    }
                }
            }
        }
    ]
}