echars水状_echarts -- 柱状堆叠图实例

echarts – 柱状堆叠图实例

图三 -- 柱状堆叠图

var myChart = echarts.init(document.getElementById('main'));

var option = {

title: {

text: '供应商',

x: 'center'

},

tooltip: {

trigger: 'axis', // hover 触发事件

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

grid: {

right: '150', // 图组件距离右边距离

},

legend: {

data: ['新增审核中供应商数', '新增认证供应商数', '上月供应商累计总数'],

top: '20%',

right: '0',

width: 150,

// selectedMode:false // 取消图例的点击事件

},

xAxis: {

type: 'category',

data: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC']

},

yAxis: {

type: 'value',

splitLine:{show: false} // 去掉网格线

},

series: [

{

name:'新增审核中供应商数',

type:'bar',

barWidth: '50%', // 柱状宽度

stack: '供应商', // 堆积

data:[120, 132, 101, 134, 90, 230, 210, 22, 22, 44, 44, 66]

},

{

name:'新增认证供应商数',

type:'bar',

stack: '供应商', // 堆积

data:[120, 132, 101, 134, 90, 230, 210, 22, 33, 33, 34, 66]

},

{

name:'上月供应商累计总数',

type:'bar',

stack: '供应商', // 堆积

data:[120, 132, 101, 134, 90, 230, 210, 22, 44, 44, 0, 55],

itemStyle : { // 柱状颜色

normal : {

color: 'blue'

}

}

},

]

};

myChart.setOption(option);