dataZoomecharts 配置项内容和展示
dataZoom的内置缩放在移动端进行缩放时特别卡，卡顿
配置项如下
var maxLength = 0;
var depetname = "['惠南','宣桥','北蔡','新场','高桥','康桥','祝桥','南汇新城','川沙','大团','周浦','三林','金桥','金杨','陆家嘴','沪东','张江','花木','洋泾','潍坊','曹路','南码头','书院','上钢','高东','高行','东明','合庆','周家渡','航头','浦兴','万祥','老港','泥城','唐镇','塘桥']";
var cqzb = "[861,316,249,212,208,196,178,141,107,92,87,85,84,79,51,49,48,47,42,35,32,28,23,23,16,16,15,11,10,6,5,4,3,2,2,1]";
var jjcq = "[74,63,39,28,44,120,51,6,57,21,54,36,16,9,4,16,56,38,21,7,23,5,8,24,18,4,19,20,2,36,9,2,8,0,9,15]";
var zczb = "[255,128,259,130,136,571,104,26,185,92,214,264,40,62,54,69,202,126,48,162,74,91,60,92,28,64,118,33,65,127,85,47,38,35,60,87]";
var colNames = eval('(' + depetname + ')');
var data1 = eval('(' + cqzb + ')');
var data2 = eval('(' + jjcq + ')');
var data3 = eval('(' + zczb + ')');
//获取Y轴数据中字数最大长度
colNames.forEach(function(val, index) {
if (maxLength < val.length) {
maxLength = val.length;
}
});
//根据超期在办升序
var arry = [];
var shortEchartsData = {
name: '',
cqzb: 0,
jjcq: 0,
zczb: 0
};
data1.forEach(function(val, index) {
shortEchartsData = {
name: colNames[index],
cqzb: data1[index],
jjcq: data2[index],
zczb: data3[index],
};
arry.push(shortEchartsData);
});
arry.sort(function(a, b) {
return a.cqzb - b.cqzb
});
colNames = [], data1 = [], data2 = [], data3 = [];
arry.forEach(function(item, index) {
colNames.push(item.name);
data1.push(item.cqzb);
data2.push(item.jjcq);
data3.push(item.zczb);
});
option = {
title: {
text: 'Awesome Chart'
},
textStyle: {
fontSize: 13
},
//提示框组件
tooltip: {
trigger: "axis", //触发类型
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {
show: true,
feature: {
dataView: {
readOnly: false
},
restore: {},
}
},
//缩放组件
dataZoom: [{
show: true,
type: "slider", //slider 有单独的滑动条，用户在滑动条上进行缩放或漫游
orient: "vertical",
right: "3%",
yAxisIndex: 0, //组件控制的 y轴
filterMode: 'empty', //filter weakFilter empty none
realtime: false, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新
borderColor: 'transparent',
backgroundColor: '#e2e2e2',
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
handleSize: 20,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: '#aaa'
},
showDataShadow: false,
width: 10,
startValue: colNames.length <= 9 ? 0 : colNames.length - 9,
endValue: colNames.length - 1, //9,
labelFormatter: function(params) {
return colNames[params]
}
}, {
type: "inside", // inside 内置于坐标系中，可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
yAxisIndex: 0,
filterMode: 'empty',
realtime: false,
//startValue: colNames.length <= 9 ? 0 : Math.floor(colNames.length / 4) * 3,// 0,
//endValue: colNames.length - 1,//9,
}],
//图例组件:展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
legend: {
type: "plain", //
align: "left", //图例标记和文本的对齐
left: "center",
top: 2,
data: ["超期在办", "即将超期", "正常在办"]
},
//直角坐标系网格
grid: {
show: false, //是否显示直角坐标系网格 default: false
top: 38,
bottom: 50,
left: maxLength > 4 ? 90 : 62,
right: "15%",
containLable: true, //区域是否包含坐标轴的刻度标签
},
//直角坐标系 grid 中的 x 轴
xAxis: {
type: "value", //坐标轴类型 value 数值轴\category 类目轴\time 时间轴\log 对数轴
axisLabel: { //坐标轴刻度标签相关设置
fontWeight: "bolder", //字体粗细
fontSize: 13 //字体大小
},
axisLine: {
lineStyle: {
color: "#008ACD"
}
},
splitNumber: 5,
},
//直角坐标系 grid 中的 y 轴
yAxis: {
type: "category",
axisLabel: { //坐标轴刻度标签相关设置
fontWeight: "bolder", //字体粗细
fontSize: 13, //字体大小
formatter: function(itemValue) {
return itemValue.length > 5 ? (itemValue.substring(0, 5) + '...') : itemValue
}
},
axisLine: {
lineStyle: {
color: "#008ACD"
}
},
data: colNames,
},
//系列列表
series: [{
type: "bar",
name: "超期在办",
barWidth: 19,
barMinHeight: 14,
stack: "统计",
itemStyle: {
normal: {
color: "#E7536B",
borderWidth: 0,
barBorderRadius: 6
}
},
label: {
normal: {
show: true,
position: "inside",
color: "#0868A4",
fontSize: 14
}
},
data: data1
}, {
type: "bar",
name: "即将超期",
barWidth: 19,
stack: "统计",
barMinHeight: 14,
itemStyle: {
normal: {
color: "#FFCC66",
borderWidth: 0,
barBorderRadius: 6,
}
},
label: {
normal: {
show: true,
position: "inside",
color: "#0868A4",
fontSize: 14
}
},
data: data2
}, {
type: "bar",
name: "正常在办",
barWidth: 19,
stack: "统计",
barMinHeight: 14,
itemStyle: {
normal: {
color: "#81D740",
borderWidth: 0,
barBorderRadius: 6,
}
},
label: {
normal: {
show: true,
position: "inside",
color: "#0868A4",
fontSize: 14
}
},
data: data3
}]
};
// //添加缩放事件，根据当前可视区域内的最大值来调整x轴的最大值
// mychart.on("dataZoom", function(params) {
// var Option = mychart.getOption();
// var dz = Option.dataZoom[0];
// var start = dz.startValue;
// var end = dz.endValue;
// var maxData = 0;
// var arry1 = data1.slice(start, end + 1);
// var arry2 = data2.slice(start, end + 1)
// var arry3 = data3.slice(start, end + 1)
// var max = 0;
// for (var i = 0; i < arry1.length; i++) {
// if (maxData < arry1[i] + arry2[i] + arry3[i]) {
// maxData = arry1[i] + arry2[i] + arry3[i]
// }
// }
// mychart.setOption({
// xAxis: {
// max: maxData + 14,
// splitNumber: 5,
// }
// });
// });
截图如下
