//初始化id为main的div作为展示区
var chart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title : {
text : "标题名",
textStyle : {
fontSize : 18, //标题字体大小
fontWeight : 'bolder', //标题字体样式
color : '#333' //标题字体颜色
},
x : 'center', //x轴居中(center,top,)
y : 'top', //y轴靠上
},
tooltip : {},
legend : {
},
xAxis : {
name : "综合指标",
nameTextStyle:{
color : 'black' //设置x轴坐标名称的颜色--->"综合指标"的颜色
},
data : [ '辖区人数', '建档人数', '建档合格人数', '门诊人次', '住院人次' ],
axisLabel : {
interval : 0,// 横轴信息全部显示
rotate : 40,// -40度角倾斜显示
textStyle: {
color: 'black' //设置x轴坐标名称的颜色--->[ '辖区人数', '建档人数', '建档合格人数', '门诊人次', '住院人次' ]颜色
}
},
axisLine : {
lineStyle : {
color : '#e0e2e8', //x轴线条颜色
width : 2, //x轴线条宽度
},
}
}
//y轴设置同x轴
yAxis : [ {
name : '(人)',
nameTextStyle:{
color : '#3c72e7'
},
type : 'value',
axisLabel : {
textStyle: {
color: '#3c72e7'
}
},
axisLine : {
lineStyle : {
color : '#e0e2e8',
width : 2,
},
}
} ],
series : [ {
name : '人数',
type : 'bar',
data : seriesData,
barWidth : 60,
// 配置样式
itemStyle : {
normal : {
//自定义颜色数组,对应每个柱子,超出的自动循环
color : function(params) {
var colorList = [ '#9fe6b8', '#80daff', '#ffc5a1',
'#fb7293', '#e062ae' ];
return colorList[params.dataIndex];
}
}
}
} ]
};
chart.setOption(option);