最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

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

IT圈 admin 2浏览 0评论

为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、效果截图


与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论