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
        }
      }
    }
  ]
}

喜欢可以点赞收藏

相关推荐
南茗啊3 小时前
echarts地图轮播markpoint-自用记录📝
前端·echarts
用户26124583401615 小时前
饼图数据过多时,图例分成左右两列对称展示,可滚动翻页
前端·echarts
小谭鸡米花1 天前
ECharts各类炫酷图表/3D柱形图
前端·javascript·echarts·大屏端
DataGear3 天前
DataGear 企业版 1.4.0 发布,数据可视化分析平台
javascript·信息可视化·数据分析·html·echarts·数据可视化
DataGear3 天前
DataGear 5.3.0 制作支持导出表格数据的数据可视化看板
javascript·信息可视化·数据分析·html·echarts·数据可视化
抹茶san4 天前
echarts菜鸟踩坑——inverse 反向坐标轴
前端·echarts
DDDiccc4 天前
项目-苍穹外卖(十五) Apache ECharts+数据统计
前端·apache·echarts
不会叫的狼5 天前
Echarts使用
echarts
代码or搬砖6 天前
ECharts实现数据可视化
前端·信息可视化·echarts