效果图如下：
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
itemWidth: 10, // 设置宽度
itemHeight: 10, //
data: ['自有站点数（个）','执行金额（万元）'],
textStyle: {
color: '#868686'
}
},
grid: {
top:"10%",
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: yarr,
axisLine:{
lineStyle:{
color:'#E5E5E5'
},
},
axisLabel:{
textStyle:{
color:"#868686"
},
}
},
{
type: 'category',
show:false,
data: yarr,
axisLine:{
lineStyle:{
color:'#E5E5E5'
},
},
axisLabel:{
textStyle:{
color:"#868686"
},
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
axisLine:{
lineStyle:{
color:'#E5E5E5'
},
},
axisLabel:{
textStyle:{
color:"#868686"
},
},
splitLine: {
show: true,
lineStyle:{
color:"#E5E5E5",
type:"dashed"
}
}
},
{
type: 'value',
scale: true,
min: 0,
axisLine:{
lineStyle:{
color:'#E5E5E5'
},
},
axisLabel:{
textStyle:{
color:"#868686"
},
},
splitLine: {
show: true,
lineStyle:{
color:"#E5E5E5",
type:"dashed"
}
}
}
],
series: [
{
name:'执行金额（万元）',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
barWidth:"30%",
label: {
normal: {
show: true,
position: 'top'
}
},
data:xarr1,
itemStyle : {
normal : {//图表显示的颜色
color:'#66CC33',
lineStyle:{
color:'#66CC33'
},
}
},
},
{
name:'自有站点数（个）',
type:'line',
data:xarr2,
axisLine:{
lineStyle:{
color:'#E5E5E5'
}
},
label: {
normal: {
show: true,
position: 'top'
}
},
itemStyle : {
normal : {//图表显示的颜色
color:'#f9D544',
lineStyle:{
color:'#f9D544'
},
}
},
}
]
};
echart.setOption(option);//调用