option = {
grid: {
top: '20%',
left: '12%',
bottom: '20%',
right: '12%',
textStyle: {
color: '#000000',
},
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.6)',
borderColor: 'rgba(0,0,0,0.6)',
textStyle: {
color: '#fff',
fontSize: 14
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params) {
let html = params[0].name;
for (var i = 0; i < params.length; i++) {
if ((!params[i].value) || params[i].value === '-') {
continue;
}
if(params[i].dataIndex ===4 && params[i].seriesName ==='制种作物单产'){
console.log(55555)
html += `
<div style="display:flex;align-items:center">
<div style="width: 12px;height: 12px;border-radius: 50%; margin-right: 5px; background: ${params[i].color}"></div>
<div style="padding-right: 20px">${params[i].seriesName}</div>
${params[i].value}
</div>`;
break;
}else {
html += `
<div style="display:flex;align-items:center">
<div style="width: 12px;height: 12px;border-radius: 50%; margin-right: 5px; background: ${params[i].color}"></div>
<div style="padding-right: 20px">${params[i].seriesName}</div>
${params[i].value}
</div>`;
}
}
return html;
}
},
legend: [
{
data: ['制种作物总产'],
selectedMode: false,
left: 30,
symbolKeepAspect: true,
orient: 'horizontal',
icon: 'circle',
textStyle: {
color: '#000000',
fontSize: 11,
},
},
{
data: ['制种作物单产'],
left: 160,
// right: '10%',
textStyle: {
fontSize: 11,
color: '#000000',
},
// itemWidth: 20,
// itemHeight: 15,
},
],
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.4)',
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
interval: 0,
color: '#000000',
fontSize: 11,
rotate:-60,
textStyle: {
color: '#000000',
fontSize: 11,
},
},
data: ['2020年', '2021年', '2022年', '2023年', '2024年','2025年','2026年','2027年',],
},
],
yAxis: [
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.4)',
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#000000',
fontSize: 11,
formatter: function(value) {
return value;
}
},
splitArea: {
show: false,
},
}, {
type: 'value',
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#000000',
fontSize: 11,
formatter: function (value) {
return value;
}
},
splitArea: {
show: false,
},
}
],
series: [
{
name: '制种作物总产',
type: 'bar',
barMaxWidth: 20,
barGap: '10%',
itemStyle: {
// normal: {
// color: '#7dddf9',
// barBorderRadius: [4, 4, 0, 0]
// },
normal: {
color: function(params) {
return params.dataIndex<5?'#7dddf9':'rgba(125,221,249,0.3)'
},
barBorderRadius: [4, 4, 0, 0]
}
},
data: [15, 60, 50, 80, 180,200,210,190],
},
{
name: '制种作物单产',
type: 'line',
yAxisIndex: 1,
showSymbol: true,
symbolSize: 10,
symbol: "circle",
itemStyle: {
color: "#ff77a2",
borderColor: "#000000",
borderWidth: 2,
},
lineStyle: {
// normal: {
// width: 2,
// color: '#ff77a2',
// },
normal: {
width: 2,
color: '#ff77a2',
// type: 'dashed'
}
},
data: [160, 170, 200, 210, 100],
},
{
name: '制种作物单产',
type: 'line',
yAxisIndex: 1,
showSymbol: true,
symbolSize: 10,
symbol: "circle",
itemStyle: {
color: "rgba(255,119,162,0.5)",
borderColor: "rgba(255,255,255,0.5)",
borderWidth: 2,
},
lineStyle: {
// normal: {
// width: 2,
// color: '#ff77a2',
// },
normal: {
width: 2,
color: 'rgba(255,119,162,0.5)',
type: 'dashed'
}
},
data: ['-', '-', '-', '-', 100,230,240,220],
},
],
};