1.案例1

1.1代码

option = {textStyle: {color: '#fff' // 标题文字颜色为白色},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',},},legend: {textStyle: {color: 'white'}},grid: {top: '15%',left: '4%',right: '4%',bottom: '7%',containLabel: true},xAxis:{type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']},yAxis: [{type: 'value',splitLine: {show: false // 隐藏Y轴的横线},},],series: [{name: '供能',type: 'bar',barWidth: 8,data: [90, 50, 120, 132, 101, 134, 90, 230, 210, 150, 180, 220],itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1, color: '#42495d'},{offset: 0, color: '#f9564b'},],},barBorderRadius: [10, 10, 0, 0],},},{name: '发电',type: 'bar',barWidth: 8,data: [80, 40, 220, 182, 191, 234, 290, 330, 310, 250, 280, 320],itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1, color: '#42495d'},{offset: 0, color: '#f3810d'},],},barBorderRadius: [10, 10, 0, 0],},},{name: '供热',type: 'bar',barWidth: 8,data: [200, 210, 190, 222, 188, 233, 170, 165, 172, 200, 210, 211],itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1, color: '#414a5f'},{offset: 0, color: '#c1238d'},],},barBorderRadius: [10, 10, 0, 0],},},{name: '供冷',type: 'bar',barWidth: 8,data: [0, 0, 0, 100, 150, 180, 200, 500, 420, 200, 0, 0],itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1, color: '#414a5f'},{offset: 0, color: '#06c9e1'},],},barBorderRadius: [10, 10, 0, 0],},},],barGap: '20%',barCategoryGap: '30%',
}

1.2效果展示

2.案例2

2.1代码

option = {xAxis: {axisTick: {show: false// 不显示坐标轴刻度线},splitLine: {show: false},axisLine: {lineStyle: {width: 2// 设置坐标轴线粗细为2px},color: '#F5F5F5',},type: