时间轴echarts 折线配置项内容和展示
时间轴表达
配置项如下
option = {
xAxis: {
type: 'category',
data: ["1995-01-12","2013-06-09","2018-03-16","2018-05-23","2018-08-01","2019-08-12","2019-10-28","2020-01-02"],
axisLabel:{show: false},
axisLine:{
lineStyle:{
type: 'dotted'
}
},
axisTick:{
show:false,
}
},
yAxis: {
type: 'value',
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
},
dataZoom: [ {
type: 'slider',
xAxisIndex: [0, 0],
start: 0,
end: 100,
height: 20,
left:75,
right:78,
bottom: 0,
handleIcon: 'path://M159.336,430.669v-24.834h30.493v24.834l-15.248,8.544L159.336,430.669z',
handleSize: '100%',
handleStyle: {
color: '#D5DBE4',
borderWidth: 2,
borderColor:"#FFF",
shadowBlur: 8,
shadowColor: '#fff',
},
},{
type: 'inside',
xAxisIndex: [0, 0],
start: 0,
end: 100,
bottom: 30,
height: 20
}],
series: [{
type: 'line',
markPoint : {
symbol:'path://M213.285,0h-0.608C139.114,0,79.268,59.826,79.268,133.361c0,48.202,21.952,111.817,65.246,189.081 c32.098,57.281,64.646,101.152,64.972,101.588c0.906,1.217,2.334,1.934,3.847,1.934c0.043,0,0.087,0,0.13-0.002 c1.561-0.043,3.002-0.842,3.868-2.143c0.321-0.486,32.637-49.287,64.517-108.976c43.03-80.563,64.848-141.624,64.848-181.482 C346.693,59.825,286.846,0,213.285,0z M274.865,136.62c0,34.124-27.761,61.884-61.885,61.884 c-34.123,0-61.884-27.761-61.884-61.884s27.761-61.884,61.884-61.884C247.104,74.736,274.865,102.497,274.865,136.62z',//标记类型
symbolSize: 40,//图形大小
symbolOffset:[0, -30],
symbolKeepAspect:true,
itemStyle: {
borderColor: '#FFF',
borderWidth: 4, // 标注边线线宽，单位px，默认为1
},
emphasis:{
label:{
distance : 10
}
},
data : [
{
"value":"1995-01-12",
"xAxis":0,
"yAxis":0,
"symbolSize":20,
"symbolOffset":[
0,
-30
],
"label":{
"distance":5,
"fontSize":8,
"position":"top",
"color":"#000",
"fontWeight":"bold"
},
"itemStyle":{
"color":"#FD691C",
"borderWidth":3,
"borderColor":"#fff"
}
},
{
"value":"1995-01-12",
"xAxis":0,
"yAxis":0,
"symbol":"path://M959.846 509.535c0 247.319-200.527 447.846-447.846 447.846l0 0c-247.378 0-447.846-200.527-447.846-447.846l0 0c0-247.319 200.467-447.846 447.846-447.846l0 0c247.319 0 447.846 200.527 447.846 447.846l0 0z",
"symbolSize":15,
"symbolOffset":[
0,
0
],
"label":{
"show":false
},
"itemStyle":{
"color":"#FD691C",
"borderWidth":5,
"borderColor":"#fff"
}
},
{
"value":"2013-06-09",
"xAxis":1,
"yAxis":0,
"symbolSize":20,
"symbolOffset":[
0,
-30
],
"label":{
"distance":5,
"fontSize":8,
"position":"top",
"color":"#000",
"fontWeight":"bold"
},
"itemStyle":{
"color":" #9C50F7",
"borderWidth":3,
"borderColor":"#fff"
}
},
{
"value":"2013-06-09",
"xAxis":1,
"yAxis":0,
"symbol":"path://M959.846 509.535c0 247.319-200.527 447.846-447.846 447.846l0 0c-247.378 0-447.846-200.527-447.846-447.846l0 0c0-247.319 200.467-447.846 447.846-447.846l0 0c247.319 0 447.846 200.527 447.846 447.846l0 0z",
"symbolSize":15,
"symbolOffset":[
0,
0
],
"label":{
"show":false
},
"itemStyle":{
"color":" #9C50F7",
"borderWidth":5,
"borderColor":"#fff"
}
},
{
"value":"2018-03-16",
"xAxis":2,
"yAxis":0,
"symbolSize":20,
"symbolOffset":[
0,
-30
],
"label":{
"distance":5,
"fontSize":8,
"position":"top",
"color":"#000",
"fontWeight":"bold"
},
"itemStyle":{
"color":"#FD691C",
"borderWidth":3,
"borderColor":"#fff"
}
},
{
"value":"2018-03-16",
"xAxis":2,
"yAxis":0,
"symbol":"path://M959.846 509.535c0 247.319-200.527 447.846-447.846 447.846l0 0c-247.378 0-447.846-200.527-447.846-447.846l0 0c0-247.319 200.467-447.846 447.846-447.846l0 0c247.319 0 447.846 200.527 447.846 447.846l0 0z",
"symbolSize":15,
"symbolOffset":[
0,
0
],
"label":{
"show":false
},
"itemStyle":{
"color":"#FD691C",
"borderWidth":5,
"borderColor":"#fff"
}
},
{
"value":"2018-05-23",
"xAxis":3,
"yAxis":0,
"symbolSize":60,
"symbolOffset":[
0,
-50
],
"label":{
"distance":5,
"fontSize":16,
"position":"top",
"color":"#000",
"fontWeight":"bold"
},
"itemStyle":{
"color":"#6DCFF6",
"borderWidth":3,
"borderColor":"#fff"
}
},
{
"value":"2018-05-23",
"xAxis":3,
"yAxis":0,
"symbol":"path://M959.846 509.535c0 247.319-200.527 447.846-447.846 447.846l0 0c-247.378 0-447.846-200.527-447.846-447.846l0 0c0-247.319 200.467-447.846 447.846-447.846l0 0c247.319 0 447.846 200.527 447.846 447.846l0 0z",
"symbolSize":15,
"symbolOffset":[
0,
0
],
"label":{
"show":false
},
"itemStyle":{
"color":"#6DCFF6",
"borderWidth":5,
"borderColor":"#fff"
}
},
{
"value":"2018-08-01",
"xAxis":4,
"yAxis":0,
"symbolSize":20,
"symbolOffset":[
0,
-30
],
"label":{
"distance":5,
"fontSize":8,
"position":"top",
"color":"#000",
"fontWeight":"bold"
},
"itemStyle":{
"color":"#FD691C",
"borderWidth":3,
"borderColor":"#fff"
}
},
{
"value":"2018-08-01",
"xAxis":4,
"yAxis":0,
"symbol":"path://M959.846 509.535c0 247.319-200.527 447.846-447.846 447.846l0 0c-247.378 0-447.846-200.527-447.846-447.846l0 0c0-247.319 200.467-447.846 447.846-447.846l0 0c247.319 0 447.846 200.527 447.846 447.846l0 0z",
"symbolSize":15,
"symbolOffset":[
0,
0
],
"label":{
"show":false
},
"itemStyle":{
"color":"#FD691C",
"borderWidth":5,
"borderColor":"#fff"
}
},
{
"value":"2019-08-12",
"xAxis":5,
"yAxis":0,
"symbolSize":60,
"symbolOffset":[
0,
-50
],
"label":{
"distance":5,
"fontSize":16,
"position":"top",
"color":"#000",
"fontWeight":"bold"
},
"itemStyle":{
"color":"#6DCFF6",
"borderWidth":3,
"borderColor":"#fff"
}
},
{
"value":"2019-08-12",
"xAxis":5,
"yAxis":0,
"symbol":"path://M959.846 509.535c0 247.319-200.527 447.846-447.846 447.846l0 0c-247.378 0-447.846-200.527-447.846-447.846l0 0c0-247.319 200.467-447.846 447.846-447.846l0 0c247.319 0 447.846 200.527 447.846 447.846l0 0z",
"symbolSize":15,
"symbolOffset":[
0,
0
],
"label":{
"show":false
},
"itemStyle":{
"color":"#6DCFF6",
"borderWidth":5,
"borderColor":"#fff"
}
},
{
"value":"2019-10-28",
"xAxis":6,
"yAxis":0,
"symbolSize":60,
"symbolOffset":[
0,
-50
],
"label":{
"distance":5,
"fontSize":16,
"position":"top",
"color":"#000",
"fontWeight":"bold"
},
"itemStyle":{
"color":"#6DCFF6",
"borderWidth":3,
"borderColor":"#fff"
}
},
{
"value":"2019-10-28",
"xAxis":6,
"yAxis":0,
"symbol":"path://M959.846 509.535c0 247.319-200.527 447.846-447.846 447.846l0 0c-247.378 0-447.846-200.527-447.846-447.846l0 0c0-247.319 200.467-447.846 447.846-447.846l0 0c247.319 0 447.846 200.527 447.846 447.846l0 0z",
"symbolSize":15,
"symbolOffset":[
0,
0
],
"label":{
"show":false
},
"itemStyle":{
"color":"#6DCFF6",
"borderWidth":5,
"borderColor":"#fff"
}
},
{
"value":"2020-01-02",
"xAxis":7,
"yAxis":0,
"symbolSize":20,
"symbolOffset":[
0,
-30
],
"label":{
"distance":5,
"fontSize":8,
"position":"top",
"color":"#000",
"fontWeight":"bold"
},
"itemStyle":{
"color":" #9C50F7",
"borderWidth":3,
"borderColor":"#fff"
}
},
{
"value":"2020-01-02",
"xAxis":7,
"yAxis":0,
"symbol":"path://M959.846 509.535c0 247.319-200.527 447.846-447.846 447.846l0 0c-247.378 0-447.846-200.527-447.846-447.846l0 0c0-247.319 200.467-447.846 447.846-447.846l0 0c247.319 0 447.846 200.527 447.846 447.846l0 0z",
"symbolSize":15,
"symbolOffset":[
0,
0
],
"label":{
"show":false
},
"itemStyle":{
"color":" #9C50F7",
"borderWidth":5,
"borderColor":"#fff"
}
}
]},
}]
};
截图如下
