option = {
title: {
show: false,
text: '\n\n\n\n银\n\n行\n\n授\n\n信',
fontSize:24,
// subtext: '数据来自甲方'
},
backgroundColor: '#032272',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
textStyle: {
color: '#fff'
},
borderColor: "rgba(255,255,255, .5)",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(param) {
// console.log(param);
var relVal = "";
relVal = param[0].name + "<br/>";
relVal += param[0].seriesName + "：" + param[0].value + "<br/>";
relVal += param[1].seriesName + "：" + param[1].value;
return relVal;
}
},
legend: {
show: true,
//data，就是取得每个series里面的name属性。
orient: 'horizontal',
icon: '', //图例形状
padding: [0,0,10,0],
top: '1%',
// itemRadius: [20, 20, 20, 20],
itemWidth: 20, //小圆点宽度
itemHeight: 7, // 小圆点高度
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
textStyle: {
fontSize: 14,
color: '#fff',
},
},
grid: { //设置网格属性
// show:true,
x: 55,
y: 20, //!-- 距离上面(top)的高度
//x2:35,
y2: 25, //!-- 距离底部的高度
bottom: '8%',
left: '8%', //网格距离容器左侧的距离
right: '10%', //网格距离容器右侧的距离
borderWidth: 1,
containLabel: false
},
xAxis: {
type: 'value',
show: true,
name:'万元',
nameTextStyle: {
color: '#fff',
fontSize: '11px',
},
axisTick: { //去掉刻度
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#2D3C5C'
}
},
axisLabel: {
textStyle: {
color: '#DEEBFF',
fontSize: '12px',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(45, 60, 92, .34)',
type: 'solid'
}
}
},
yAxis: [{
type: 'category',
axisTick: { //去掉刻度
show: false
},
// interval: 5,
inverse: true, //顺序
// splitNumber: 8,
axisLabel: {
textStyle: {
color: '#DEEBFF',
fontSize: '12px',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#2D3C5C'
}
},
data: ['新开工', '续建']
}, {
type: 'category',
interval: 0,
axisTick: { //去掉刻度
show: false
},
axisLine: {
show: false
},
splitNumber: 8,
data: ['', '',]
}],
series: [{ /*背景图*/
type: 'bar',
yAxisIndex: 1,
silent: true,
itemStyle: {
normal: {
show: true,
color: 'rgba(255, 255, 255, .11)',
barBorderRadius: 7,
borderWidth: 0,
}
},
barWidth: '10px',
barGap: 1,
data: [1800, 1800]
},
{ /*背景图*/
type: 'bar',
yAxisIndex: 1,
silent: true,
itemStyle: {
normal: {
show: true,
color: 'rgba(255, 255, 255, .11)',
barBorderRadius: 7,
borderWidth: 0,
}
},
barWidth: '10px',
barGap: 1,
data: [1800, 1800]
},
{
name: '今年计划投资',
type: 'bar',
barWidth: '10px',
nameTextStyle: {
width: 20,
fontSize: 14,
fontFamily: "Times New Roman",
borderColor: '#51bbfe',
borderWidth: 1,
backgroundColor: '#022453',
color: '#fff',
padding: [4, 5, 4, 165],
},
itemStyle: {
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#01FFFF'
}, {
offset: 1,
color: '#027FFF'
}])
},
// emphasis: {
// barBorderColor: '#644424',
// barBorderWidth: '1'
// // color: 'rgba(26,177,98,.8)'
// }
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}',
textStyle: {
color: '#01FDFF',
fontSize: 12
}
}
},
barGap: 1,
data: [1300, 1400]
},
{
name: '目前完成投资',
type: 'bar',
barWidth:'10px',
itemStyle: {
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#48A2FD'
}, {
offset: 1,
color: '#FFA800'
}])
},
// emphasis: {
// barBorderColor: '#644424',
// barBorderWidth: '1'
// // color: 'rgba(26,177,98,.8)'
// }
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}',
textStyle: {
color: '#01FDFF',
fontSize: 12
}
}
},
barGap: 1,
data: [423, 1256]
}
]
};