aaaecharts 配置项内容和展示
配置项如下
option = {
"color": [
"#0072FF",
"#25B56F",
"#FF5947",
"#92D0FC"
],
"areaStyle": {
"color": "#E5F1FF"
},
"gradientColor": [
"#f6efa6",
"#d88273",
"#bf444c"
],
"textStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontStyle": "normal",
"fontWeight": "normal"
},
"animation": "auto",
"animationDuration": 1000,
"animationDurationUpdate": 300,
"animationEasing": "exponentialOut",
"animationEasingUpdate": "cubicOut",
"animationThreshold": 2000,
"progressiveThreshold": 3000,
"progressive": 400,
"hoverLayerThreshold": 3000,
"useUTC": false,
"axisPointer": [
{
"show": "auto",
"triggerOn": null,
"zlevel": 0,
"z": 50,
"type": "line",
"snap": false,
"triggerTooltip": true,
"value": null,
"status": null,
"link": [],
"animation": null,
"animationDurationUpdate": 200,
"lineStyle": {
"color": "#aaa",
"width": 1,
"type": "solid"
},
"shadowStyle": {
"color": "rgba(150,150,150,0.3)"
},
"label": {
"show": true,
"formatter": null,
"precision": "auto",
"margin": 3,
"color": "#fff",
"padding": [
5,
7,
5,
7
],
"backgroundColor": "auto",
"borderColor": null,
"borderWidth": 0,
"shadowBlur": 3,
"shadowColor": "#aaa"
},
"handle": {
"show": false,
"icon": "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",
"size": 45,
"margin": 50,
"color": "#333",
"shadowBlur": 3,
"shadowColor": "#aaa",
"shadowOffsetX": 0,
"shadowOffsetY": 2,
"throttle": 40
}
}
],
"yAxis": [
{
"type": "value",
"axisLine": {
"show": false,
"onZero": true,
"onZeroAxisIndex": null,
"lineStyle": {
"color": "#333",
"width": 1,
"type": "solid"
},
"symbol": [
"none",
"none"
],
"symbolSize": [
10,
15
]
},
"axisTick": {
"show": false,
"inside": false,
"length": 5,
"lineStyle": {
"width": 1
}
},
"axisLabel": {
"color": "#9A9CA2",
"show": true,
"inside": false,
"rotate": 0,
"showMinLabel": null,
"showMaxLabel": null,
"margin": 8,
"fontSize": 12
},
"splitLine": {
"show": true,
"lineStyle": {
"color": "#E6EEFA",
"width": 1,
"type": "dashed"
}
},
"boundaryGap": [
0,
0
],
"splitNumber": 5,
"show": true,
"zlevel": 0,
"z": 0,
"inverse": false,
"name": "",
"nameLocation": "end",
"nameRotate": null,
"nameTruncate": {
"maxWidth": null,
"ellipsis": "...",
"placeholder": "."
},
"nameTextStyle": {},
"nameGap": 15,
"silent": false,
"triggerEvent": false,
"tooltip": {
"show": false
},
"axisPointer": {},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
},
"offset": 0,
"rangeEnd": null,
"rangeStart": null
}
],
"xAxis": [
{
"type": "category",
"boundaryGap": false,
"data": [
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:16",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17",
"12:17"
],
"axisTick": {
"show": false,
"alignWithLabel": false,
"interval": "auto",
"inside": false,
"length": 5,
"lineStyle": {
"width": 1
}
},
"axisLabel": {
"color": "#9A9CA2",
"interval": "auto",
"show": true,
"inside": false,
"rotate": 0,
"showMinLabel": null,
"showMaxLabel": null,
"margin": 8,
"fontSize": 12
},
"axisLine": {
"onZero": true,
"lineStyle": {
"color": "#F0F4FA",
"width": 1,
"type": "solid"
},
"show": true,
"onZeroAxisIndex": null,
"symbol": [
"none",
"none"
],
"symbolSize": [
10,
15
]
},
"deduplication": null,
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#ccc"
],
"width": 1,
"type": "solid"
}
},
"show": true,
"zlevel": 0,
"z": 0,
"inverse": false,
"name": "",
"nameLocation": "end",
"nameRotate": null,
"nameTruncate": {
"maxWidth": null,
"ellipsis": "...",
"placeholder": "."
},
"nameTextStyle": {},
"nameGap": 15,
"silent": false,
"triggerEvent": false,
"tooltip": {
"show": false
},
"axisPointer": {
"status": "hide",
"value": 42
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
},
"offset": 0,
"rangeEnd": null,
"rangeStart": null
}
],
"grid": [
{
"left": 30,
"right": 0,
"bottom": 55,
"top": 22,
"show": false,
"zlevel": 0,
"z": 0,
"containLabel": false,
"backgroundColor": "rgba(0,0,0,0)",
"borderWidth": 1,
"borderColor": "#ccc"
}
],
"series": [
{
"showSymbol": false,
"showAllSymbol": false,
"symbolSize": 6,
"emphasis": {
"itemStyle": {
"color": "#0072FF",
"borderColor": "#fff",
"borderWidth": 2
},
"label": {}
},
"smooth": true,
"type": "line",
"areaStyle": {
"opacity": 0.1
},
"name": "视频发送码率",
"data": [
18,
53,
31,
21,
56,
34,
22,
32,
22,
57,
12,
28,
42,
32,
37,
35,
22,
26,
44,
31,
36,
34,
27,
13,
18,
14,
12,
14,
29,
22,
26,
23,
30,
31,
33,
34,
34,
36,
55,
22,
22,
22,
10
],
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"hoverAnimation": true,
"clipOverflow": true,
"label": {
"position": "top"
},
"lineStyle": {
"width": 2,
"type": "solid"
},
"step": false,
"smoothMonotone": null,
"symbol": "emptyCircle",
"symbolRotate": null,
"connectNulls": false,
"sampling": "none",
"animationEasing": "linear",
"progressive": 0,
"hoverLayerThreshold": null
},
{
"showSymbol": false,
"showAllSymbol": false,
"symbolSize": 6,
"emphasis": {
"itemStyle": {
"color": "#26B56F",
"borderColor": "#fff",
"borderWidth": 2
},
"label": {}
},
"smooth": true,
"type": "line",
"areaStyle": {
"opacity": 0.1
},
"name": "音频发送码率",
"data": [
-28,
-33,
-11,
-31,
-11,
-24,
-22,
-32,
-32,
-57,
-19,
-28,
-52,
-30,
-17,
-25,
-29,
-26,
-24,
-30,
-26,
-28,
-37,
-23,
-28,
-24,
-22,
-24,
-59,
-42,
-36,
-33,
-40,
-41,
-33,
-34,
-34,
-36,
-55,
-22,
-22,
-22,
0
],
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"hoverAnimation": true,
"clipOverflow": true,
"label": {
"position": "top"
},
"lineStyle": {
"width": 2,
"type": "solid"
},
"step": false,
"smoothMonotone": null,
"symbol": "emptyCircle",
"symbolRotate": null,
"connectNulls": false,
"sampling": "none",
"animationEasing": "linear",
"progressive": 0,
"hoverLayerThreshold": null
},
{
"showSymbol": false,
"showAllSymbol": false,
"symbolSize": 6,
"emphasis": {
"itemStyle": {
"color": "#FFA800",
"borderColor": "#fff",
"borderWidth": 2
},
"label": {}
},
"smooth": true,
"type": "line",
"areaStyle": {
"opacity": 0.1
},
"name": "卡顿率",
"data": [],
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"hoverAnimation": true,
"clipOverflow": true,
"label": {
"position": "top"
},
"lineStyle": {
"width": 2,
"type": "solid"
},
"step": false,
"smoothMonotone": null,
"symbol": "emptyCircle",
"symbolRotate": null,
"connectNulls": false,
"sampling": "none",
"animationEasing": "linear",
"progressive": 0,
"hoverLayerThreshold": null
}
],
"markArea": [
{
"zlevel": 0,
"z": 1,
"tooltip": {
"trigger": "item"
},
"animation": false,
"label": {
"show": true,
"position": "top"
},
"itemStyle": {
"borderWidth": 0
},
"emphasis": {
"label": {
"show": true,
"position": "top"
}
}
}
],
"markLine": [
{
"zlevel": 0,
"z": 5,
"symbol": [
"circle",
"arrow"
],
"symbolSize": [
8,
16
],
"precision": 2,
"tooltip": {
"trigger": "item"
},
"label": {
"show": true,
"position": "end"
},
"lineStyle": {
"type": "dashed"
},
"emphasis": {
"label": {
"show": true
},
"lineStyle": {
"width": 3
}
},
"animationEasing": "linear"
}
],
"markPoint": [
{
"zlevel": 0,
"z": 5,
"symbol": "pin",
"symbolSize": 50,
"tooltip": {
"trigger": "item"
},
"label": {
"show": true,
"position": "inside"
},
"itemStyle": {
"borderWidth": 2
},
"emphasis": {
"label": {
"show": true
}
}
}
],
"marker": [],
"visualMap": [
{
"dimension": 0,
"seriesIndex": 0,
"type": "piecewise",
"show": false,
"pieces": [
{
"gt": 0,
"lte": 1,
"color": "#a00000"
},
{
"gt": 1,
"lte": 2,
"color": "#a00000"
},
{
"gt": 13,
"lte": 14,
"color": "#a00000"
},
{
"gt": 14,
"lte": 15,
"color": "#a00000"
},
{
"gt": 15,
"lte": 16,
"color": "#a00000"
},
{
"gt": 16,
"lte": 17,
"color": "#a00000"
},
{
"gt": 23,
"lte": 24,
"color": "#a00000"
},
{
"gt": 24,
"lte": 25,
"color": "#a00000"
},
{
"gt": 25,
"lte": 26,
"color": "#a00000"
},
{
"gt": 26,
"lte": 27,
"color": "#a00000"
}
],
"outOfRange": {
"color": [
"#0072FF"
],
"symbolSize": [
0
]
},
"zlevel": 0,
"z": 4,
"min": 0,
"max": 200,
"inRange": null,
"left": 0,
"right": null,
"top": null,
"bottom": 0,
"itemWidth": 20,
"itemHeight": 14,
"inverse": false,
"orient": "vertical",
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "#ccc",
"contentColor": "#5793f3",
"inactiveColor": "#aaa",
"borderWidth": 0,
"padding": 5,
"textGap": 10,
"precision": 0,
"color": null,
"formatter": null,
"text": null,
"textStyle": {
"color": "#333"
},
"selected": {
"0": true,
"1": true,
"2": true,
"3": true,
"4": true,
"5": true,
"6": true,
"7": true,
"8": true,
"9": true
},
"minOpen": false,
"maxOpen": false,
"align": "auto",
"itemSymbol": "roundRect",
"pieceList": null,
"categories": null,
"splitNumber": 5,
"selectedMode": "multiple",
"itemGap": 10,
"hoverLink": true,
"showLabel": null,
"target": {
"inRange": {
"color": [
"#f6efa6",
"#d88273",
"#bf444c"
]
},
"outOfRange": {
"color": [
"#0072FF"
],
"symbolSize": [
0
]
}
},
"controller": {
"inRange": {
"color": [
"#f6efa6",
"#d88273",
"#bf444c"
],
"symbol": [
"roundRect"
],
"symbolSize": [
10
]
},
"outOfRange": {
"color": [
"#0072FF"
],
"symbolSize": [
10
],
"symbol": [
"roundRect"
]
}
}
},
{
"dimension": 0,
"seriesIndex": 1,
"type": "piecewise",
"show": false,
"pieces": [
{
"gt": 0,
"lte": 1,
"color": "#a00000"
},
{
"gt": 1,
"lte": 2,
"color": "#a00000"
},
{
"gt": 13,
"lte": 14,
"color": "#a00000"
},
{
"gt": 14,
"lte": 15,
"color": "#a00000"
},
{
"gt": 15,
"lte": 16,
"color": "#a00000"
},
{
"gt": 16,
"lte": 17,
"color": "#a00000"
},
{
"gt": 23,
"lte": 24,
"color": "#a00000"
},
{
"gt": 24,
"lte": 25,
"color": "#a00000"
},
{
"gt": 25,
"lte": 26,
"color": "#a00000"
},
{
"gt": 26,
"lte": 27,
"color": "#a00000"
}
],
"outOfRange": {
"color": [
"#25B56F"
],
"symbolSize": [
0
]
},
"zlevel": 0,
"z": 4,
"min": 0,
"max": 200,
"inRange": null,
"left": 0,
"right": null,
"top": null,
"bottom": 0,
"itemWidth": 20,
"itemHeight": 14,
"inverse": false,
"orient": "vertical",
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "#ccc",
"contentColor": "#5793f3",
"inactiveColor": "#aaa",
"borderWidth": 0,
"padding": 5,
"textGap": 10,
"precision": 0,
"color": null,
"formatter": null,
"text": null,
"textStyle": {
"color": "#333"
},
"selected": {
"0": true,
"1": true,
"2": true,
"3": true,
"4": true,
"5": true,
"6": true,
"7": true,
"8": true,
"9": true
},
"minOpen": false,
"maxOpen": false,
"align": "auto",
"itemSymbol": "roundRect",
"pieceList": null,
"categories": null,
"splitNumber": 5,
"selectedMode": "multiple",
"itemGap": 10,
"hoverLink": true,
"showLabel": null,
"target": {
"inRange": {
"color": [
"#f6efa6",
"#d88273",
"#bf444c"
]
},
"outOfRange": {
"color": [
"#25B56F"
],
"symbolSize": [
0
]
}
},
"controller": {
"inRange": {
"color": [
"#f6efa6",
"#d88273",
"#bf444c"
],
"symbol": [
"roundRect"
],
"symbolSize": [
10
]
},
"outOfRange": {
"color": [
"#25B56F"
],
"symbolSize": [
10
],
"symbol": [
"roundRect"
]
}
}
}
],
"dataZoom": [
{
"show": false,
"realtime": true,
"start": 0,
"end": 100,
"throttle": 500,
"height": 10,
"bottom": "15%",
"textStyle": {
"color": "#fff0",
"textBorderColor": "#fff0"
},
"zlevel": 0,
"z": 4,
"orient": "horizontal",
"xAxisIndex": [
0
],
"yAxisIndex": [],
"filterMode": "filter",
"startValue": 0,
"endValue": 42,
"minSpan": null,
"maxSpan": null,
"minValueSpan": null,
"maxValueSpan": null,
"rangeMode": null,
"right": "ph",
"width": "ph",
"left": null,
"backgroundColor": "rgba(47,69,84,0)",
"dataBackground": {
"lineStyle": {
"color": "#2f4554",
"width": 0.5,
"opacity": 0.3
},
"areaStyle": {
"color": "rgba(47,69,84,0.3)",
"opacity": 0.3
}
},
"borderColor": "#ddd",
"fillerColor": "rgba(167,183,204,0.4)",
"handleIcon": "M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z",
"handleSize": "100%",
"handleStyle": {
"color": "#a7b7cc"
},
"labelPrecision": null,
"labelFormatter": null,
"showDetail": true,
"showDataShadow": "auto",
"zoomLock": false,
"zAxisIndex": [],
"radiusAxisIndex": [],
"angleAxisIndex": [],
"singleAxisIndex": []
},
{
"type": "inside",
"zoomLock": true,
"realtime": true,
"start": 0,
"end": 100,
"zlevel": 0,
"z": 4,
"orient": "horizontal",
"xAxisIndex": [
0
],
"yAxisIndex": [],
"filterMode": "filter",
"throttle": 100,
"startValue": 0,
"endValue": 42,
"minSpan": null,
"maxSpan": null,
"minValueSpan": null,
"maxValueSpan": null,
"rangeMode": null,
"disabled": false,
"zoomOnMouseWheel": true,
"moveOnMouseMove": true,
"moveOnMouseWheel": false,
"preventDefaultMouseMove": true,
"zAxisIndex": [],
"radiusAxisIndex": [],
"angleAxisIndex": [],
"singleAxisIndex": []
}
],
"brush": [],
"legend": [
{
"selectedMode": false,
"bottom": "-6",
"icon": "circle",
"type": "scroll",
"itemGap": 32,
"itemHeight": 8,
"textStyle": {
"color": "#6F7078"
},
"data": [
"视频发送码率",
"音频发送码率",
"卡顿率"
],
"zlevel": 0,
"z": 4,
"show": true,
"orient": "horizontal",
"left": "center",
"top": null,
"align": "auto",
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "#ccc",
"borderRadius": 0,
"borderWidth": 0,
"padding": 5,
"itemWidth": 25,
"inactiveColor": "#ccc",
"tooltip": {
"show": false
},
"scrollDataIndex": 0,
"pageButtonItemGap": 5,
"pageButtonGap": null,
"pageButtonPosition": "end",
"pageFormatter": "{current}/{total}",
"pageIcons": {
"horizontal": [
"M0,0L12,-10L12,10z",
"M0,0L-12,-10L-12,10z"
],
"vertical": [
"M0,0L20,0L10,-20z",
"M0,0L20,0L10,20z"
]
},
"pageIconColor": "#2f4554",
"pageIconInactiveColor": "#aaa",
"pageIconSize": 15,
"pageTextStyle": {
"color": "#333"
},
"animationDurationUpdate": 800,
"selected": {}
}
]
}
截图如下
