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)
})
}
}
})
