option = { backgroundColor: '#070e2e', color: ['#0C65F6', '#00FFA6', '#F4DF58'], tooltip: { confine: true, trigger: 'axis', axisPointer: { type: 'shadow', }, textStyle: { color: '#fff', fontSize: 12, lineHeight: 24, }, padding: [5, 10], backgroundColor: 'rgba(0, 0, 0, 0.50)', formatter(params) { // 根据条件修改 let unit = '个' let relVal = params[0].name for (let i = 0; i < params.length; i++) { if (i === 1) { unit = '%' } if (typeof (params[i].color) === 'string') { relVal += `

${params[i].seriesName}

${params[i].value} ${unit}

` } else { relVal += `

${params[i].seriesName}

${params[i].value} ${unit}

` } } return relVal }, }, grid: { left: '12%', right: '14%', bottom: '10%', top: '3%', }, legend: { icon: 'rect', orient: 'horizontal', x: 'center', y: '23%', itemWidth: 12, itemHeight: 12, formatter: ['{a|{name}}'].join('\n'), textStyle: { color: '#fff', height: 8, rich: { a: { verticalAlign: 'bottom', }, }, }, data: ['蔬菜产值', '同比增长'], }, xAxis: { type: 'category', data: ['2019年', '2020年', '2021年', '2022年', '2023年'], axisLine: { lineStyle: { color: 'rgba(255,255,255,0.45)', }, }, axisLabel: { color: '#FFF', }, axisTick: { show: false, }, }, yAxis: [{ type: 'value', name: '(亿元)', nameTextStyle: { color: '#fff', padding: [0, 0, 0, 30], }, min: 0, minInterval: 1, splitArea: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.15)', }, }, axisLabel: { color: '#FFF', formatter: (params) => (params === 1 ? 0 : params), }, }, { type: 'value', name: '(%)', nameTextStyle: { color: '#fff', padding: [0, 0, 0, 15], }, axisLine: { show: false, }, axisTick: { show: false, }, splitLine: { show: false, }, axisLabel: { formatter: '{value}%', // 右侧Y轴文字显示 color: '#FFF', }, splitArea: { show: false, }, min: 0, max: 100, }], series: [ { name: '蔬菜产值', type: 'bar', barWidth: 16, barMinHeight: 10, itemStyle: { shadowColor: '#ffffff33', shadowBlur: 1, shadowOffsetX: 4, shadowOffsetY: -3, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#5FD5EC' }, { offset: 1, color: 'rgba(95, 213, 236, 0)' }, ]), }, data: [319, 998, 512, 198, 766], }, { name: '同比增长', type: 'line', yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用QUANMEI smooth: false, // 平滑曲线显示 symbol: 'circle', // 标记的图形为实心圆 symbolSize: 8, // 标记的大小 data: [52, 42, 12, 40, 25], itemStyle: { color: '#FFCF5F' }, }, ], };

Echarts在线免费图表