为echarts的叠加柱状图设置颜色
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、效果截图
为echarts的叠加柱状图设置颜色
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、效果截图