为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的叠加柱状图设置颜色相关推荐

echarts动态渲染柱状图背景颜色以及顶部数值
第一种单个柱子变色众所周知柱状图的背景色在series下的 itemStyle 的color下修改不同数据让每个柱状图背景颜色不同这个时候就需要自定义所以我在color后跟了一个箭头 ...
echarts如何给柱状图设置渐变色
在series 的 itemStyle 里面进行设置color的属性值, itemStyle: { normal: { ...
echarts给柱状图某个柱子设置颜色
1.引用官网的例子,运行后是默认的颜色. 2.给柱状图整体设置颜色 var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {d ...
Echarts绘制地图柱状图
场景需求:在使用echarts渲染的时候,有需求在页面中实现在echarts地图上叠加柱状图或者折线图,饼图等场景:目前地图上叠加的代码是甘肃省的json文件,也可以更换成全国的或者其他省份的,有需要 ...
ECharts（三）：柱状图柱体颜色渐变（每个柱体不同渐变色）
前提: 会简单的绘制柱状图主要内容: 渐变的主要使用在https://efe.baidu.com/blog/echarts-3.2.0/中有介绍到: itemStyle: { normal: ...
Echarts 鼠标hover时柱状图设置背景色
在使用echarts时,有时需要给柱状图设置背景,有以下几种情况 1. hover时设置背景色只需要在tooltip里设置axisPointer即可 tooltip: {trigger: 'axis ...
echarts 不规则柱状图设置
echarts 不规则柱状图设置 pictorialBar和bar的应用 1.长方形渐变柱子应用type='bar'的普通柱状图配置: 2.上面的圆形则需要用type='pictorialBar'的不 ...
echarts 柱状图设置边框_series组件
使用ECharts柱状图标线 ECharts 使用 markLine 来设置柱状图标线,本文是对柱状图标线属性的介绍. series[i]-bar.markLine.silent boolean [ ...
ECharts: 绘制立体柱状图【圆柱体】
绘制这个立体的圆柱体柱状图主要由三块组成: 底部主体顶部实现这种效果主要是: ECharts中的 series 属性,通过两种不同类型的图表组合而成. 其中里面的柱体渐变色是通过 ECharts ...

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

为echarts的叠加柱状图设置颜色相关推荐

最新文章

热门文章