option = { backgroundColor: '#070e2e', color: ['#0C65F6', '#00FFA6', '#F4DF58'], grid: { left: '12%', right: '14%', bottom: '10%', top: '10%', }, legend: { icon: 'rect', x: 'center', y: '23%', orient: 'horizontal', itemWidth: 12, itemHeight: 12, formatter: ['{a|{name}}'].join('\n'), textStyle: { color: '#fff', height: 8, rich: { a: { verticalAlign: 'bottom', }, }, }, data: ['税收收入', '同比增长'], }, 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 (params[i].seriesName) { 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 }, }, 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', min: 0, minInterval: 1, splitArea: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.15)', // type: 'dashed', // dotted 虚线 }, }, axisLabel: { color: '#fff', }, }, { type: 'value', axisLine: { show: false, }, axisTick: { show: false, }, splitLine: { show: false, }, axisLabel: { formatter: '{value}%', // 右侧Y轴文字显示 color: '#fff', }, splitArea: { show: false, }, }], series: [ { // 柱底圆片 name: '', type: 'pictorialBar', symbolSize: [16.1, 9], // 调整截面形状 z: 1, symbolOffset: [0, 3], itemStyle: { color: '#00ABFF', }, data: [319, 998, 512, 198, 766], }, { name: '税收收入', type: 'bar', z: 2, barWidth: 16, barMinHeight: 10, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#00D5FF' }, { offset: 1, color: '#00ABFF' }, ]), }, data: [319, 998, 512, 198, 766], }, { // 柱顶圆片 name: '', type: 'pictorialBar', symbolSize: [16, 9], // 调整截面形状 symbolOffset: [0, -4], z: 3, symbolPosition: 'end', itemStyle: { color: '#008FDF', }, data: [319, 998, 512, 198, 766], }, { name: '同比增长', type: 'line', yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用quanmei z: 4, smooth: false, // 平滑曲线显示 symbol: 'circle', // 标记的图形为实心圆 symbolSize: 8, // 标记的大小 data: [20, 12, 52, 40, 25], itemStyle: { color: '#FFCF5F' }, }, ], };

Echarts在线免费图表