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

喜欢可以点赞收藏

相关推荐
码上暴富1 天前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
懒大王95271 天前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
小谭鸡米花2 天前
uni小程序中使用Echarts图表
前端·小程序·echarts
@AfeiyuO4 天前
分类别柱状图(Vue3)
typescript·vue·echarts
Pu_Nine_94 天前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
小白_ysf4 天前
uniapp和vue3项目中引入echarts 、lime-echart(微信小程序、H5等)
微信小程序·uni-app·echarts·h5·lime-echart
Chan165 天前
【智能协同云图库】基于统一接口架构构建多维度分析功能、结合 ECharts 可视化与权限校验实现用户 / 管理员图库统计、通过 SQL 优化与流式处理提升数据
java·spring boot·后端·sql·spring·intellij-idea·echarts
zhangzuying10265 天前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
java水泥工7 天前
基于Echarts+HTML5可视化数据大屏展示-学生综合成绩评价系统大屏
spring boot·echarts·html5
java水泥工8 天前
基于Echarts+HTML5可视化数据大屏展示-茶叶种植大数据溯源平台
大数据·echarts·html5