echarts同时显示柱状折线图
如果折线图的数据和柱状图的数据一样，则只显示一种
option = {
title: {
left: 'left',
text: '概率',
show:false
},
tooltip: {
trigger: 'axis',
formatter:'{a}:{c}',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
show:true,
selectedMode:'single', //设置显示单一图例的图形，点击可切换
bottom:0,//legend位置的调整
left:10,
textStyle:{
color:'#5e859e',
fontSize:10
},
itemGap:20,
data:['点位一','点位二','点位三'],
inactiveColor:'#ccc'
},
grid: {//图位置调整
top:'5%',
left: '0%',
right: '0%',
bottom: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7',
'8','9','10','11','12'],
axisLine:{
lineStyle:{
color:'#5e859e',//横坐标轴和字体颜色
width:2//这里是为了突出显示加上的
}
},
axisPointer: {
type: 'shadow'
},
axisTick: {
show:true,
interval: 0
}
}
],
//设置两个y轴，左边显示数量，右边显示概率
yAxis: [
{
type: 'value',
name: '数量',
show:true,
interval: 50,
axisLine: {
lineStyle: {
color: '#5e859e',
width: 2
}
}
},
{
type: 'value',
name: '概率',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
},
axisLine: {
lineStyle: {
color: '#5e859e',//纵坐标轴和字体颜色
width: 2
}
}
}
],
//每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
series: [
{
name:'点位一',
type:'bar',
color:'#f17e0e',
data:[900,800,700,680,650,640,600,570,680,650,640,600],
barWidth : '50%'
},
{
name:'点位一',
type:'line',
color:'#2f87f1',
yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
data:[75,65,85,66,45,55,56,42,78,69,70,36],
symbolSize:10
},
{
name:'点位二',
type:'bar',
color:'#f17e0e',
data:[700,680,650,640,600,570,680,650,640,600,570,570],
barWidth : '50%'
},
{
name:'点位二',
type:'line',
color:'#87CEFA',
yAxisIndex: 1,
data:[75,65,85,66,45,55,56,42,78,69,70,36],
symbolSize:10
},
{
name:'点位三',
type:'bar',
color:'#f17e0e',
data:[600,570,680,650,640,600,570,450,400,380,300,900],
barWidth : '50%'
},
{
name:'点位三',
type:'line',
color:'#DDA0DD',
yAxisIndex: 1,
data:[75,65,85,66,45,55,56,42,50,65,75,80],
symbolSize:10
}
]
};