Echarts series line图形markLine的使用

在一些特殊场景,可能会使用到markLine标线,这个标线不同于X轴的分割线。群:922473947 示例:

上面示例中使用的图形是line,坐标系方式显示data: [[1,2],[3,4]]

官方实例中标线默认赋值是X轴index,例如一下代码

markLine: 复制代码
                symbol: 'none',
                lineStyle: {
                    type: 'solid',
                    width: 3
                },
                label: {
                    show: false
                },
                data: [{
                    name: 'Y1',
                    yAxis: 5,
                    itemStyle: {
                        color: '#000',
 
                    },
                }, {
                    name: 'X1',
                    xAxis: 5,
                    itemStyle: {
                        color: 'red'
                    },
                }, ]
            },

代码中配置的两个方向是Y轴下标5位置与X轴下标5位置,也就是说会显示在响应的下标位置,在实际应用中你markLine.data应该是遍历得到的数组,当你默认data数组的xAxis是你遍历X轴的每条数据的index,那么就是有多少条X轴类目,就显示多少条标线,但与此文要说的需求并不相同,如上面示例展示实际上是

红色与绿色标线都是使用的data[[1,2],[3,4]]作为series的data数据,在markLine中的data遍历series的data绑定的数组,然后取值绑定在markLine中data的每条xAxis的数据是series.data数据的如[0][0]也就是1。 如下面代码展示

{ 复制代码
      "name": "数据",
      "tooltip": {
        "show": false
      },
      "step": "start",
      "type": "line",
      "data": [
        [
          248,
          12.44
        ],
        [
          336,
          12.44
        ],
        [
          336,
          null
        ],
        [
          731,
          null
        ],
        [
          731,
          0.54
        ],
        [
          782,
          0.54
        ],
      ],
      "lineStyle": {
        "width": 4
      },
      "z": 998,
      "markLine": {
        "symbol": [
          "none",
          "none"
        ],
        "data": [
          {
            "xAxis": 248,
            "name": "12.44"
          },
          {
            "xAxis": 336,
            "name": "12.44"
          },
          {
            "xAxis": 336,
            "name": "null"
          },
          {
            "xAxis": 731,
            "name": "null"
          },
          {
            "xAxis": 731,
            "name": "0.54"
          },
          {
            "xAxis": 782,
            "name": "0.54"
          },
 
        ],
        "lineStyle": {
          "type": "solid",
          "width": 0.5
        },
        "label": {
          "show": false
        }
      }
    },

很显然会看到绑定的值,就能实现每个line的点位置都会出现标线。其中会看到series中的data坐标系存在null,请看第一张示例图中绿色line,可以看到存在断开,这也是需求的一部分,当然不能补空字符也可以''。反正不能为0,当然如果你的需求是线必须连着就可以补0 以下就是示例的全部代码

option 复制代码
  "title": {
    "textStyle": {
      "color": "#000",
      "fontSize": 16,
      "fontWeight": "normal"
    },
  },
  "color": [
    "#4dbb27",
    "#f14646"
  ],
  "tooltip": {
    "trigger": "axis"
  },
  "xAxis": {
    "splitLine": {
      "show": false
    }
  },
  "yAxis": {},
  "grid": {
    "top": "9%",
    "left": "8%",
    "width": "88%",
    "height": "85%"
  },
  "series": [
    {
      "name": "数据",
      "tooltip": {
        "show": false
      },
      "step": "start",
      "type": "line",
      "data": [
        [
          248,
          12.44
        ],
        [
          336,
          12.44
        ],
        [
          336,
          ''
        ],
        [
          731,
          ''
        ],
        [
          731,
          0.54
        ],
        [
          782,
          0.54
        ],
      ],
      "lineStyle": {
        "width": 4
      },
      "z": 998,
      "markLine": {
        "symbol": [
          "none",
          "none"
        ],
        "data": [
          {
            "xAxis": 248,
            "name": "12.44"
          },
          {
            "xAxis": 336,
            "name": "12.44"
          },
          {
            "xAxis": 336,
            "name": "null"
          },
          {
            "xAxis": 731,
            "name": "null"
          },
          {
            "xAxis": 731,
            "name": "0.54"
          },
          {
            "xAxis": 782,
            "name": "0.54"
          },
 
        ],
        "lineStyle": {
          "type": "solid",
          "width": 0.5
        },
        "label": {
          "show": false
        }
      }
    },
    {
      "name": "限制",
      "tooltip": {
        "show": false
      },
      "step": "start",
      "type": "line",
      "data": [
        [
          72,
          18.78
        ],
        [
          157,
          18.78
        ],
        [
          157,
          27.22
        ],
        [
          204,
          27.22
        ],
        [
          204,
          40.37
        ],
        [
          240,
          40.37
        ]
      ],
      "lineStyle": {
        "width": 4
      },
      "z": 998,
      "markLine": {
        "symbol": [
          "none",
          "none"
        ],
        "data": [
          {
            "xAxis": 72,
            "name": "18.78",
            "lineStyle": {
              "width": 0.5,
              "color": "#f14646"
            }
          },
          {
            "xAxis": 157,
            "name": "18.78",
            "lineStyle": {
              "width": 0.5,
              "color": "#f14646"
            }
          },
          {
            "xAxis": 157,
            "name": "27.22",
            "lineStyle": {
              "width": 0.5,
              "color": "#f14646"
            }
          },
          {
            "xAxis": 204,
            "name": "27.22",
            "lineStyle": {
              "width": 0.5,
              "color": "#f14646"
            }
          },
          {
            "xAxis": 204,
            "name": "40.37",
            "lineStyle": {
              "width": 0.5,
              "color": "#f14646"
            }
          },
          {
            "xAxis": 240,
            "name": "40.37",
            "lineStyle": {
              "width": 0.5,
              "color": "#f14646"
            }
          }
        ],
        "lineStyle": {
          "type": "solid",
          "width": 0.5
        },
        "label": {
          "show": false
        }
      }
    }
  ]
}

喜欢可以点赞收藏

相关推荐
Danny_FD2 小时前
ECharts中的markPoint使用,最大值,最小值,展示label数值
前端·echarts
雪梅零落2 小时前
Echart 地图放大缩小
echarts
图表制作解说(目标1000个图表)7 小时前
ECharts散点图-散点图14,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·大屏可视化
三天不学习1 天前
基于 Vue3 + ECharts + GeoJson 实现区域地图钻取功能详解
前端·javascript·echarts·geojson·区域地图·钻地图
dasseinzumtode1 天前
ECharts tooltip 为 axis时, markPoint标点悬浮值内容
vue.js·echarts
答案answer1 天前
如何在three.js三维场景中添加echarts图表组件
前端·echarts·three.js
微笑边缘的金元宝4 天前
Echarts柱状图斜线环纹(图形的贴花图案)
前端·javascript·echarts
图表制作解说(目标1000个图表)5 天前
ECharts散点图-散点图5,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·图表·大屏可视化
JYeontu5 天前
echarts绘制一个名山地图
前端·javascript·echarts
夜猫的兔子10 天前
微信小程序中使用ECharts 并且动态设置数据
微信小程序·小程序·echarts