您的位置:首页 > 其它

为echarts的叠加柱状图设置颜色

2016-12-29 15:28 1166 查看
1、废话少说,直接上代码(前提先引入echarts先关文件)

var myChart = echarts.init(document.getElementById('chartOne'));
// 指定图表的配置项和数据
var option = {
title: {
text: '近'+days+'天各类型通知发布数量',
textStyle: {
color: '#c23531',
fontSize: 14
}
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
legend: {
data:['扶贫局通知','云平台通知','其他']
},
grid: {
left: '3%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : xAData //X轴坐标
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'扶贫局通知',
type:'bar',
//data:fu,
data:[11,33,45],
//设置柱体颜色
itemStyle:{
normal:{color:'#ab78ba'}
}
},
{
name:'云平台通知',
type:'bar',
//data:yun,
data:[11,28,45],
//设置柱体颜色
itemStyle:{
normal:{color:'#72b201'}
}
},
{
name:'其他',
type:'bar',
//data:qi,
data:[22,33,66],
//设置柱体颜色
itemStyle:{
normal:{color:'#08a9f2'}
}
}

]
};
myChart.setOption(option);

2、效果截图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: