When hovering an average markLine I would like the whole series to focus while the others blur.
option = {
"grid": {
"height": "85%"
},
"legend": {
"data": [
"Series_1",
"Series_2",
"Series_3",
"Series_4",
"Series_5"
],
"x": "center",
"y": "bottom",
"icon": "roundRect",
"show": true,
"orient": "horizontal",
"itemGap": 10,
"itemWidth": 25,
"textStyle": {
"color": "#696969",
"fontSize": 12,
"fontFamily": "sans-serif",
"fontWeight": "normal"
},
"itemHeight": 14
},
"title": {
"text": "Title",
"x": "center",
"show": true,
"textStyle": {
"color": "#696969",
"fontSize": 18,
"fontFamily": "sans-serif",
"fontWeight": "bold"
},
"subtextStyle": {
"color": "#aaaaaa",
"fontSize": 12,
"fontFamily": "sans-serif",
"fontWeight": "bold"
}
},
"series": [
{
"name": "Series_1",
"data": [
{
"name": "30",
"value": "23.50",
},
{
"name": "31",
"value": "24.77",
},
{
"name": "32",
"value": "26.23",
},
{
"name": "33",
"value": "28.07",
},
{
"name": "34",
"value": "30.12",
},
{
"name": "35",
"value": "32.38",
},
{
"name": "36",
"value": "34.36",
},
{
"name": "37",
"value": "36.56",
},
{
"name": "38",
"value": "38.97",
},
{
"name": "39",
"value": "42.09",
},
{
"name": "40",
"value": "45.92",
},
{
"name": "41",
"value": "50.79",
},
{
"name": "42",
"value": "55.77",
},
{
"name": "43",
"value": "60.85",
},
{
"name": "44",
"value": "65.66",
},
{
"name": "45",
"value": "70.98",
},
{
"name": "46",
"value": "76.87",
},
{
"name": "47",
"value": "84.48",
},
{
"name": "48",
"value": "93.10",
},
{
"name": "49",
"value": "102.50",
},
{
"name": "50",
"value": "117.26",
},
{
"name": "51",
"value": "127.34",
},
{
"name": "52",
"value": "136.76",
},
{
"name": "53",
"value": "146.88",
},
{
"name": "54",
"value": "158.63",
},
{
"name": "55",
"value": "173.07",
},
{
"name": "56",
"value": "189.17",
},
{
"name": "57",
"value": "206.76",
},
{
"name": "58",
"value": "225.99",
},
{
"name": "59",
"value": "246.78",
}
],
"type": "line",
"emphasis": {
"focus": "series",
"blurScope": "coordinateSystem"
},
"markLine": {
"data": [
{
"name": "Series_1",
"type": "average",
"label": {
"position": "end",
"formatter": "{b}"
}
}
]
},
"itemStyle": {
"color": "#003366"
},
"markPoint": {}
},
{
"name": "Series_2",
"data": [
{
"name": "30",
"value": "71.50",
},
{
"name": "31",
"value": "74.32",
},
{
"name": "32",
"value": "76.20",
},
{
"name": "33",
"value": "79.02",
},
{
"name": "34",
"value": "82.78",
},
{
"name": "35",
"value": "86.55",
},
{
"name": "36",
"value": "91.25",
},
{
"name": "37",
"value": "96.90",
},
{
"name": "38",
"value": "104.43",
},
{
"name": "39",
"value": "114.78",
},
{
"name": "40",
"value": "126.07",
},
{
"name": "41",
"value": "140.18",
},
{
"name": "42",
"value": "157.11",
},
{
"name": "43",
"value": "177.80",
},
{
"name": "44",
"value": "200.38",
},
{
"name": "45",
"value": "225.79",
},
{
"name": "46",
"value": "253.07",
},
{
"name": "47",
"value": "283.19",
},
{
"name": "48",
"value": "314.23",
},
{
"name": "49",
"value": "347.16",
},
{
"name": "50",
"value": "381.98",
},
{
"name": "51",
"value": "416.78",
},
{
"name": "52",
"value": "452.54",
},
{
"name": "53",
"value": "489.24",
},
{
"name": "54",
"value": "525.93",
},
{
"name": "55",
"value": "563.59",
},
{
"name": "56",
"value": "603.10",
},
{
"name": "57",
"value": "643.57",
},
{
"name": "58",
"value": "685.92",
},
{
"name": "59",
"value": "732.01",
}
],
"type": "line",
"emphasis": {
"focus": "series",
"blurScope": "coordinateSystem"
},
"markLine": {
"data": [
{
"name": "Series_2",
"type": "average",
"label": {
"position": "end",
"formatter": "{b}"
}
}
]
},
"itemStyle": {
"color": "#448ef6"
},
"markPoint": {}
},
{
"name": "Series_3",
"data": [
{
"name": "30",
"value": "56.50",
},
{
"name": "31",
"value": "58.73",
},
{
"name": "32",
"value": "60.22",
},
{
"name": "33",
"value": "62.45",
},
{
"name": "34",
"value": "65.42",
},
{
"name": "35",
"value": "68.40",
},
{
"name": "36",
"value": "72.11",
},
{
"name": "37",
"value": "76.57",
},
{
"name": "38",
"value": "82.52",
},
{
"name": "39",
"value": "90.70",
},
{
"name": "40",
"value": "99.62",
},
{
"name": "41",
"value": "110.77",
},
{
"name": "42",
"value": "124.15",
},
{
"name": "43",
"value": "140.50",
},
{
"name": "44",
"value": "158.34",
},
{
"name": "45",
"value": "178.42",
},
{
"name": "46",
"value": "199.97",
},
{
"name": "47",
"value": "223.77",
},
{
"name": "48",
"value": "248.30",
},
{
"name": "49",
"value": "274.32",
},
{
"name": "50",
"value": "301.83",
},
{
"name": "51",
"value": "329.33",
},
{
"name": "52",
"value": "357.59",
},
{
"name": "53",
"value": "386.59",
},
{
"name": "54",
"value": "415.58",
},
{
"name": "55",
"value": "445.34",
},
{
"name": "56",
"value": "476.56",
},
{
"name": "57",
"value": "508.54",
},
{
"name": "58",
"value": "542.00",
},
{
"name": "59",
"value": "578.42",
}
],
"type": "line",
"emphasis": {
"focus": "series",
"blurScope": "coordinateSystem"
},
"markLine": {
"data": [
{
"name": "Series_3",
"type": "average",
"label": {
"position": "end",
"formatter": "{b}"
}
}
]
},
"itemStyle": {
"color": "#fdb44b"
},
"markPoint": {}
},
{
"name": "Series_4",
"data": [
{
"name": "30",
"value": "62.00",
},
{
"name": "31",
"value": "64.45",
},
{
"name": "32",
"value": "66.08",
},
{
"name": "33",
"value": "68.52",
},
{
"name": "34",
"value": "71.78",
},
{
"name": "35",
"value": "75.05",
},
{
"name": "36",
"value": "79.13",
},
{
"name": "37",
"value": "84.03",
},
{
"name": "38",
"value": "90.56",
},
{
"name": "39",
"value": "99.53",
},
{
"name": "40",
"value": "109.32",
},
{
"name": "41",
"value": "121.55",
},
{
"name": "42",
"value": "136.23",
},
{
"name": "43",
"value": "154.17",
},
{
"name": "44",
"value": "173.75",
},
{
"name": "45",
"value": "195.78",
},
{
"name": "46",
"value": "219.43",
},
{
"name": "47",
"value": "245.54",
},
{
"name": "48",
"value": "272.45",
},
{
"name": "49",
"value": "301.00",
},
{
"name": "50",
"value": "331.19",
},
{
"name": "51",
"value": "361.36",
},
{
"name": "52",
"value": "392.36",
},
{
"name": "53",
"value": "424.18",
},
{
"name": "54",
"value": "455.99",
},
{
"name": "55",
"value": "488.64",
},
{
"name": "56",
"value": "522.89",
},
{
"name": "57",
"value": "557.98",
},
{
"name": "58",
"value": "594.70",
},
{
"name": "59",
"value": "634.66",
}
],
"type": "line",
"emphasis": {
"focus": "series",
"blurScope": "coordinateSystem"
},
"markLine": {
"data": [
{
"name": "Series_4",
"type": "average",
"label": {
"position": "end",
"formatter": "{b}"
}
}
]
},
"itemStyle": {
"color": "#80ac7b"
},
"markPoint": {}
},
{
"name": "Series_5",
"data": [
{
"name": "30",
"value": "72.00",
},
{
"name": "31",
"value": "72.00",
},
{
"name": "32",
"value": "72.00",
},
{
"name": "33",
"value": "72.00",
},
{
"name": "34",
"value": "72.00",
},
{
"name": "35",
"value": "72.00",
},
{
"name": "36",
"value": "72.00",
},
{
"name": "37",
"value": "72.00",
},
{
"name": "38",
"value": "72.00",
},
{
"name": "39",
"value": "72.00",
},
{
"name": "40",
"value": "72.00",
},
{
"name": "41",
"value": "72.00",
},
{
"name": "42",
"value": "72.00",
},
{
"name": "43",
"value": "72.00",
},
{
"name": "44",
"value": "72.00",
},
{
"name": "45",
"value": "72.00",
},
{
"name": "46",
"value": "72.00",
},
{
"name": "47",
"value": "72.00",
},
{
"name": "48",
"value": "72.00",
},
{
"name": "49",
"value": "72.00",
},
{
"name": "50",
"value": "72.00",
},
{
"name": "51",
"value": "72.00",
},
{
"name": "52",
"value": "72.00",
},
{
"name": "53",
"value": "72.00",
},
{
"name": "54",
"value": "72.00",
},
{
"name": "55",
"value": "72.00",
},
{
"name": "56",
"value": "72.00",
},
{
"name": "57",
"value": "72.00",
},
{
"name": "58",
"value": "72.00",
},
{
"name": "59",
"value": "72.00",
}
],
"type": "line",
"emphasis": {
"focus": "series",
"blurScope": "coordinateSystem"
},
"markLine": {
"data": [
{
"name": "Series_5",
"type": "average",
"label": {
"position": "end",
"formatter": "{b}"
}
}
]
},
"itemStyle": {
"color": "#d04925"
},
"markPoint": {}
}
],
"toolbox": {
"show": true,
"showTitle": true,
"color": [
"#2486be",
"#2486be"
],
"x": "left",
"left": 35
},
"tooltip": {
"show": true,
"trigger": "axis",
"axisPointer": {
"type": "cross",
"label": {
"show": true,
"precision": 0,
"backgroundColor": "#2486be"
}
}
},
"yAxis": [
{
"type": "value",
"max": null,
"min": null,
"axisLine": {
"show": true,
"lineStyle": {
"type": "solid",
"color": "#aaaaaa",
"width": 1
}
},
"axisTick": {
"show": true,
"length": 5,
"lineStyle": {
"type": "solid",
"color": "#aaaaaa",
"width": 1
}
},
"axisLabel": {
"show": true,
"color": "#696969",
"margin": 8,
"fontSize": 14,
"fontStyle": "normal",
"fontFamily": "sans-serif",
"fontWeight": "bold"
},
"splitArea": {
"show": true,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
},
"splitLine": {
"show": true,
"lineStyle": {
"type": "solid",
"color": "#eee",
"width": 1
}
}
}
],
"xAxis": [
{
"type": "category",
"boundaryGap": false,
"data": [
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53",
"54",
"55",
"56",
"57",
"58",
"59"
]
}
]
}
What problem does this feature solve?
When hovering an average markLine I would like the whole series to focus while the others blur.
Equivalent to:
What does the proposed API look like?
Either add a series option to markLine emphasis like:
Or make the existing, apply to markLine and maybe even markArea and markPoint:
DEMO: