var xData = ['阳光玫瑰葡萄', '麒麟西瓜', '草莓', '辣椒', '贝贝南瓜', '其他']
var lineData = [2000, 2000, 2000, 2000, 2000, 2000]
var lastYearData = [2715, 5860, 1028, 2315, 3280, 6510];
var thisYearData = [2331, 5261, 944, 2151, 2389, 6370];
var timeLineData = [1];
let legendData = ['产量（万吨）', '收入（万元）'];
var background = "#011225"; //背景
let textColor = "#fff";
let lineColor = "rgba(159, 169, 191, .1)";
let colors = [{
borderColor: "rgba(227,161,96,1)",
start: "rgba(99, 180, 237, 1)",
end: "rgba(0, 142, 242, 1)"
},
{
borderColor: "rgba(0,222,255,1)",
start: "rgba(233, 166, 5, 1)",
end: "rgba(255, 227, 121, 1)"
},
];
let borderData = [];
let scale = 2;
borderData = xData.map(item => {
return scale;
});
var option = {
baseOption: {
backgroundColor: background,
timeline: {
show: false,
top: 0,
data: []
},
legend: {
show: true,
bottom: '0%',
right: '5%',
itemWidth: 20,
itemHeight: 5,
// itemGap: 343,
icon: 'horizontal',
textStyle: {
color: '#ffffff',
fontSize: 14,
},
data: legendData
},
grid: [{
show: false,
left: '5%',
top: '6%',
bottom: '14%',
containLabel: true,
width: '37%'
}, {
show: false,
left: '51.6%',
top: '6%',
bottom: '16.5%',
width: '26%'
}, {
show: false,
right: '4%',
top: '6%',
bottom: '14%',
containLabel: true,
width: '37%'
}],
xAxis: [{
// name:"产量（万吨）",
// nameTextStyle: {
// color: "#ffffff",
// fontWeight: 400,
// fontSize: 16,
// },
// nameGap:30,
type: 'value',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
min:0,
max:8000,
position: 'bottom',
axisLabel: {
show: true,
color: textColor,
position: 'outside',
textStyle: {
color: '#ffffff',
fontSize: 14
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: lineColor
}
},
}, {
gridIndex: 1,
show: false
}, {
// name:"产量（万吨）",
// nameTextStyle: {
// color: "#ffffff",
// fontWeight: 400,
// fontSize: 16,
// },
gridIndex: 2,
axisLine: {
show: false
},
axisTick: {
show: false
},
min:0,
max:8000,
position: 'bottom',
axisLabel: {
show: true,
color: textColor,
textStyle: {
color: '#ffffff',
fontSize: 14
},
},
splitLine: {
show: true,
lineStyle: {
color: lineColor
}
},
}],
yAxis: [{
name: "产量（万吨）",
position: 'bottom',
nameTextStyle: {
color: "#ffffff",
fontWeight: 400,
fontSize: 14,
padding: [20, 0, 0, 0]
},
type: 'category',
inverse: true,
axisLine: {
show: true,
lineStyle: {
color: lineColor
}
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#ffffff',
fontSize: 14
},
},
data: xData
}, {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
padding: [30, 0, 0, 0],
textStyle: {
color: '#ffffff',
fontSize: 14
},
interval: 0,
align: "center"
},
data: xData.map(function(value) {
return {
value: value,
textStyle: {
align: 'center'
}
}
})
}, {
name: "收入（万元）",
position: 'bottom',
nameTextStyle: {
color: "#ffffff",
fontWeight: 400,
fontSize: 16,
padding: [20, 0, 0, 0]
},
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: lineColor
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: xData
}],
series: []
},
options: []
}
option.baseOption.timeline.data.push(timeLineData[0])
option.options.push({
series: [{
name: "2017",
type: "bar",
barWidth: 6,
stack: "1",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: colors[0].start
},
{
offset: 1,
color: colors[0].end
}
]),
}
},
label: {
normal: {
show: true,
position: "left",
color: "#38A4EF",
}
},
data: lastYearData,
animationEasing: "elasticOut"
},
{
name: "2018",
type: "bar",
stack: "2",
realtimeSort: true,
barWidth: 6,
xAxisIndex: 2,
yAxisIndex: 2,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: colors[1].start
},
{
offset: 1,
color: colors[1].end
}
]),
}
},
label: {
normal: {
show: true,
position: "right",
color: "#F4C640",
}
},
data: thisYearData,
animationEasing: "elasticOut"
},
]
});