分时图echarts 配置项内容和展示
配置项如下
option = {
"tooltip":{
"trigger":"axis",
"backgroundColor":"#f1f1f1",
"borderColor":"#ccc",
"borderWidth":1,
"textStyle":{
"color":"#333"
},
"axisPointer":{
"type":"cross",
"label":{
"show":true,
"backgroundColor":"#333"
}
}
},
"legend":{
"icon":"rect",
"type":"scroll",
"itemWidth":14,
"itemHeight":2,
"selectedMode":false,
"left":0,
"top":"1%",
"textStyle":{
"fontSize":12,
"color":"#666"
}
},
"color":[
"#39afe6",
"#f00",
"#000"
],
"grid":[
{
"show":true,
"borderColor":"#bebebe",
"id":"gd1",
"height":"63%",
"top":"9%"
},
{
"show":true,
"borderColor":"#bebebe",
"id":"gd2",
//"height":"63%", //去掉高竖线占整个高
"top":"9%"
},
{
"show":true,
"borderColor":"#bebebe",
"id":"gd3",
"top":"76%",
"height":"19%"
}
],
"xAxis":[
{
"gridIndex":0,
"boundaryGap":false,
"axisTick":{
"show":false
},
"axisLine":{
"lineStyle":{
"color":"#bebebe"
}
},
"data":[
"09:30",
"09:31",
"09:32",
"09:33",
"09:34",
"09:35",
"09:36",
"09:37",
"09:38",
"09:39",
"09:40",
"09:41",
"09:42",
"09:43",
"09:44",
"09:45",
"09:46",
"09:47",
"09:48",
"09:49",
"09:50",
"09:51",
"09:52",
"09:53",
"09:54",
"09:55",
"09:56",
"09:57",
"09:58",
"09:59",
"10:00",
"10:01",
"10:02",
"10:03",
"10:04",
"10:05",
"10:06",
"10:07",
"10:08",
"10:09",
"10:10",
"10:11",
"10:12",
"10:13",
"10:14",
"10:15",
"10:16",
"10:17",
"10:18",
"10:19",
"10:20",
"10:21",
"10:22",
"10:23",
"10:24",
"10:25",
"10:26",
"10:27",
"10:28",
"10:29",
"10:30",
"10:31",
"10:32",
"10:33",
"10:34",
"10:35",
"10:36",
"10:37",
"10:38",
"10:39",
"10:40",
"10:41",
"10:42",
"10:43",
"10:44",
"10:45",
"10:46",
"10:47",
"10:48",
"10:49",
"10:50",
"10:51",
"10:52",
"10:53",
"10:54",
"10:55",
"10:56",
"10:57",
"10:58",
"10:59",
"11:00",
"11:01",
"11:02",
"11:03",
"11:04",
"11:05",
"11:06",
"11:07",
"11:08",
"11:09",
"11:10",
"11:11",
"11:12",
"11:13",
"11:14",
"11:15",
"11:16",
"11:17",
"11:18",
"11:19",
"11:20",
"11:21",
"11:22",
"11:23",
"11:24",
"11:25",
"11:26",
"11:27",
"11:28",
"11:29",
"11:30",
"13:00",
"13:01",
"13:02",
"13:03",
"13:04",
"13:05",
"13:06",
"13:07",
"13:08",
"13:09",
"13:10",
"13:11",
"13:12",
"13:13",
"13:14",
"13:15",
"13:16",
"13:17",
"13:18",
"13:19",
"13:20",
"13:21",
"13:22",
"13:23",
"13:24",
"13:25",
"13:26",
"13:27",
"13:28",
"13:29",
"13:30",
"13:31",
"13:32",
"13:33",
"13:34",
"13:35",
"13:36",
"13:37",
"13:38",
"13:39",
"13:40",
"13:41",
"13:42",
"13:43",
"13:44",
"13:45",
"13:46",
"13:47",
"13:48",
"13:49",
"13:50",
"13:51",
"13:52",
"13:53",
"13:54",
"13:55",
"13:56",
"13:57",
"13:58",
"13:59",
"14:00",
"14:01",
"14:02",
"14:03",
"14:04",
"14:05",
"14:06",
"14:07",
"14:08",
"14:09",
"14:10",
"14:11",
"14:12",
"14:13",
"14:14",
"14:15",
"14:16",
"14:17",
"14:18",
"14:19",
"14:20",
"14:21",
"14:22",
"14:23",
"14:24",
"14:25",
"14:26",
"14:27",
"14:28",
"14:29",
"14:30",
"14:31",
"14:32",
"14:33",
"14:34",
"14:35",
"14:36",
"14:37",
"14:38",
"14:39",
"14:40",
"14:41",
"14:42",
"14:43",
"14:44",
"14:45",
"14:46",
"14:47",
"14:48",
"14:49",
"14:50",
"14:51",
"14:52",
"14:53",
"14:54",
"14:55",
"14:56",
"14:57",
"14:58",
"14:59",
"15:00"
],
"axisLabel":{
"show":false
},
"splitLine":{
"show":true,
"lineStyle":{
"type":"dashed"
}
}
},
{
"show":false,
"gridIndex":1,
"boundaryGap":false,
"data":[
"09:30",
"09:31",
"09:32",
"09:33",
"09:34",
"09:35",
"09:36",
"09:37",
"09:38",
"09:39",
"09:40",
"09:41",
"09:42",
"09:43",
"09:44",
"09:45",
"09:46",
"09:47",
"09:48",
"09:49",
"09:50",
"09:51",
"09:52",
"09:53",
"09:54",
"09:55",
"09:56",
"09:57",
"09:58",
"09:59",
"10:00",
"10:01",
"10:02",
"10:03",
"10:04",
"10:05",
"10:06",
"10:07",
"10:08",
"10:09",
"10:10",
"10:11",
"10:12",
"10:13",
"10:14",
"10:15",
"10:16",
"10:17",
"10:18",
"10:19",
"10:20",
"10:21",
"10:22",
"10:23",
"10:24",
"10:25",
"10:26",
"10:27",
"10:28",
"10:29",
"10:30",
"10:31",
"10:32",
"10:33",
"10:34",
"10:35",
"10:36",
"10:37",
"10:38",
"10:39",
"10:40",
"10:41",
"10:42",
"10:43",
"10:44",
"10:45",
"10:46",
"10:47",
"10:48",
"10:49",
"10:50",
"10:51",
"10:52",
"10:53",
"10:54",
"10:55",
"10:56",
"10:57",
"10:58",
"10:59",
"11:00",
"11:01",
"11:02",
"11:03",
"11:04",
"11:05",
"11:06",
"11:07",
"11:08",
"11:09",
"11:10",
"11:11",
"11:12",
"11:13",
"11:14",
"11:15",
"11:16",
"11:17",
"11:18",
"11:19",
"11:20",
"11:21",
"11:22",
"11:23",
"11:24",
"11:25",
"11:26",
"11:27",
"11:28",
"11:29",
"11:30",
"13:00",
"13:01",
"13:02",
"13:03",
"13:04",
"13:05",
"13:06",
"13:07",
"13:08",
"13:09",
"13:10",
"13:11",
"13:12",
"13:13",
"13:14",
"13:15",
"13:16",
"13:17",
"13:18",
"13:19",
"13:20",
"13:21",
"13:22",
"13:23",
"13:24",
"13:25",
"13:26",
"13:27",
"13:28",
"13:29",
"13:30",
"13:31",
"13:32",
"13:33",
"13:34",
"13:35",
"13:36",
"13:37",
"13:38",
"13:39",
"13:40",
"13:41",
"13:42",
"13:43",
"13:44",
"13:45",
"13:46",
"13:47",
"13:48",
"13:49",
"13:50",
"13:51",
"13:52",
"13:53",
"13:54",
"13:55",
"13:56",
"13:57",
"13:58",
"13:59",
"14:00",
"14:01",
"14:02",
"14:03",
"14:04",
"14:05",
"14:06",
"14:07",
"14:08",
"14:09",
"14:10",
"14:11",
"14:12",
"14:13",
"14:14",
"14:15",
"14:16",
"14:17",
"14:18",
"14:19",
"14:20",
"14:21",
"14:22",
"14:23",
"14:24",
"14:25",
"14:26",
"14:27",
"14:28",
"14:29",
"14:30",
"14:31",
"14:32",
"14:33",
"14:34",
"14:35",
"14:36",
"14:37",
"14:38",
"14:39",
"14:40",
"14:41",
"14:42",
"14:43",
"14:44",
"14:45",
"14:46",
"14:47",
"14:48",
"14:49",
"14:50",
"14:51",
"14:52",
"14:53",
"14:54",
"14:55",
"14:56",
"14:57",
"14:58",
"14:59",
"15:00"
],
"axisLabel":{
"show":false
},
"axisLine":{
"lineStyle":{
"color":"#bebebe"
}
}
},
{
"splitNumber":2,
"type":"category",
"gridIndex":2,
"boundaryGap":false,
"data":[
"09:30",
"09:31",
"09:32",
"09:33",
"09:34",
"09:35",
"09:36",
"09:37",
"09:38",
"09:39",
"09:40",
"09:41",
"09:42",
"09:43",
"09:44",
"09:45",
"09:46",
"09:47",
"09:48",
"09:49",
"09:50",
"09:51",
"09:52",
"09:53",
"09:54",
"09:55",
"09:56",
"09:57",
"09:58",
"09:59",
"10:00",
"10:01",
"10:02",
"10:03",
"10:04",
"10:05",
"10:06",
"10:07",
"10:08",
"10:09",
"10:10",
"10:11",
"10:12",
"10:13",
"10:14",
"10:15",
"10:16",
"10:17",
"10:18",
"10:19",
"10:20",
"10:21",
"10:22",
"10:23",
"10:24",
"10:25",
"10:26",
"10:27",
"10:28",
"10:29",
"10:30",
"10:31",
"10:32",
"10:33",
"10:34",
"10:35",
"10:36",
"10:37",
"10:38",
"10:39",
"10:40",
"10:41",
"10:42",
"10:43",
"10:44",
"10:45",
"10:46",
"10:47",
"10:48",
"10:49",
"10:50",
"10:51",
"10:52",
"10:53",
"10:54",
"10:55",
"10:56",
"10:57",
"10:58",
"10:59",
"11:00",
"11:01",
"11:02",
"11:03",
"11:04",
"11:05",
"11:06",
"11:07",
"11:08",
"11:09",
"11:10",
"11:11",
"11:12",
"11:13",
"11:14",
"11:15",
"11:16",
"11:17",
"11:18",
"11:19",
"11:20",
"11:21",
"11:22",
"11:23",
"11:24",
"11:25",
"11:26",
"11:27",
"11:28",
"11:29",
"11:30",
"13:00",
"13:01",
"13:02",
"13:03",
"13:04",
"13:05",
"13:06",
"13:07",
"13:08",
"13:09",
"13:10",
"13:11",
"13:12",
"13:13",
"13:14",
"13:15",
"13:16",
"13:17",
"13:18",
"13:19",
"13:20",
"13:21",
"13:22",
"13:23",
"13:24",
"13:25",
"13:26",
"13:27",
"13:28",
"13:29",
"13:30",
"13:31",
"13:32",
"13:33",
"13:34",
"13:35",
"13:36",
"13:37",
"13:38",
"13:39",
"13:40",
"13:41",
"13:42",
"13:43",
"13:44",
"13:45",
"13:46",
"13:47",
"13:48",
"13:49",
"13:50",
"13:51",
"13:52",
"13:53",
"13:54",
"13:55",
"13:56",
"13:57",
"13:58",
"13:59",
"14:00",
"14:01",
"14:02",
"14:03",
"14:04",
"14:05",
"14:06",
"14:07",
"14:08",
"14:09",
"14:10",
"14:11",
"14:12",
"14:13",
"14:14",
"14:15",
"14:16",
"14:17",
"14:18",
"14:19",
"14:20",
"14:21",
"14:22",
"14:23",
"14:24",
"14:25",
"14:26",
"14:27",
"14:28",
"14:29",
"14:30",
"14:31",
"14:32",
"14:33",
"14:34",
"14:35",
"14:36",
"14:37",
"14:38",
"14:39",
"14:40",
"14:41",
"14:42",
"14:43",
"14:44",
"14:45",
"14:46",
"14:47",
"14:48",
"14:49",
"14:50",
"14:51",
"14:52",
"14:53",
"14:54",
"14:55",
"14:56",
"14:57",
"14:58",
"14:59",
"15:00"
],
"axisLabel":{
"color":"#666",
"fontSize":10
},
"axisTick":{
"show":false
},
"splitLine":{
"show":true,
"lineStyle":{
"type":"dashed"
}
},
"axisLine":{
"lineStyle":{
"color":"#bebebe"
}
}
}
],
"yAxis":[
{
"type":"value",
"min":"16",
"max":"17.10",
"interval":0.06,
"gridIndex":0,
"scale":true,
"axisTick":{
"show":false
},
"axisLine":{
"lineStyle":{
"color":"#bebebe"
}
},
"axisPointer":{
"show":true,
"label":{
}
},
"axisLabel":{
"color":"#333",
"rich":{
"red":{
"color":"red",
"lineHeight":10
},
"green":{
"color":"green",
"lineHeight":10
}
}
},
"z":4,
"splitLine":{
"show":true,
"lineStyle":{
"type":"dashed"
}
}
},
{
"scale":true,
"gridIndex":1,
"min":"16.42",
"max":"17.10",
"interval":0.06,
"position":"right",
"z":4,
"axisTick":{
"show":false
},
"axisLine":{
"lineStyle":{
"color":"#bebebe"
}
},
"axisLabel":{
"inside":false
},
"splitLine":{
"show":false,
"lineStyle":{
"color":"#181a23"
}
},
"axisPointer":{
"show":true,
"label":{
}
}
},
{
"nameGap":"0",
"nameTextStyle":{
"color":"#666"
},
"gridIndex":2,
"z":4,
"splitNumber":3,
"axisLine":{
"onZero":false,
"lineStyle":{
"color":"#bebebe"
}
},
"axisTick":{
"show":false
},
"axisPointer":{
"show":false,
"label":{
}
},
"splitLine":{
"show":false
},
"axisLabel":{
"color":"#666",
"inside":false,
"fontSize":10,
"onZero":false
}
}
],
"backgroundColor":"#fff",
"blendMode":"source-over",
"series":[
{
"name":"当前价",
"type":"line",
"data":[
"16.79",
"16.75",
"16.77",
"16.73",
"16.75",
"16.78",
"16.79",
"16.83",
],
"smooth":true,
"symbol":"circle",
"lineStyle":{
"normal":{
"opacity":0.8,
"color":"#39afe6",
"width":1
}
},
"areaStyle":{
"normal":{
"color":{
"x":0,
"y":0,
"x2":0,
"y2":1,
"type":"linear",
"global":false,
"colorStops":[
{
"offset":0,
"color":"rgba(0, 136, 212, 0.7)"
},
{
"offset":0.8,
"color":"rgba(0, 136, 212, 0.02)"
}
]
},
"shadowColor":"rgba(0, 0, 0, 0.1)",
"shadowBlur":10
}
},
"markLine":{
"name":"昨日收盘价",
"symbol":[
"none",
"none"
],
"label":{
"show":false,
"formatter":"16.76",
"position":"start"
},
"lineStyle":{
"color":"#4289c5",
"type":"solid"
},
"data":[
{
"yAxis":"16.760"
}
]
}
},
{
"name":"成交量2",
"type":"line",
"data":[
"18.79",
"17.75",
"18.77",
"18.73",
"18.75",
"18.78",
"18.79",
"18.83",
],
"smooth":true,
"symbol":"none",
"gridIndex":1,
"xAxisIndex":1,
"yAxisIndex":1,
"lineStyle":{
"normal":{
"width":1
}
}
},
{
"name":"成交量",
"type":"bar",
"gridIndex":2,
"xAxisIndex":2,
"yAxisIndex":2,
"data":[
19367,
6203,
8367,
8030,
6145,
4689,
4258,
5571,
],
"barWidth":"60%",
"itemStyle":{
"normal":{
}
}
}
]
};
截图如下
