Echarts-阶梯折线堆叠图 - x、y轴动态获取

详情请参考： Echarts官网

最终样式

数据格式

"data": [
          [467,-42],
          [470,-67],
          [670,-47],
          [685,-42],
          [737.5,-57],
          [742.5,-42],
          [747.5,-42],
          [752.5,-62],
          [757.5,-92],
          [788,-62],
          [791,-92],
          [821,-42],
          [852,-82],
          [894,-42],
          [915,-42],
         ],

后台处理数据时，结果值须为[x,y]这种形式。只传一个值且xAxis和yAxis的type都为value时，会默认为x,y轴相等，就会出现下图中的情况。

Echarts配置

option={
    "title": {
        "text": "title",//标题
        "subtext": "subtext"//子标题
    },
    "tooltip": {//提示框组件
        "trigger": "axis" 
        //触发类型：
        //'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        //'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
        //'none'：什么都不触发。
    },
    "legend": {},//图例组件
    "grid": {//直角坐标系内绘图网格
        "left": "3%",//grid 组件离容器左侧的距离。
        "right": "8%",//grid 组件离容器右侧的距离。
        "bottom": "3%",//grid 组件离容器下侧的距离。
        "top": "18%",//grid 组件离容器上侧的距离。
        "containLabel": true//grid 区域是否包含坐标轴的刻度标签。
    },
    "dataZoom": [//区域缩放
        //内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
        //滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
        //框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。
        {
            "type": "inside",
            "xAxisIndex": [0],
            "filterMode": "none"
        },
        {
            "type": "slider",
            "xAxisIndex": [0],
            "filterMode": "none"
        },
         {
            "type": "inside",
            "yAxisIndex": [0],
            "filterMode": "none"
        },
        {
            "type": "slider",
            "yAxisIndex": [0],
            "filterMode": "none"
        }
    ],
    "toolbox": {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
        "show": true,
        "feature": {//各工具配置项。
            "dataView": {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                "show": true,
                "readOnly": true
            },
            "restore": {//配置项还原。
                "show": true
            },
            "saveAsImage": {//保存为图片。
                "show": true
            }
        }
    },
    "xAxis": {//直角坐标系 grid 中的 x 轴
        "name": "x",
        "type": "value" 
        //坐标轴类型。
        //'value' 数值轴，适用于连续数据。
        //'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
        //'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
        //'log' 对数轴。适用于对数数据。
    },
    "yAxis": {//直角坐标系 grid 中的 y 轴
        "name": "y",
        "type": "value"
    },
    "series": [
        {
            "type": "line",//折线图
            "name": "standard",
            "data": [
                // 第一列对应 X 轴，第二列对应 Y 轴。
                [467.6,-42],
                [470,-67],
                [670,-47],
                [685,-42],
                [737.5,-57],
                [742.5,-42],
                [747.5,-42],
                [752.5,-62],
                [757.5,-92],
                [788,-62],
                [791,-92],
                [821,-42],
                [852,-82],
                [894,-42],
                [915,-42],
            ],
            "step": "end",//是否是阶梯线图
            "symbol": 'none'//标记的图形。
        },
        {
            "type": "line",
            "name": "line1",
            "data": [
                [425,-141.85],
                [445.1,-136.75],
                [464,-134.10],
                [468.8,-137.65],
                [570.25,-110.44],
                [677.75,-64.66],
                [691.75,-45.81],
                [740.25,-76.16],
                [745.25,-90.51],
                [750.25,-101.63],
                [755.25,-108.40],
                [772.75,-111.24],
                [789.5,-120.83],
                [806,-118.06],
                [836.5,-129.07],
            ],
            "smooth": true,//是否平滑曲线显示。
            "lineStyle": {//线条样式。
                "width": 1
            }
        },
        {
            "type": "line",
            "name": "line2",
            "data": [
                [425,-116.34],
                [445.1,-115.82],
                [464,-114.72],
                [468.8,-115.71],
                [570.25,-102.58],
                [677.75,-62.86],
                [691.75,-43.91],
                [740.25,-69.68],
                [745.25,-80.57],
                [750.25,-93.75],
                [755.25,-102.20],
                [772.75,-103.89],
                [789.5,-111.05],
                [806,-108.60],
                [836.5,-111.97],
            ],
            "smooth": true,
            "lineStyle": {
                "width": 1
            }
        }
    ]
}