const color = ['#0076F6', '#6AC4D6', '#FFC876', '#29B1FF'] option = { //你的代码 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, formatter: function (param) { //自定义tooltip内容 // console.log("数据=========", param); var text = '' text += `

${param[0].axisValueLabel}

${param[0].seriesName} ${param[0].value} 桶

${param[1].seriesName} ${param[1].value} 桶

${param[2].seriesName} ${param[2].value} 桶

${param[3].seriesName} ${param[3].value} 桶

` return text }, }, legend: { show: true, x: 'right', y: 'top', icon: 'circle', }, textStyle: { color: '#2C3E50', }, grid: { top: '18%', right: '1%', bottom: '0%', left: '1%', containLabel: true, }, xAxis: [ { type: 'category', data: [ '1月产废部门名称占位', '2月产废部门名称占位', '3月产废部门名称占位', '4月产废部门名称占位', '5月产废部门名称占位', '6月产废部门名称占位', '7月产废部门名称占位', '8月产废部门名称占位', '9月产废部门名称占位', '10月产废部门名称占位', '11月产废部门名称占位', '12月产废部门名称占位', ], axisLabel: { color: '#606266', fontSize: 13, rotate: 10, align: 'center', lineHeight: -20, verticalAlign: 'bottom', }, axisTick: { show: false, }, splitLine: { show: false, }, axisLine: { show: false, }, }, ], yAxis: [ { type: 'value', nameTextStyle: { color: '#989DAA', fontSize: 12, }, splitNumber: 4, axisLabel: { color: '#989DAA', }, axisTick: { show: false, }, splitLine: { show: true, lineStyle: { color: '#E5E6EB', }, }, axisLine: { show: false, }, }, ], color: color, series: [ { name: '废矿物油', type: 'bar', stack: 'user', barWidth: 40, itemStyle: { normal: { barBorderRadius: [0, 0, 4, 4], }, }, data: [90, 132, 101, 134, 220, 182, 191, 234, 191, 234, 132, 101], }, { name: '废油漆桶', type: 'bar', stack: 'user', barWidth: 40, data: [220, 182, 191, 234, 90, 132, 101, 134, 220, 191, 234, 191], }, { name: '废油桶', type: 'bar', stack: 'user', barWidth: 40, data: [150, 232, 90, 132, 101, 134, 220, 201, 154, 232, 90, 132], }, { name: '化验废液', type: 'bar', stack: 'user', barWidth: 40, itemStyle: { normal: { barBorderRadius: [4, 4, 0, 0], }, }, data: [150, 232, 90, 132, 101, 134, 220, 201, 154, 232, 90, 132], }, ], };

Echarts在线免费图表