echarts柱状图之数据过多时，实现横向拖动展示数据
dataZoom: [ { type: 'slider', realtime: true, start: 0, // end: 20, // 数据窗口范围的结束百分比。范围是：0 ~ 100。 height: 5, //组件高度 left: '25%', //左边的距离 right: '25%', //右边的距离 bottom: '5%', //下边的距离 show: true, // 是否展示 fillerColor: "rgba(2,110,252,1)", // 滚动条颜色 borderColor: "rgba(17, 100, 210, 0.12)", backgroundColor: 'rgba(232,244,255,0.51)',//两边未选中的滑动条区域的颜色 handleSize: 0, //两边手柄尺寸 showDetail: false, //拖拽时是否展示滚动条两侧的文字 zoomLock: true, //是否只平移不缩放 moveOnMouseMove: false, //鼠标移动能触发数据窗口平移 //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放 //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。 startValue: 0, // 从头开始。 endValue: 5, // 最多5个 // minValueSpan: 5, // 放大到最少几个 // maxValueSpan: 5, // 缩小到最多几个 }, { type: "inside", // 支持内部鼠标滚动平移 start: 0, // end: 20, startValue: 0, // 从头开始。 endValue: 5, // 最多5个 zoomOnMouseWheel: false, // 关闭滚轮缩放 moveOnMouseWheel: true, // 开启滚轮平移 moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 } ],
window.onload = function () { var task = { XXXXXXXXXXX: function (data) { let xData = []; let seriesBar = []; let mianji = []; var option = {} if (!data || data.length == 0) { option = { title: { text: "暂无数据", x: "center", y: "center", textStyle: { color: "#fff", fontWeight: "normal", fontSize: 16, }, }, } } else { data.forEach(function (item, index, self) { xData.push(data[index].data) seriesBar.push(data[index].zengzhang) mianji.push(data[index].mianji) }) option = { dataZoom: [ { type: 'slider', realtime: true, start: 0, // end: 20, // 数据窗口范围的结束百分比。范围是：0 ~ 100。 height: 5, //组件高度 left: '25%', //左边的距离 right: '25%', //右边的距离 bottom: '12%', //下边的距离 show: true, // 是否展示 fillerColor: "rgba(2,110,252,1)", // 滚动条颜色 borderColor: "rgba(17, 100, 210, 0.12)", backgroundColor: 'rgba(232,244,255,0.51)',//两边未选中的滑动条区域的颜色 handleSize: 0, //两边手柄尺寸 showDetail: false, //拖拽时是否展示滚动条两侧的文字 zoomLock: true, //是否只平移不缩放 moveOnMouseMove: false, //鼠标移动能触发数据窗口平移 //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放 //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。添加这个属性前后的对比见**图二** startValue: 0, // 从头开始。 endValue: 3, // 最多5个 // minValueSpan: 5, // 放大到最少几个 // maxValueSpan: 5, // 缩小到最多几个 }, { type: "inside", // 支持内部鼠标滚动平移 start: 0, // end: 20, startValue: 0, // 从头开始。 endValue: 5, // 最多5个 zoomOnMouseWheel: false, // 关闭滚轮缩放 moveOnMouseWheel: true, // 开启滚轮平移 moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 } ], tooltip: { trigger: 'axis' /*trigger: 'axis', transitionDuration:0, formatter: '{b} </br>项目个数 {c} 个'*/ }, xAxis: { type: 'category', data: xData, axisLabel: { show: true, textStyle: { color: '#faf6f6', //更改坐标轴文字颜色 fontSize: 12 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { color: 'rgba(243,238,238,0.65)' //更改坐标轴颜色 } } }, yAxis: { type: 'value', min: 0, // 坐标轴刻度最小值。 max: 600, // 坐标轴刻度最大值。 splitNumber: 3, //name: "单位（个）", nameTextStyle: { color: "rgba(252,248,248,0.69)", fontSize: 12, }, axisLine: { lineStyle: { color: 'rgba(243,238,238,0.65)' //更改坐标轴颜色 } }, splitLine: {//分割线配置 show: true, lineStyle: { color: "rgba(253,253,253,0.16)", } }, axisLabel: { show: true, textStyle: { color: '#fdf9f9', //更改坐标轴文字颜色 fontSize: 12 //更改坐标轴文字大小 } }, }, series: [ { data: seriesBar, type: 'bar', barWidth: 20,//柱图宽度 itemStyle: { normal: { //柱形图圆角，初始化效果 barBorderRadius: [30, 30, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ef8815', }, { offset: 1, color: '#eaa607', }, ]), } }, }, { data: mianji, type: 'bar', barWidth: 20,//柱图宽度 itemStyle: { normal: { //柱形图圆角，初始化效果 barBorderRadius: [30, 30, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00ff4b', }, { offset: 1, color: '#02f188', }, ]), } }, } ] }; } initChart('.class', option) } } new Vue({ el: "#app", methods: { onemain(row,index) { axios.post("/XXX/XXX").then(res => { if (res.status === 200) { task.XXXXXXXXXXX(res.data) } }).catch(err => { task.XXXXXXXXXXX(null) }) } } })
