js
function container4(){
var myChart =echarts.init(document.getElementById('container4'));
var option;
option = {
// title: {
// text: '单位（人）',
// textStyle: {
// color: '#ffffff', // 这里设置标题颜色为红色
// fontSize:12,
// }
//
// },
tooltip: {
trigger:'axis',
axisPointer: {
type:'shadow'
}
},
legend: {
data: ['二级正职领导人员','二级副职领导人员'],
top:'4%',// 设置图例位置，以对齐Y轴name
// 设置图例位置，以对齐Y轴name
// left: 'center', // 或者可以是具体的像素值，如'50px'
textStyle: {
//图例中文字的样式
color:"#ffffff",
fontSize:12,
},
},
xAxis: {
type:'category',
data: ['党纪','政纪','组织', ],
axisLabel: {
show:true,
textStyle: {
color:'#ffffff',
},
}
},
yAxis: {
type:'value',
name:'单位（人）',
// 设置Y轴name的位置，以对齐图例
nameLocation:'end',
// 根据需要调整Y轴name的位置
nameGap:25,
position:'left',
nameTextStyle: {
color:'#ffffff' // 设置y轴名称颜色为红色
},
axisLabel: {
show:true,
textStyle: {
color:'#ffffff',
},
}
},
series: [
{
name:'二级正职领导人员',
type:'bar',
data: [220,182,191,234],
//设置立体正方形
barWidth:20,
itemStyle: {
color:function(params) {
// 创建渐变色对象
var color =new echarts.graphic.LinearGradient(0,0,0,1, [
{offset:0,color:'rgba(75,96,237, 0)'},// 顶部透明
{offset:1,color:'rgba(75,96,237,1)'}// 底部不透明
]);
return color;
},
borderColor:'rgba(75,96,237,1)',// 边框颜色
borderWidth:1 // 边框宽度
}
// itemStyle: {
// color: '#3d50c8' // 第一组柱子的背景颜色
// }
},
{
name:'二级副职领导人员',
type:'bar',
data: [150,232,201, ],
barWidth:20,
itemStyle: {
color:function(params) {
// 创建渐变色对象
var color =new echarts.graphic.LinearGradient(0,0,0,1, [
{offset:0,color:'rgba(0, 255, 255, 0)'},// 顶部透明
{offset:1,color:'rgba(0, 255, 255, 1)'}// 底部不透明
]);
return color;
},
borderColor:'rgba(0,255,255,1)',// 边框颜色
borderWidth:1 // 边框宽度
}
// itemStyle: {
// color: '#32d5da' // 第一组柱子的背景颜色
// }
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function () {
myChart.resize();
});
}
