如何在百度的现有基础上实现双y轴柱状图,也就是在y轴柱状图加一个背景色。下面直接放js代码,如果有不懂的同学可以先了解一下ECharts入门教程。
option = { backgroundColor: '#040c33', grid: { left: '15%', right: '15%', bottom: '5%', top: '10%', containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { type: 'none' }, formatter: function(params) { return params[0].name + ' ' + "" + params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' 万元 ' } }, xAxis: { show: false, type: 'value' }, yAxis: [{ type: 'category', inverse: true, axisLabel: { show: true, textStyle: { color: '#fff' }, }, splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, data: ['猪肉', '牛肉', '羊肉', '鱼肉', '螃蟹'] }, { type: 'category', inverse: true, axisTick: 'none', axisLine: 'none', show: true, axisLabel: { textStyle: { color: '#ffffff', fontSize: '12' }, formatter: function(value) { if (value >= 10000) { return (value / 10000).toLocaleString() + '万'; } else { return value.toLocaleString(); } }, }, data: [50000000, 22000000, 10000000, 5000000, 3000] }], series: [{ name: '金额', type: 'bar', zlevel: 1, itemStyle: { normal: { barBorderRadius: 30, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgb(57,89,255,1)' }, { offset: 1, color: 'rgb(46,200,207,1)' }]), }, }, barWidth: 20, data: [50000000, 22000000, 10000000, 5000000, 3000] }, { name: '背景', type: 'bar', barWidth: 20, barGap: '-100%', data: [50000000, 50000000, 50000000, 50000000, 50000000], itemStyle: { normal: { color: 'rgba(24,31,68,1)', barBorderRadius: 30, } }, }, ] };