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 += `

${params[i].seriesName}

${params[i].value}

`; break; }else { html += `

${params[i].seriesName}

${params[i].value}

`; } } 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], }, ], };

Echarts在线免费图表