2024.11.08今天我学习了如何实现横向柱状图，效果如下：
代码如下：
let series_data = [{name:'第一',value:1},{name:'第二',value:2},{name:'第三',value:3},{name:'第四',value:4},{name:'第五',value:5},{name:'第六',value:6},{name:'第七',value:7},{name:'第八',value:8},];let option = {tooltip: {show: true},grid: {containLabel: true,left: '5%',right: '7%',top: '5%',bottom: '10%'},xAxis: {type: 'value',splitLine: {show: false},axisLabel: {show: false}},yAxis: {type: 'category',axisTick: {show: false},axisLabel: {color: 'white',textStyle: {fontSize: '1.2rem',fontWeight: 'bold'},formatter: function (value) {let str = "";let num = 4; //每行显示字数let valLength = value.length; //该项x轴字数let rowNum = Math.ceil(valLength / num); // 行数if (rowNum > 1) {for (let i = 0; i < rowNum; i++) {let temp = "";let start = i * num;let end = start + num;temp = value.substring(start, end) + "";str += temp;}return str.length > 5 ? str.slice(0, 4) + '...' : str;} else {return value.length > 5 ? value.slice(0, 4) + '...' : value;}},},splitLine: {show: false},axisLine: {show: false},data: series_data.map(item => item.name)},dataZoom: [{yAxisIndex: [0, 1], // 控制y轴滚动对象type: "slider",startValue: 100,endValue: 97,width: 7,height: "90%",top: "5%",right: 0,fillerColor: "#2aa5ff", // 滚动条颜色borderColor: "rgba(17, 100, 210, 0.12)",// backgroundColor: "#b9b9b9", //两边未选中的滑动条区域的颜色backgroundColor: "transparent", //两边未选中的滑动条区域的颜色handleSize: 0, // 两边手柄尺寸showDataShadow: false, //是否显示数据阴影 默认autoshowDetail: false, // 拖拽时是否展示滚动条两侧的文字zoomLock: true, // 禁用缩放功能realtime: true, // 拖动时，是否实时更新系列的视图brushSelect: false,//禁止刷选 就是防止出现+号横移框},{type: "inside",minValueSpan: 10,yAxisIndex: [0],zoomOnMouseWheel: false, // 关闭滚轮缩放moveOnMouseWheel: true, // 开启滚轮平移moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移},],series: [{type: 'bar',data: series_data,label: {show: true,position: 'right',textStyle: {color: 'white',fontSize: '1.2rem',fontWeight: 'bold'}},barWidth: 20,itemStyle: {normal: {barBorderRadius: 7,color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "#00d5fc",},{offset: 1,color: "#00afff",},]),},emphasis: {barBorderRadius: 7},}}]}this.xxxxx.clear();this.xxxxx.resize();this.xxxxx.setOption(option);dataZoom属性详情：
dataZoom: [{type: "slider",realtime: true, // 拖动时，是否实时更新系列的视图startValue: 0,endValue: 5,width: 5,height: "90%",top: "5%",right: 0,// orient: 'vertical', // 设置横向还是纵向, 但是官方不太建议如此使用，建议使用 yAxisIndex 具体指明yAxisIndex: [0, 1], // 控制y轴滚动对象fillerColor: "#0093ff", // 滚动条颜色borderColor: "rgba(17, 100, 210, 0.12)",backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色handleSize: 0, // 两边手柄尺寸showDataShadow: false, //是否显示数据阴影 默认autoshowDetail: false, // 拖拽时是否展示滚动条两侧的文字zoomLock: true,moveHandleStyle: {opacity: 0,},},{type: "inside",// width: 0,startValue: 0,endValue: 10,minValueSpan: 10,yAxisIndex: [0],zoomOnMouseWheel: false, // 关闭滚轮缩放moveOnMouseWheel: true, // 开启滚轮平移moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移},],灵感来自echarts记录篇(三 )：使用横向柱状图实现左侧分类对齐右侧显示数据效果及数据过多加滚动条无缩放效果 - 夏小夏吖 - 博客园
