/* title: Stacked Column Chart titleCN: 堆叠柱状图 category: bar difficulty: 3 */ option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (data) { console.log(data) let html = `` html = `

${data[0].name}

隐患总数: ${data[0].value + data[1].value + data[2].value + data[3].value}

部门检查: ${data[0].value + data[1].value}

已整改: ${data[0].value} / 待整改: ${data[1].value}

自主检查: ${data[2].value + data[3].value}

已整改: ${data[2].value} / 待整改: ${data[3].value}

` return html } }, legend: { show: false }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['开发区', '开发区', '开发区', '开发区', '开发区', '开发区', '开发区'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '已整改', type: 'bar', stack: '部门检查', emphasis: { focus: 'series' }, itemStyle: { color: '#396CFA' }, data: [220, 182, 191, 234, 290, 330, 310] }, { name: '待整改', type: 'bar', stack: '部门检查', emphasis: { focus: 'series' }, itemStyle: { color: '#DDE6FF' }, data: [150, 232, 201, 154, 190, 330, 410] }, { name: '已整改', type: 'bar', stack: '自主检查', emphasis: { focus: 'series' }, itemStyle: { color: '#FFC018' }, data: [2201, 1821, 1911, 2341, 2901, 3301, 3101] }, { name: '待整改', type: 'bar', stack: '自主检查', emphasis: { focus: 'series' }, itemStyle: { color: '#FFF4D8' }, data: [1501, 2321, 2011, 1541, 1901, 3301, 4101] }, { type: 'line', data: [1501, 2321, 2011, 1541, 1901, 3301, 4101], symbolSize: 8, smooth: 0.4, lineStyle: { color: "#FF5C5C", width: 3, shadowColor: 'rgba(26,117,218,0.17)', shadowBlur: 5, shadowOffsetY: 5, }, itemStyle: { color: "#FF5C5C", borderColor: "#FF5C5C", borderWidth: 5, }, }, ] };

多个堆叠柱状图和折线图