JQuery定时滚动浏览Echars视图
以下仅供参考~
kk 2022-04-19 13-32-26
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echars视图滚动浏览Demotitle>
<style type="text/css">
body {
background-color: #0f375f;
}
.roll-box {
width: 100%;
height: 400px;
overflow: hidden;
}
.roll-box:hover {
overflow: scroll;
}
style>
head>
<body>
<div class="roll-box" id="roll-box">
<div class="echars-box" id="echars-box">
<div id="echars01" style="width: 100%;height: 400px;">div>
<div id="echars02" style="width: 100%;height: 400px;">div>
<div id="echars03" style="width: 100%;height: 400px;">div>
div>
div>
body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript" charset="utf-8">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function() {
showEchars01()
showEchars02()
showEchars03()
$('.echars-box').myScroll({
speed: 50,
parentId: 'roll-box',
childBoxId: 'echars-box',
});
});
(function($) {
$.fn.myScroll = function(options) {
//默认配置
var defaults = {
speed: 40, //滚动速度,值越大速度越慢
parentId: null, //父元素的ID
childBoxId: null, //内部容器的ID
};
// 后者覆盖前者
var opts = $.extend({}, defaults, options),
time = null;
let allH = $("#" + opts['childBoxId']).outerHeight(true); //整高度
let lastDivH = $("#" + opts['childBoxId']).children("div").last().height();
// 父
let pthis = $("#" + opts['parentId']);
function marquee() {
time = setInterval(function() {
let srH = $(pthis).scrollTop(); //当前滚动的距离高度
let mark = 0;
if (mark >= allH) {
$(pthis).scrollTop(0)
} else {
$(pthis).scrollTop(srH + 1);
mark = srH + 1;
if ((mark + lastDivH) >= allH) {
clearInterval(time);
// 最后一个视图停留3秒
setTimeout(() => {
$(pthis).scrollTop(0);
marquee();
}, 3000)
}
}
}, opts['speed']);
}
$(pthis).hover(function() {
clearInterval(time);
}, function() {
marquee();
});
// 当div上一级容器高度减去最后一个元素div高度大于100时才执行滚动
if ((allH - lastDivH) > 100) {
marquee();
}
}
})(jQuery);
function showEchars01() {
let myChart = echarts.getInstanceByDom(document.getElementById("echars01"));
if (myChart === undefined) {
myChart = echarts.init(document.getElementById("echars01"));
};
// prettier-ignore
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
// prettier-ignore
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
var option = {
title: {
text: '特性示例：渐变色 阴影 点击缩放',
x: 'center',
textStyle: {
color: '#fff'
}
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
color: '#fff'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#fff'
}
},
dataZoom: [{
type: 'inside'
}],
series: [{
type: 'bar',
showBackground: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#83bff6'
},
{
offset: 0.5,
color: '#188df0'
},
{
offset: 1,
color: '#188df0'
}
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2378f7'
},
{
offset: 0.7,
color: '#2378f7'
},
{
offset: 1,
color: '#83bff6'
}
])
}
},
data: data
}]
};
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.on('click', function(params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
myChart.clear();
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
})
}
function showEchars02() {
let myChart = echarts.getInstanceByDom(document.getElementById("echars02"));
if (myChart === undefined) {
myChart = echarts.init(document.getElementById("echars02"));
};
// Generate data
let category = [];
let dottedBase = +new Date();
let lineData = [];
let barData = [];
for (let i = 0; i < 20; i++) {
let date = new Date((dottedBase += 3600 * 24 * 1000));
category.push(
[date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
);
let b = Math.random() * 200;
let d = Math.random() * 200;
barData.push(b);
lineData.push(d + b);
}
// option
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData
},
{
name: 'bar',
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#14c8d4'
},
{
offset: 1,
color: '#43eec6'
}
])
},
data: barData
},
{
name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(20,200,212,0.5)'
},
{
offset: 0.2,
color: 'rgba(20,200,212,0.2)'
},
{
offset: 1,
color: 'rgba(20,200,212,0)'
}
])
},
z: -12,
data: lineData
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#0f375f'
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData
}
]
};
myChart.clear();
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
})
}
function showEchars03() {
let myChart = echarts.getInstanceByDom(document.getElementById("echars03"));
if (myChart === undefined) {
myChart = echarts.init(document.getElementById("echars03"));
};
option = {
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: [{
name: 'Nightingale Chart',
type: 'pie',
radius: [20, 200],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [{
value: 40,
name: 'rose 1'
},
{
value: 38,
name: 'rose 2'
},
{
value: 32,
name: 'rose 3'
},
{
value: 30,
name: 'rose 4'
},
{
value: 28,
name: 'rose 5'
},
{
value: 26,
name: 'rose 6'
},
{
value: 22,
name: 'rose 7'
},
{
value: 18,
name: 'rose 8'
}
]
}]
};
myChart.clear();
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
})
}
script>
html>