const axisData = ['一月','二月','三月','四月'] const defaultOption = { legend: [ { top: 5, right: 'center', data: ['个股贡献', '持有贡献', '交易贡献', '持仓权重（右轴）'] }, { top: '50%', right: 'center', width: '100%', data: ['市场价', '历史成本价', '买入金额占股票资产权重（右轴）', '卖出金额占股票资产权重（右轴）'], }, ], grid: [ { left: 80, bottom: '60%', right: 80, }, { top: '60%', left: 80, bottom: 60, right: 80, }, { top: 60, left: 80, bottom: 60, right: 80, }, ], dataZoom: [ { type: 'slider', xAxisIndex: [0, 1, 2], bottom: 5, }, ], axisPointer: { link: { xAxisIndex: 'all' }, }, }; option = { //你的代码 ...defaultOption, tooltip: { trigger: 'axis', // formatter: (params) => { // let res = ''; // params.forEach(({ seriesName, value, marker }) => { // seriesName !== 'flag' // ? (res += `

${marker}${seriesName}${value} // ${seriesName == '市场价' || seriesName == '历史成本价' || value === '' ? '' : '%'} //

`) // : null; // }); // return `

${params[0].axisValue}

${res}

`; // }, }, xAxis: [ { type: 'category', data: axisData, axisTick: { show: false, }, triggerEvent: true, gridIndex: 0, }, { type: 'category', data: axisData, axisTick: { show: false, }, triggerEvent: true, gridIndex: 1, }, { type: 'category', data: axisData, show: false, gridIndex: 2, }, ], yAxis: [ { // 上图的左边y轴黄色 show: true, axisLabel: { formatter: (value) => Math.round(value * 100) / 100 + '%' }, axisLine: { show: true, lineStyle: { color: '#ff0', width: 1, }, }, gridIndex: 0, // 第一个坐标 alignTicks: true, }, { // 上图的右边y轴青色 show: true, axisLabel: { formatter: (value) => Math.round(value * 100) / 100 + '%' }, axisLine: { onZero: false, show: true, lineStyle: { color: '#0ff', width: 1, }, }, gridIndex: 0, // 第一个坐标 scale: true, }, { // 下图的左边y轴红色 show: true, axisLabel: { formatter: (value) => Math.round(value * 100) / 100 }, axisLine: { onZero: false, show: true, lineStyle: { color: '#f00', width: 1, }, }, gridIndex: 1, // 第二个坐标 scale: true, }, { // 下图的右边y轴绿色 show: true, axisLabel: { formatter: (value) => Math.round(value * 100) / 100 + '%' }, axisLine: { onZero: false, show: true, lineStyle: { color: '#0f0', width: 1, }, }, gridIndex: 1, // 第二个坐标 alignTicks: true, scale: true, }, { // 贯穿两个图表的 show: false, axisLabel: { formatter: `{value}` }, axisLine: { onZero: false, show: true, lineStyle: { color: '#ccc', width: 1, }, }, gridIndex: 2, }, ], series: [ { name:'图1', type: 'bar', yAxisIndex: 0, xAxisIndex: 0, showSymbol: false, showBackground: true, itemStyle: { normal: { barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下） color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ 'red', 'yellow' ].map((color, offset) => ({ color, offset }))), // 渐变 }, }, label: { normal: { color: '#000', show: true, position: [0, '-20px'], textStyle: { fontSize: 16, }, formatter: '{b}', }, }, data:[9,3,1,5] }, { name:'图2', data:[4,3,8,2], type: 'bar', yAxisIndex: 2, xAxisIndex: 1, showSymbol: false, connectNulls: false, itemStyle: { color: '#00f', }, } ], };

同轴柱状图