1，需求：几个图形进行手动轮播播放。
2，转自https://www.jb51.net/article/175112.htm的图片轮播图，进行改进与echarts结合使用；
声明：// 此操作并没有对接口
3，直接上代码：
html部分：
<div class="slider">
<ul style="width: 100%;height: 100%;">
<li id="chart1" style="height: 100%; width: 100%;float: left;"></li>
<li id="chart2" style="height: 100%; width: 100%;float: left;"></li>
<li id="chart3" style="height: 100%; width: 100%;float: left;"></li>
<li id="chart4" style="height: 100%; width: 100%;float: left;"></li>
<li id="chart5" style="height: 100%; width: 100%;float: left;"></li>
</ul>
<div class="arrow">
<span class="left"><</span>
<span class="right">></span>
</div>
<div class="box">
<ul>
<li class="show"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
(2),css部分：
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
width: 818px;
height: 617px;
float: left;
margin-left: 2%;
margin-top: 8%;
position: relative;
}
.slider>ul {
height: 100%;
}
.slider>ul>li {
display: none;
position: absolute;
width: 100%;
height: 100%;
}
.slider li:first-child {
display: block;
/* width: 100%; */
}
.arrow {
display: none;
}
.slider:hover .arrow,
.slider:hover .box {
display: block;
}
.left,
.right {
width: 35px;
height: 70px;
/* background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); */
font-size: 40px;
background: none;
background-color: rgba(0, 0, 0, 0.1);
color: rgb(193, 214, 234);
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.left:hover,
.right:hover {
background-color: rgba(0, 0, 0, .2);
}
.left {
left: 0;
}
.right {
right: 0;
}
.box {
width: 250px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -75px;
bottom: 20px;
display: none;
}
.box li {
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
display: inline-block;
float: left;
margin-left: 12px;
}
.show {
background-color: #06FCFC !important;
}
（3）js部分：
$(function () {
var num = 0;
$(".right").click(function () {
num++;
if (num === $(".slider>ul>li").length) {
num = 0;
}
$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");
SwitchChange(num + 1, option)
});
$(".left").on("click", function () {
num--;
if (num === -1) {
num = $(".slider>ul>li").length - 1;
}
$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");
SwitchChange(num + 1, option)
});
// $(".box li").on("click", function () {
// var idx = $(this).index();
// $(".slider li").eq(idx).fadeIn().siblings("li").fadeOut();
// $(".box li").eq(idx).addClass("show").siblings("li").removeClass("show");
// });
function SwitchChange(num, option) {
var myChart = echarts.init(document.getElementById(`chart${num}`));
var resize = {
height: innerHeight * 4 / 8,
};
myChart.resize(resize);
myChart.setOption(option[num - 1]);
}
var option1 = {
title: { //标题组件
text: '80%',
subtext: '',
itemGap: 150,
textStyle: {
color: '#fff', //文字颜色
fontStyle: 'normal', //字体风格：'normal','italic','oblique'
fontWeight: 'bold', //字体粗细 ：'normal','bold','bolder','lighter',100 | 200 | 300 | 400...//字体系列： 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 82, //字体大小
},
subtextStyle: {
color: '#fff', //文字颜色
fontStyle: 'normal', //字体风格：'normal','italic','oblique'
fontFamily: 'PingFang SC-Bold, PingFang SC',//字体系列： 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 24, //字体大小
},
x: 'center',
// y:'center',
bottom: 10,
},
tooltip: {
formatter: "{a} <br/>{b} : {c}"
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: { formatter: '{value}' }, //仪表盘显示数据
axisLine: { //仪表盘轴线样式
show: true,
lineStyle: {
width: 0,
color: [[0.3, 'rgb(26,143,255)'],[0.5, 'rgb(23,151,255)'],[0.7, 'rgb(13,213,253)'],[0.8, 'rgb(9,237,253)'],[1, 'rgb(70,100,144)']],
// opacity: 0.6, //盘的颜色变成透明
}
},
axisLabel: {
show: false,
lineStyle: {
width: 20,
color: 'auto'
// color: [[0.8, '#0066FF'], [1, '#E6EBF8']],
// opacity: 0.4, //盘的颜色变成透明
}
},
splitLine: { //分割线样式,是大分割线
show: true,
length: 20,
// 距离线的位置
// distance: 0,
lineStyle: {
color: 'auto',
width: 5,
// color: [[0.8, '#0066FF'], [1, '#E6EBF8']],
opacity: 1,
}
},
// 刻度线
axisTick: {
show: true,
length: 20,
splitNumber: 5, // 每个分割线内的刻度线分为5份
lineStyle: {
color: 'auto',
width: 5,
opacity: 1,
}
},
// data: [{ value: '80' }],
markPoint: {
show:false,
symbol: 'circle',
symbolSize: 0,
data: [
//跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
{ value: '', x: 'center', y: 'center', itemStyle: { color: '#fff' } }
],
itemStyle: {
normal: {
label: {
show: true,
color: '#FFF',//气泡中字体颜色
fontSize: 0
}
}
},
},
detail: { // 仪表盘详情，用于显示数据。(仪表盘的数值字体样式和显示位置)
show: true, // 是否显示详情,默认 true。
offsetCenter: [0, 0],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
color: "#fff", // 文字的颜色,默认 auto。
fontSize: 10, // 文字的字体大小,默认 15。
formatter: "{value}", // 格式化函数或者字符串
},
pointer: { // 仪表盘指针。
show: false, // 是否显示指针,默认 true。
length: "60%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
width: 15, // 指针宽度,默认 8。
},
itemStyle: { // 仪表盘指针样式。
color: "#0066FF", // 指针颜色，默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
borderColor: "#fff", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
// shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", // 阴影颜色。支持的格式同color。
},
}
]
};
var option2={......};
let option = [option1, option2, option3,option4, option5, ];
for (var i = 1; i < num + 1; i++) {
SwitchChange(i, option[i])
}
SwitchChange(1, option)
});