自己使用echarts4的dataset屬性實現的一個雙y軸的效果:
代碼如下:
option = { dataset: { source: [ [61.2, 51.6, 74, '北京分'], [67.5, 59, 75.3, '廣州分'], [59.5, 49.2, 9305, '浙江分'], [57, 63, 8605, '石家庄分'], [55.8, 53.6, 87.2, '黑龍江分'], [70, 59, 8105, '河南分'], [59.1, 47.6, 84, '福建分'], [66, 69.8, 8405, '陝西分'], [76.2, 66.8, 75, '內蒙古分'], [76.2, null, 75, '內蒙古分001'], [null, 66.8, 75, '內蒙古分002'], [76.2, 66.8, null, '內蒙古分003'], [76.2, null, 75, '內蒙古分004'] ], dimensions: ['采購價格', '銷售價格', '銷量', '分公司名稱'] }, title: this.title, grid: [{ left: '3%', bottom: '3%', right: '0%', containLabel: true }], tooltip: { // trigger: 'axis', showDelay: 0, axisPointer: { show: true, type: 'cross', lineStyle: { type: 'dashed', width: 1 } } }, toolbox: { feature: { dataZoom: {}, brush: { type: ['rect', 'polygon', 'clear'] } } }, brush: {}, legend: { data: ['女性', '男性'], left: 'center' }, xAxis: [{ type: 'category', scale: true, axisLabel: { formatter: '{value}' }, axisLine: { symbol: ['none', 'arrow'] }, splitLine: { show: false } }, { type: 'category', scale: true, axisLabel: { formatter: '{value}' }, axisLine: { symbol: ['none', 'arrow'] }, splitLine: { show: false } }], yAxis: [{ type: 'value', scale: true, axisLine: { symbol: ['none', 'arrow'] }, splitLine: { show: false } }, { type: 'value', scale: true, axisLine: { symbol: ['none', 'arrow'] }, splitLine: { show: false } }, { type: 'value', scale: true, axisLine: { symbol: ['none', 'arrow'] }, splitLine: { show: false } }], series: [{ name: '采購價格', xAxisIndex: 0, yAxisIndex: 0, type: 'scatter', encode: { x: 3, y: 0, tooltip: [0, 1, 2] }, markLine: { symbol: 'none', lineStyle: { normal: { type: 'dashed' } }, label: { formatter: '采購價格紅線值{c}', position: 'middle' }, data: [{ type: 'average', name: '平均值' }] } }, { name: '銷售價格', type: 'scatter', encode: { x: 3, y: 1, tooltip: [0, 1, 2] }, markLine: { symbol: 'none', lineStyle: { normal: { type: 'dashed' } }, label: { formatter: '銷售價格紅線值{c}', position: 'middle' }, data: [{ type: 'average', name: '平均值' }] } }, { type: 'bar', xAxisIndex: 0, yAxisIndex: 2, encode: { x: 3, y: 2, tooltip: [0, 1, 2, 3] } }] };
效果圖如下: