addListenerResize: function() {
var self = this;
window.addEventListener('resize', self.resizeDebounce(self.testFunc, 1000), false)
},
resizeDebounce: function(func, wait) {
let timeout = null;
return function() {
if(timeout) clearInterval(timeout);
timeout = setTimeout(function(){
func.apply(this, arguments);
}, wait)
}
},
testFunc:function(){
console.log(1)
}
echarts示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>财务与资产管理</title>
<style>
html,
body {
width: 100%;
height: 400px;
}
.container {
width: 100%;
height: 400px;
}
.echartsView {
width: 15%;
height: 400px;
float: left;
}
p {
margin: 0;
padding: 0;
}
.tootTipCircle {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
}
.tootTipInsideText {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="container">
<div id="app1" class="echartsView"></div>
<div id="app2" class="echartsView"></div>
<div id="app3" class="echartsView"></div>
<div id="app4" class="echartsView"></div>
<div id="app5" class="echartsView"></div>
<div id="app6" class="echartsView"></div>
</div>
</body>
<script src="../lib/jquery-3.5.1.js"></script>
<script src="../lib/echart/echarts.js"></script>
<script src="../js/echartsColor.js"></script>
<script>
(function () {
$(document).ready(function () {
echartsEntity.init();
echartsEntity.addListenerResize();
})
var echarts1 = echarts.init(document.getElementById("app1"))
var echarts2 = echarts.init(document.getElementById("app2"))
var echarts3 = echarts.init(document.getElementById("app3"))
var echarts4 = echarts.init(document.getElementById("app4"))
var echarts5 = echarts.init(document.getElementById("app5"))
var echarts6 = echarts.init(document.getElementById("app6"))
var echartsEntity = {
init: function () {
var self = this;
var echarts1Data = {
category: ['1月', '2月', '3月', '4月', '5月'],
barData: [260, 280, 300, 180, 400]
}
this.drawEcharts(echarts1, echarts1Data, true, true);
this.drawEcharts(echarts2, echarts1Data, false, false);
this.drawEcharts(echarts3, echarts1Data, false, true);
this.drawEcharts(echarts4, echarts1Data, false, false);
this.drawEcharts(echarts5, echarts1Data, false, true);
this.drawEcharts(echarts6, echarts1Data, false, true);
echarts.connect([echarts1, echarts2, echarts3, echarts4, echarts5, echarts6]);
},
// 绘制柱状图, echarts实例, echarts数据, 是否显示纵坐标(true显示， false不显示), 颜色配置(true绿色渐变, false蓝色渐变)
drawEcharts: function (echartsDom, echartsData, yAxisViewflag, colorViewFlag) {
var self = this;
var category = echartsData.category; // 横轴
var barData = echartsData.barData; // 柱状图数据
var yAxisLabel = yAxisViewflag ? { formatter: '{value} ', color: echartsColor.yAxis.axisLabel.color } : { show: false };
var linearGradientColor = colorViewFlag ? [{ offset: 0, color: '#44D3D2' }, { offset: 1, color: '#0A315F' }] : [{ offset: 0, color: '#00B7F6' }, { offset: 1, color: '#022D63' }]
var options = {
backgroundColor: echartsColor.backgroundColor,
legend: {
show: false,
},
tooltip: {
trigger: 'axis',
backgroundColor: echartsColor.tooltip.backgroundColor,
borderWidth: 1,
borderColor: echartsColor.tooltip.borderColor,
textStyle: {
color: echartsColor.tooltip.textStyle.color,
fontSize: 12,
lineHeight: 14
},
padding: [5, 10],
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: echartsColor.tooltip.axisPointer.label.backgroundColor
}
},
formatter: function (params) {
var str = "";
params.forEach(function (item, index) {
if (item.seriesType == 'bar') {
str += '<p class="tootTipText"><label class="tootTipCircle" style="background-color: ' + item.color.colorStops[0].color + '"></label>' + ' ' + item.seriesName + ':' + item.value + '</p>';
}
})
return str;
}
},
grid: {
left: '15%',
right: '5%'
},
xAxis: {
show: false,
type: 'value'
},
yAxis:
{
type: 'category',
inverse: true,
axisLabel: yAxisLabel,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: category
},
series: [
{
name: '',
type: 'bar',
barWidth: 10,
label: {
show: false
},
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
1, 1, 0, 0, linearGradientColor
)
}
},
data: barData
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#124970"
}
},
symbolRepeat: "fixed",
symbolMargin: -1,
symbolRotate: 45,
symbol: "rect",
symbolClip: true,
symbolSize: [13, 1],
symbolPosition: "start",
data: barData,
z: 10,
animationEasing: "elasticOut"
},
]
};
echartsDom.setOption(options, true)
},
addListenerResize: function () {
var self = this;
window.addEventListener('resize', self.resizeDebounce(self.ecahrtsResizeFunc, 500), false)
},
resizeDebounce: function (func, wait) {
let timeout = null;
return function () {
if (timeout) clearInterval(timeout);
timeout = setTimeout(function () {
func.apply(this, arguments);
}, wait)
}
},
ecahrtsResizeFunc: function () {
echarts1.resize();
echarts2.resize();
echarts3.resize();
echarts4.resize();
echarts5.resize();
echarts6.resize();
}
}
})();
</script>
</html>
