option = { // grid: { // top: '16.5%', // left: '1.5%', // right: '2%', // bottom: 6, // containLabel: true, // }, dataZoom: [ { type: 'slider', // 隐藏或显示（true）组件 show: true, backgroundColor: 'rgb(19, 63, 100)', // 组件的背景颜色。 fillerColor: 'rgb(16, 171, 198)', // 选中范围的填充颜色。 borderColor: '#fff', // 边框颜色 showDetail: false, // 是否显示detail，即拖拽时候显示详细数值信息 // startValue: 0, // endValue: 1, filterMode: 'empty', width: '90%', // 滚动条范围宽度 height: 0, // 滚动条高度 left: 'center', zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小 handleSize: 0, // 控制手柄的尺寸 // bottom: 3, // dataZoom-slider组件离容器下侧的距离 // start: 0, // 移动手柄的尺寸位置 // end:100, // minSpan: 10, moveHandleIcon: 'none', // 移动手柄中间icon maxValueSpan: 14, // x轴类目数最多14个超出显示缩放组件dataZoom moveHandleSize: 8, // 移动手柄的尺寸高度。 // 移动手柄的样式 moveHandleStyle: { color: '#ddd', }, // 高亮样式设置 emphasis: { // 移动手柄的样式 moveHandleStyle: { color: '#ddd', }, }, }, { // 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条 type: 'inside', zoomOnMouseWheel: false, // 滚轮是否触发缩放 moveOnMouseMove: true, // 鼠标滚轮触发滚动 moveOnMouseWheel: true, }, ], tooltip: { trigger: 'axis', show: true, padding: 0, borderWidth: 0, backgroundColor: 'rgba(0,0,0,0)', axisPointer: { type: 'line', lineStyle: { color: 'rgba(53, 142, 254, .1)', width: 40, type: 'solid', }, }, // 触发效果移动上去背景效果 formatter(params) { const title = params[0].axisValue let itemTemp = params.map(item => { const itemColor = item.color const bgcolor = typeof itemColor === 'string' ? itemColor : itemColor?.colorStops[0]?.color return `

${item.seriesName}

${item.value}${item.seriesName === '不规范操作占比' ? '%' : ''}

` }) const temp1 = `` return temp1 }, }, legend: { // show:true, // right: 0, // itemWidth: 20, // itemHeight: 5, // textStyle: { // fontSize: 12, // lineHeight: 12, // rich: { // a: { // verticalAlign: 'middle', // }, // }, // padding:[0,0,-2,0], //[上、右、下、左] // }, show: true, icon: 'rect', orient: 'horizontal', top: '13.5', right: '12%', itemWidth: 8, itemHeight: 8, itemGap: 20, textStyle: { // color: '#FFFFFF' color: '#4E5969', fontSize: 12, }, }, xAxis: [ { splitLine: { show: false, }, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: '#ddd', }, }, axisLabel: { // 坐标轴刻度标签的相关设置 show: true, // 是否展示坐标轴label color: '#666', fontSize: 12, interval: 'auto', }, // axisLabel: { // padding: [0, 0, 0, -20] // 四个数字分别为上右下左与原位置距离 // }, type: 'category', data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49], }, // 背景柱体，不显示数据在图表中，只显示背景色 // { // type: 'category', // show: false, // data:['2018年', '2019年', '2020年', '2021年', '2022年'] // } ], yAxis: [ { name: '数量', nameTextStyle: { color: 'rgba(153, 153, 153, 1)', fontSize: 14, align: 'right', }, type: 'value', min: 0, axisLabel: { // 坐标轴刻度标签的相关设置 show: true, // 是否展示坐标轴label color: '#666', fontSize: 12, formatter: '{value}', // 格式化label }, axisLine: { show: false, lineStyle: { color: 'rgba(0,0,0,0.5)', }, }, splitLine: { show: false, }, axisTick: { show: false, }, }, { name: '占比(%)', nameTextStyle: { color: 'rgba(153, 153, 153, 1)', fontSize: 14, }, type: 'value', min: 0, axisLabel: { // 坐标轴刻度标签的相关设置 show: true, // 是否展示坐标轴label color: '#666', fontSize: 12, formatter: '{value}', // 格式化label }, axisLine: { show: false, lineStyle: { color: 'rgba(0,0,0,0.5)', }, }, splitLine: { show: true, lineStyle: { color: ['rgba(109,133,185,0.3)'], // 线条颜色 // width: 1, type: 'dashed', // 线条样式，默认是实现，dashed是虚线 }, }, axisTick: { show: false, }, }, ], series: [ { name: '水果数量', type: 'bar', barWidth: '12', // barGap:10, color: '#247FFF', data: [100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149], itemStyle: { color: '#358EFE', }, emphasis: { disabled: true, focus: 'none', }, }, { yAxisIndex: 1, name: '水果占比', type: 'bar', barWidth: '12', // barGap:10, color: '#247FFF', data: [200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249], itemStyle: { color: '#12C2C1', }, emphasis: { disabled: true, focus: 'none', }, }, ], }

双Y轴柱状图+图表可横向滚动