option = {
backgroundColor:"#000",
tooltip: {
trigger: "axis"
},
legend: {
itemHeight:14,
itemWidth:14,
icon: "rect",
bottom: "0",
textStyle: {
color: "#fff",
},
},
grid: {
x: 100,
y: 20,
x2: 30,
y2: 100,
},
xAxis: {
axisLine: {
lineStyle: {
color: "#44A0B7",
},
},
axisLabel: {
textStyle: {
color: "#fff",
},
},
show: true,
type: "value",
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
data: ["A镇", "B镇", "C镇", "D镇","E镇"],
axisLine: {
lineStyle: {
color: "#44A0B7",
},
},
axisLabel: {
textStyle: {
color: "#fff",
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
series: [
{
name: "水库",
type: "bar",
stack: "all",
barWidth: 26,
data: [5, 3, 8, 9, 3, 7, 7, 1, 3, 2],
// 设置柱状图渐变
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0,0 , [
{
offset: 0,
color: '#64FE99',
},
{
offset: 1,
color: 'rgba(25,252,157,0.5)',
},
]),
borderColor:'#000',
borderWidth: 2,
},
},
{
name: "湿地",
type: "bar",
stack: "all",
barWidth: 26,
data: [3, 4, 5, 2, 1, 10, 6, 1, 1, 1],
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0,0 , [
{
offset: 0,
color: '#68DF00',
},
{
offset: 1,
color: 'rgba(104,223,0,0.5)',
},
]),
borderColor:'#000',
borderWidth: 2,
},
},
{
name: "调蓄带",
type: "bar",
stack: "all",
barWidth: 26,
data: [1, 3, 2, 4, 4, 2, 10, 9, 1, 6],
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0,0 , [
{
offset: 0,
color: '#00B951',
},
{
offset: 1,
color: 'rgba(0,185,81,0.5)',
},
]),
borderColor:'#000',
borderWidth: 2,
},
},
{
name: "河道",
type: "bar",
stack: "all",
barWidth: 26,
data: [1, 10, 9, 8, 6, 9, 3, 2, 2, 7],
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0,0 , [
{
offset: 0,
color: '#E8C000',
},
{
offset: 1,
color: 'rgba(232,192,0,0.5)',
},
]),
borderColor:'#000',
borderWidth: 2,
},
},
{
name: "其他",
type: "bar",
stack: "all",
barWidth: 26,
data: [5, 10, 9, 8, 6, 9, 3, 2, 10, 15],
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0,0 , [
{
offset: 0,
color: '#EB7D00',
},
{
offset: 1,
color: 'rgba(235,125,0,0.5)',
},
]),
borderColor:'#000',
borderWidth: 2,
},
},
],
};