2 paths: {
3 "echarts": "/Content/js/echarts-2.0.4/build/echarts",
4 "echarts/chart/pie": "/Content/js/echarts-2.0.4/build/echarts"
5 }
6 })
7 // 使用
8 require(
9 [
10 'echarts',
11 'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
12 ],
13 function (ec) {
14 // 基于准备好的dom，初始化echarts图表
15 var myChart = ec.init(document.getElementById('main'))
16 option = {
17 title: {
18 text: row.ProjectName,
19 x: 'center'
20 },
21 tooltip: {
22 trigger: 'item',
23 formatter: "{a}
{b} : {c} ({d}%)"
24 },
25 legend: {
26 orient: 'vertical',
27 x: 'left',
28 data: (function () {
29 var name = []
30 com.ajax({
31 type: 'GET',
32 cache: false,
33 url: '/api/Operation/SafetyCheckReport/GetDangerName',
34 data: { "UpCode": DangerType },
35 success: function (d) {
36 for (var i = 0i <d.lengthi++) {
37 name.push(d[i].Name)
38 }
39 }
40 })
41 return name
42 })()
43 },
44 toolbox: {
45 show: true,
46 feature: {
47 restore: { show: true },
48 saveAsImage: { show: true }
49 }
50 },
51 calculable: false,
52 series: [
53 {
54 type: 'pie',
55 radius: '50%',
56 center: ['50%', '50%'],
57 data: (function () {
58 var arr = []
59 $.ajax({
60 type: 'GET',
61 async: false,
62 cache: false,
63 url: self.urls.querytow,
64 data: { "ProjectID": row.ProjectID, "UpCode": DangerType },
65 success: function (d) {
66 if (d[0].koujian != 0) {
67 arr.push({ value: d[0].koujian, name: '扣件式脚手架'})
68 } else {
69 arr.push({ value: d[0].koujian, name: '扣件式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
70 }
71 if (d[0].menshi != 0) {
72 arr.push({ value: d[0].menshi, name: '门式脚手架'})
73 } else {
74 arr.push({ value: d[0].menshi, name: '门式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
75 }
76 if (d[0].shuangpai != 0) {
77 arr.push({ value: d[0].shuangpai, name: '双排外竹脚手架'})
78 } else {
79 arr.push({ value: d[0].shuangpai, name: '双排外竹脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
80 }
81 if (d[0].wankou != 0) {
82 arr.push({ value: d[0].wankou, name: '碗扣式脚手架'})
83 } else {
84 arr.push({ value: d[0].wankou, name: '碗扣式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
85 }
86 if (d[0].sanjiao != 0) {
87 arr.push({ value: d[0].sanjiao, name: '三角形钢管悬挑脚手架'})
88 } else {
89 arr.push({ value: d[0].sanjiao, name: '三角形钢管悬挑脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
90 }
91 if (d[0].xinggang != 0) {
92 arr.push({ value: d[0].xinggang, name: '型钢悬挑脚手架(阳角A)'})
93 } else {
94 arr.push({ value: d[0].xinggang, name: '型钢悬挑脚手架(阳角A)', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
95 }
96 if (d[0].duopai != 0) {
97 arr.push({ value: d[0].duopai, name: '多排悬挑架主梁验算'})
98 } else {
99 arr.push({ value: d[0].duopai, name: '多排悬挑架主梁验算', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
100 }
101 if (d[0].fuzhe != 0) {
102 arr.push({ value: d[0].fuzhe, name: '附着升降脚手架'})
103 } else {
104 arr.push({ value: d[0].fuzhe, name: '附着升降脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
105 }
106 if (d[0].xuangua != 0) {
107 arr.push({ value: d[0].xuangua, name: '悬挂式吊篮'})
108 } else {
109 arr.push({ value: d[0].xuangua, name: '悬挂式吊篮', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
110 }
111 if (d[0].gangguan != 0) {
112 arr.push({ value: d[0].gangguan, name: '钢管落地卸料平台'})
113 } else {
114 arr.push({ value: d[0].gangguan, name: '钢管落地卸料平台',itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
115 }
116 if (d[0].pingtai != 0) {
117 arr.push({ value: d[0].pingtai, name: '型钢悬挑卸料平台'})
118 } else {
119 arr.push({ value: d[0].pingtai, name: '型钢悬挑卸料平台',itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
120 }
121 if (d[0].jingjia != 0) {
122 arr.push({ value: d[0].jingjia, name: '井架落地卸料平台'})
123 } else {
124 arr.push({ value: d[0].jingjia, name: '井架落地卸料平台', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
125 }
126 if (d[0].fanghu != 0) {
127 arr.push({ value: d[0].fanghu, name: '防护棚'})
128 } else {
129 arr.push({ value: d[0].fanghu, name: '防护棚', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
130 }
131 if (d[0].mujiao != 0) {
132 arr.push({ value: d[0].mujiao, name: '木脚手架'})
133 } else {
134 arr.push({ value: d[0].mujiao, name: '木脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
135 }
136 if (d[0].xiedao != 0) {
137 arr.push({ value: d[0].xiedao, name: '斜道'})
138 } else {
139 arr.push({ value: d[0].xiedao, name: '斜道', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
140 }
141 if (d[0].xuantiao != 0) {
142 arr.push({ value: d[0].xuantiao, name: '悬挑防护棚'})
143 } else {
144 arr.push({ value: d[0].xuantiao, name: '悬挑防护棚', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
145 }
146
147 }
148 })
149 return arr
150 })()
151 }
152 ]
153 }
154 // 为echarts对象加载数据
155 myChart.setOption(option)
156 }
157 )
的使用规则是：电压表要并联在电路中；接线
@keyframes fade-in {0% {opacity: 0}/*初始状态 透明度为0*/
40% {opacity: 0}/*过渡状态 透明度为0*/
100% {opacity: 1}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
0% {opacity: 0}
40% {opacity: 0}
100% {opacity: 1}
}
@keyframes fade-out {
0% {opacity: 1}/*初始状态 透明度为1*/
40% {opacity: 1}/*过渡状态 透明度为1*/
100% {opacity: 0}/*结束状态 透明度为0*/
}
@-webkit-keyframes fade-out {/*针对webkit内核*/
0% {opacity: 1}
40% {opacity: 1}
100% {opacity: 0}
}
.wrapper {
animation: fade-in/*动画名称*/
animation-duration: 1.5s/*动画持续时间*/
-webkit-animation:fade-in 1.5s/*针对webkit内核*/
}
.wrapper1 {
animation: fade-out/*动画名称*/
animation-duration: 1.5s/*动画持续时间*/
-webkit-animation:fade-in 1.5s/*针对webkit内核*/
}
$(.wrapper).click(function(){
removeClass(wrapper)
addClass(wrapper1)
})
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div div {
width: 30px
height: 30px
display: inline-block
border: 1px solid black
background-repeat: no-repeat
background-size: 300% 300%
}
#img1 {
background-position: top left
}
#img2 {
background-position: top
}
#img3 {
background-position: top right
}
#img4 {
background-position: center left
}
#img5 {
background-position: center
}
#img6 {
background-position: center right
}
#img7 {
background-position: bottom left
}
#img8 {
background-position: bottom
}
#img9 {
background-position: bottom right
}
</style>
</head>
<body>
<div>
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
<div>
<div id="img4"></div>
<div id="img5"></div>
<div id="img6"></div>
</div>
<div>
<div id="img7"></div>
<div id="img8"></div>
<div id="img9"></div>
</div>
<button>next</button>
</body>
<script>
let arr = ["http://iconfont.alicdn.com/t/1522400286994.jpg@100h_100w.jpg", "http://iconfont.alicdn.com/t/1510710350863.png@100h_100w.jpg", "http://iconfont.alicdn.com/t/1553563063102.jpg@100h_100w.jpg"]
let num = 0
let imgFun = () => {
document.querySelectorAll("div div").forEach(item => {
item.style.backgroundImage = 'url(' + arr[num] + ')'
})
}
imgFun()
document.querySelector("button").onclick = () => {
if (num < arr.length - 1) {
num++
} else {
num = 0
}
imgFun()
}
</script>
</html>
请采纳
