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: 'category',
data: [
'尖',
'峰',
'平',
'谷'
],
axisLabel: {
color: 'white',
// 设置 x 轴标签字体颜色为白色
fontSize:16//调整坐标轴字体大小
},
},
yAxis: {
show: false,
// 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false
// 不显示坐标轴刻度线
},
axisLine: {
show: false,
// 不显示坐标轴线
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
type: 'value'
},
grid: {
top: '14%',
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
},
series: [
{
data: [
{
value: 200,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#bd0201'
},
{
offset: 0.5,
color: '#8f201a'
},
{
offset: 1,
color: '#59373b'
}
]
}
}
},
{
value: 300,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#fc5622'
},
{
offset: 0.5,
color: '#b6482c'
},
{
offset: 1,
color: '#723b32'
}
]
}
}
},
{
value: 210,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1780fb'
},
{
offset: 0.5,
color: '#0968b8'
},
{
offset: 1,
color: '#0b4a74'
}
]
}
}
},
{
value: 150,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#09c60b'
},
{
offset: 0.5,
color: '#067f19'
},
{
offset: 1,
color: '#0e422d'
}
]
}
}
}
],
type: 'bar',
barWidth: 20,
// 设置柱子的宽度
smooth: true,
barGap: '20%',
colorBy: 'data',
label: {
show: true,
position: 'top',
formatter:'{c}kWh',
// position: 'inside',
color: '#A0FBFF'
}
}
],
color: [
'#1ED6FF',
'#FFB135',
'#999999',
'#CCFFFF'
],
tooltip: {
// 鼠标悬浮提示框显示 X和Y 轴数据
trigger: 'axis',
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,.7)',
borderWidth: 10,
textStyle: {
// 文字提示样式
color: 'white',
fontSize: '10'
},
axisPointer: {
// 坐标轴虚线
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
}
}
2.2效果展示
3.案例3
3.1代码
option ={
"color": "#8CCBFF",
"xAxis": {
"axisTick": {
"show": false
},
"axisLine": {
"lineStyle": {
"width": 2
}
},
"type": "category",
"data": [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月"
],
"axisLabel": {
"color": "white"
}
},
"yAxis": {
"show": false,
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
},
"type": "value"
},
"grid": {
"top": "15%",
"left": "2%",
"right": "2%",
"bottom": "0%",
"containLabel": true
},
"series": [
{
"data": [
4,
5,
6,
3,
5,
4
],
"type": "bar",
"barGap": "20%",
"barWidth": 20,
"smooth": true,
"itemStyle": {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0.01,
"color": "rgba(0, 85, 255, 0.0001)"
},
{
"offset": 1,
"color": "#0783FA"
}
],
"global": false
}
},
"label": {
"show": true,
"position": "top",
"color": "white",
"formatter":"{c}kWh",
}
}
],
"tooltip": {
"trigger": "axis",
"backgroundColor": "rgba(32, 33, 36,.7)",
"borderColor": "rgba(32, 33, 36,0.20)",
"borderWidth": 10,
"textStyle": {
"color": "#fff",
"fontSize": "10"
},
"axisPointer": {
"type": "cross",
"label": {
"backgroundColor": "#6a7985"
}
}
}
}3.2效果展示
4.案例4
4.1代码
option ={
title: {
// text: 'World Population'
},
tooltip: {
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,0.20)',
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
textStyle: {
color: '#ffffff',
fontSize: '10'
}
},
legend: {
textStyle: {
color: 'white'
},
top:-1,
icon: 'roundRect',
itemHeight: 2,
},
grid: {
top: '15%',
left: '4%',
right: '4%',
bottom: '7%',
containLabel: true
},
xAxis: {
axisTick: {
show: false
},
axisLabel: {
color: '#FFFFFF'
},
type: 'category',
data: [
'Brazil',
'Indonesia',
'USA',
'India',
'China',
'World'
]
},
yAxis: {
boundaryGap: [
0,
0.01
],
splitLine: {
show: false
},
axisLabel: {
show: false
},
type: 'value'
},
series: [
{
itemStyle: {
normal: {
// 柱形图圆角，初始化效果
// barBorderRadius: [
// 30,
// 30,
// 0,
// 0
// ],
// 设置颜色渐变
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#2199fa'
},
{
offset: 0.5,
color: '#126AB2FF'
},
{
offset: 1,
color: '#013B65FF'
}
]
},
}
},
name: '2012',
type: 'bar',
stack: 'Ad',//多个柱子合并在一起
data: [
19325,
23438,
31000,
121594,
134141,
681807
],
barWidth: '40%'
},
{
itemStyle: {
normal: {
// 柱形图圆角，初始化效果
// barBorderRadius: [
// 30,
// 30,
// 0,
// 0
// ],
// 设置颜色渐变
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#02D883FF'
},
{
offset: 0.5,
color: '#029C5FFF'
},
{
offset: 1,
color: '#037044FF'
}
]
},
}
},
name: '2013',
type: 'bar',
stack: 'Ad',//多个柱子合并在一起
data: [
18000,
20000,
39034,
100000,
100000,
600000
],
barWidth: '40%'
}
]
}
4.2效果展示
5.案例5
5.1代码
option ={
"grid": {
"top": "20%",
"bottom": "17%"
},
"tooltip": {
"trigger": "axis",
"backgroundColor": "rgba(32, 33, 36,.7)",
"borderColor": "rgba(32, 33, 36,0.20)",
"borderWidth": 10,
"textStyle": {
"color": "#fff",
"fontSize": "8"
},
"axisPointer": {
"type": "cross",
"label": {
"backgroundColor": "#6a7985"
}
}
},
"xAxis": {
"type": "category",
"boundaryGap": true,
"axisLabel": {
"interval": 0,
"color": "white",
"fontSize": 8
},
"data": [
"设计",
"实际"
]
},
"yAxis": {
"type": "value",
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
}
},
"series": [
{
"name": "发电时长",
"barWidth": 20,
"type": "bar",
"data": [
3.34,12
],
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0,
"color": "rgba(24, 130, 255, 1)"
},
{
"offset": 1,
"color": "rgba(54, 235, 202, 1)"
}
]
}
}
]
}5.2效果展示