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:
