https://www.echartsjs.com/examples/zh/editor.html?c=line-simple
将下面的代码拷入后运行，enjoy吧
//markline
var markLineOpt = {
symbol: 'none',
itemStyle: {
normal: { lineStyle: { type: 'dotted', color:'#000' } }
},
data: [
[{
// 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
yAxis: '820',
xAxis: '820'
}, {
yAxis: '0',
xAxis: '820'
}],
]
};
//图表
option = {
backgroundColor:'',
grid: {
top: '15%',
bottom:'25%',
left:'0',
right:'0',
containLabel: false
},
xAxis: [
{
type: 'category',
data: [820, 932, 901, 934, 1290, 1330], //x轴数据
axisTick:{
show:false,
},
axisLine:{
lineStyle:{
color:'#f8914e',
width:1
}
},
axisLabel:{
textStyle:{
color:function(value,index){
return index%2==0?'#da241e':'#ffc770'
}
},
fontSize:12,
interval:0
},
},
{
type: 'category',
data: [820, 932, 901, 934, 1290, 1330],//图表中间显示年份参数
position: 'bottom',
axisTick:{
show:false
},
axisLine:{
lineStyle:{
color:'transparent',
width:0
}
},
axisLabel:{
textStyle:{
color:function(value,index){
return index%2==0?'#da241e':'#ffc770'
}
},
fontSize:12,
interval:0
},
offset: 15,
},
{
type: 'category',
data: [820, 932, 901, 934, 1290, 1330],//图表中间显示月份参数
axisTick:{
show:false
},
axisLine:{
lineStyle:{
color:'transparent',
width:0
}
},
axisLabel:{
textStyle:{
color:function(value,index){
return index%2==0?'#da241e':'#ffc770'
}
},
fontSize:14,
interval:0
},
}
],
yAxis: {
type: 'value',
axisTick:{
show:false,
alignWithLabel: true
},
splitLine:{show: false},//去除网格线
axisLabel:{
formatter:function(){
return ""
}
},
axisLine:{
lineStyle:{
color:'#f8914e',
width:1,
}
}
},
series: [
/*{
name:'',
data: [], //柱状图数据，与x轴数据对应
type: 'bar',
barWidth:20,
itemStyle: {
normal: {
color: function(param) {
var colorList = [ "#da241e", "#ffc770" ];
var x = '';
param.dataIndex%2 ==0 ? x=1 : x=2;
if(x == '1') {
return colorList[0];
} else {
return colorList[1]
}
},
barBorderRadius: [3,3,0,0],
},
},
},*/
{
name:'',
data: [820, 932, 901, 934, 1290, 1330],//柱状图上方折线图数据，在柱状图数据基础上+3向上调整位置
type:'line',
lineStyle:{
color:'#FFC770',
},
label: {
show: true,
position: 'top'
},
itemStyle:{
normal:{
color: function(param) {
var colorList = [ "#da241e", "#ffc770" ];
var x = '';
param.dataIndex%2 ==0 ? x=1 : x=2;
if(x == '1') {
return colorList[0];
} else {
return colorList[1]
}
},
}
},
markLine: markLineOpt,
symbol: 'emptyCircle',
symbolSize: 10
}
]
};
