option = {
title: [
{
text: '',
left: 'center'
}
],
//当trigger为’item’时只会显示该点的数据,
//为’axis’时显示该列下所有座标轴所对应的数据。
//提示框组件
tooltip: {
//?触发类型
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
left: 'center',
bottom: 10,
data: ['a1','b2', 'c3'],
textStyle: { // 统计项的样式
color: "#595959",
fontSize: 14
},
itemGap: 80
},
grid: {
left: '3%',
right: '4%',
top: '10%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'category', //category:类目轴(适用于离散无序数组)
data: ['2019/8/1','2019/9/1','2019/10/1','2019/11/1','2019/12/1','2020/1/1','2020/2/1','2020/3/1','2020/4/1','2020/5/1','2020/6/1','2020/7/1'],
axisLabel: {
show: true,
textStyle: {
color: "#595959", //X轴文字颜色
fontSize:14 // x轴文字大小
},
interval:0, // 刻度间隔
rotate:0, // 倾斜角度
align: 'center', // x轴文字居中
margin: 10 // 文字与x轴的间隔
},
axisLine: {
lineStyle: {
color: '#595959' // x轴颜色
}
},
axisTick: {
show: false
}
},
yAxis: [
{
type: 'value',
name: "",
axisLabel: {
show: true,
textStyle: {
color: "#595959", //y轴文字颜色
fontSize:14 // y轴文字大小
},
formatter: '{value}'
},
axisLine: {
lineStyle: {
color: '#595959' // y轴颜色
}
}
},
{
type: 'value',
axisLine: {
show: true
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#595959", //y轴文字颜色
fontSize:14 // y轴文字大小
},
formatter: '{value}'
},
name: '',
max: 3,
min: 0,
splitLine:{show:false}
}
],
series: [
// bar: 柱状图; line: 直线
{
name: 'a1',
type: 'bar',
stack: 'one',
barWidth: 25, // 柱子的宽度
itemStyle: {
normal: {
color: '#267CFF',
opacity: 0.6
}
},
data: [1000, 2000,3000]
},
{
name: "b2",
type: 'bar',
barWidth: 25, // 柱子的宽度
itemStyle: {
normal: {
color: '#FA8C16',
opacity: 0.6
}
},
data: [1100, 2100, 3100],
markLine: {
silent: true,
lineStyle: {
normal: {
color: '#333', // 设置安全基线颜色
type: "solid" // 实线,不写默认虚线
}
},
data: [{
yAxis: 3000 //这儿定义基准线的数值为多少
}],
label: {
normal: {
formatter: '警戒线' // 设置警戒基线
}
}
}
},
{
name: 'c3',
type: 'line',
itemStyle: {
normal: {
color: '#21C6C6',
opacity: 0.6
}
},
data: [3000, 3100, 3200],
markLine: {
silent: true,
lineStyle: {
normal: {
color: '#21C6C6', // 设置平仓基线颜色
type: "solid" // 实线,不写默认虚线
}
},
data: [{
yAxis: 2000 //这儿定义基准线的数值为多少
}],
label: {
normal: {
formatter: '平仓线' // 设置平仓基线
}
}
}
}
]
};
效果图: