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

喜欢可以点赞收藏

相关推荐
魔都吴所谓19 小时前
【Echarts】 电影票房汇总实时数据横向柱状图比图
javascript·ecmascript·echarts
JosieBook2 天前
【web应用】若依框架中,使用Echarts导出报表为PDF文件
前端·pdf·echarts
小彭努力中3 天前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
姜太小白4 天前
【ECharts】多个ECharts版本共存解决方案
前端·javascript·echarts
患得患失9495 天前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
zhaocarbon6 天前
vue2 echarts中国地图、在地图上标注经纬度及标注点
前端·javascript·echarts
白白李媛媛6 天前
vue3中实现echarts打印功能
前端·vue.js·echarts
Hexene...7 天前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
晓得迷路了9 天前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
徊忆羽菲9 天前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts