option = {
backgroundColor: '',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
top: '10%',
right: "10%",
textStyle: {
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 13,
color: "#333"
}
},
grid: {
top: '20%',
right: '5%',
left: '10%',
bottom: '15%'
},
xAxis: [{
type: 'category',
axisLabel: {
color: '#333',
interval: 0
},
axisLine: {
show: true,
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#195384',
type: "dotted",
}
},
data: ['西江', '东江', '珠三角', '定期']
}],
yAxis: [
{
type: 'value',
name: "Km²",
min: 0,
position: 'left',
nameTextStyle: {
color: "#333",
fontSize: 11,
},
axisLine: {
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#0a3e98',
type: "dotted",
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: "#333",
}
},
},
{
type: 'value',
name: "",
min: 0,
position: 'right',
nameTextStyle: {
color: "#333",
fontSize: 11,
},
axisLine: {
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#0a3e98',
type: "dotted",
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: "#fff",
}
},
}
],
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 30
},
{
type: 'inside',
realtime: true,
start: 0,
end: 30
}
],
series: [
{
name: '森林面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#1e2783"
},
{
offset: 1,
color: "#7c94e7"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [410, 780, 605, 302],
},
{
name: '灌木面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#015BD3"
},
{
offset: 1,
color: "#13B7FF"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [585, 324, 143, 395],
}, {
name: '草地面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#F7B731"
},
{
offset: 1,
color: "#FFEE96"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [720, 610, 215, 330],
}, {
name: '湿地面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#FA8231"
},
{
offset: 1,
color: "#FFD14C"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [510, 320, 710, 260,],
}, {
name: '荒漠面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#EB3B5A"
},
{
offset: 1,
color: "#FE9C5A"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [820, 550, 320, 610],
},{
name: '农田面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#1e2783"
},
{
offset: 1,
color: "#7c94e7"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [410, 780, 605, 302],
},
{
name: '河流和湖泊植被面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#015BD3"
},
{
offset: 1,
color: "#13B7FF"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [585, 324, 143, 395],
}, {
name: '海洋和海岸植被面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#F7B731"
},
{
offset: 1,
color: "#FFEE96"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [720, 610, 215, 330],
}, {
name: '果园面积',
type: 'bar',
// stack: 'one',
barWidth: 10, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#FA8231"
},
{
offset: 1,
color: "#FFD14C"
}
]),
barBorderRadius: 13,
}
},
// label:{
// normal: {
// show: true,
// position: "top",
// formatter: "{c}",
// color:"#fff"
// }
// },
data: [510, 320, 710, 260,],
},
]
};