带时间轴的双曲线echarts 折线配置项内容和展示
配置项如下
option = {
baseOption: {
timeline: {
show: false,
type: 'slider',
axisType: 'category',
bottom: '10',
currentIndex: 0, //0 时表示当前选中项为 timeline.data[0]（即使用 options[0]
autoPlay: true, //是否自动播放
loop: true,
realtime: true, //拖动圆点的时候，是否实时更新视图。
controlPosition: 'left',
label: {
normal: {
color: '#2998ff',
},
},
itemStyle: {
normal: {
color: '#fff',
borderColor: '#2998ff',
borderWidth: 2,
}
},
checkpointStyle: { //『当前项』（checkpoint）的图形样式
color: 'rgb(215, 0, 0)',
},
lineStyle: {
show: true, //false 不显示轴线
color: '#2998ff',
},
controlStyle: { //控制按钮的样式
show: true,
showPrevBtn: false,
showNextBtn: false,
itemGap: 50,
itemSize: 36,
normal: {
color: 'rgb(215, 0, 0)',
borderColor: 'rgb(215, 0, 0)',
},
emphasis: {
color: 'rgb(215, 0, 0)',
borderColor: 'rgb(215, 0, 0)',
},
},
data: ['区域人数', '流入人数', '流出人数'],
},
tooltip: { //提示框组件
trigger: 'axis',
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
grid: {
left: 10,
right: 35,
bottom: 70,
top: 60,
containLabel: true,
},
legend: { //图例组件，颜色和名字
right: 0,
top: 0,
itemGap: 16,
itemWidth: 20,
itemHeight: 14,
data: [{
name: '2017-08-05 至 2017-08-05',
icon: 'rect',
},
{
name: '2017-08-06 至 2017-08-06',
icon: 'rect',
}
],
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
dataZoom: [{
show: false,
bottom: 10,
start: 60,
end: 100,
}, {
type: "inside",
show: false,
height: 15,
start: 1,
end: 35
}],
xAxis: [{
type: 'category',
boundaryGap: false, //坐标轴两边留白
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
margin: 15,
textStyle: {
color: '#078ceb',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
splitLine: {
show: true,
lineStyle: {
color: '#ccc',
},
},
axisTick: { //坐标轴刻度相关设置。
show: false,
},
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: '#999',
}
},
}],
yAxis: [{
type: 'value',
splitNumber: 6,
axisLabel: {
textStyle: {
color: '#333',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: '#ccc',
},
}
}],
series: [{
name: '2017-08-05 至 2017-08-05',
type: 'line',
symbol: 'circle',
symbolSize: 0, //空心标记的大小
smooth: true, //是否平滑曲线显示
smoothMonotone: 'x', //指明是在 x 轴或者 y 轴上保持单调性
label: { //图形上的文本标签
normal: {
show: false,
position: 'top',
textStyle: {
color: '#018ada',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
},
lineStyle: { //线条样式
normal: {
width: 2,
color: '#4ac7f5',
opacity: 1,
}
},
itemStyle: { //折线拐点标志的样式。
normal: {
color: '#4ac7f5',
borderColor: '#4ac7f5',
borderWidth: 2,
}
}
}, {
markArea: {
silent: true,
label: {
normal: {
position: ['10%', '50%']
}
},
data: [
[{
name: '优',
yAxis: 100,
itemStyle: {
normal: {
color: 'rgba(0,153,153,0.27)'
}
},
}, {
yAxis: 200
}],
[{
name: '良',
yAxis: 200,
itemStyle: {
normal: {
color: 'rgba(153,204,51,0.2)'
}
},
}, {
yAxis: 300,
}],
[{
name: '差',
yAxis: 300,
itemStyle: {
normal: {
color: 'rgba(250,250,51,0.2)'
}
}
}, {
yAxis: 400,
}]
]
},
name: '2017-08-06 至 2017-08-06',
type: 'line',
symbol: 'circle',
symbolSize: 6, //空心标记的大小
smooth: true, //是否平滑曲线显示
smoothMonotone: 'x', //指明是在 x 轴或者 y 轴上保持单调性
label: { //图形上的文本标签
normal: {
show: true,
position: 'top',
textStyle: {
color: '#f6a436',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
},
areaStyle: { //区域填充样式。
normal: {
opacity: 0,
color: '#f6a436'
}
},
lineStyle: { //线条样式
normal: {
width: 2,
color: '#f6a436'
}
},
itemStyle: { //折线拐点标志的样式。
normal: {
color: '#f6a436',
borderColor: '#f6a436',
borderWidth: 2,
}
}
}]
},
options: [
{
title: {
text: '222',
},
xAxis: [{
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00'],
}],
series: [{
data: [156, 235, 349, 546, 452, 370, 542, 638, 774, 702, 609, 456]
},
{
data: [352, 286, 315, 429, 566, 486, 399, 562, 658, 794, 702, 629]
}
]
},
{
title: {
text: '333',
},
xAxis: [{
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00'],
}],
series: [{
data: [546, 452, 370, 542, 638, 774, 702, 609, 456, 420, 398, 326]
},
{
data: [429, 566, 486, 399, 562, 658, 794, 702, 629, 610, 568, 425]
}
]
},
{
xAxis: [{
data: ['03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00'],
}],
series: [{
data: [156, 235, 349, 546, 452, 370, 542, 638, 774, 702, 609, 456]
},
{
data: [352, 286, 315, 429, 566, 486, 399, 562, 658, 794, 702, 629]
}
]
}
]
};
截图如下
