echarts demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Visualization</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<!-- link href="Style/cover.css" rel="stylesheet" -->
<style>
@keyframes backgroundMove
{
0% {background-position:0 0;}
100% {background-position:-2560px 0;}
}
@keyframes tipAnimate
{
0% {transform:rotateX(0deg);opacity:1;}
90% {transform:rotateX(0deg);opacity:0.8;}
95% {transform:rotateX(180deg);opacity:0.2;}
100% {transform:rotateX(360deg);opacity:0.9;}
}
@keyframes tip2Animate
{
0% {background:rgba(255,255,255,0.2);}
50% {background:rgba(255,255,255,0.2);}
80% {background:rgba(255,255,255,0.1);}
100% {background:rgba(255,255,255,0.2);}
} body::-webkit-scrollbar{display:none;}
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
box-sizing:border-box;
font-family:sans-serif; }
body, html {
height: 100%;
}
body {
transform-origin: left top 0px;
background-color:black;
background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201711/17/104455a0j6v5ccv267nchx.jpg);
animation: backgroundMove 100s linear infinite;
} .boxTitle{color:white;font-weight:bold;font-size:16px;padding:0 20px;line-height:58px;height:60px;}
.boxTitle span{color:#FB9008;font-size:20px;}
.boxRTText{color:#aaa;font-weight:bold;font-size:12px;line-height:58px;position:absolute;right:20px;top:0px;}
.boxRTText span{font-size:14px;}
.tableTh{color:#44BBBB;font-size:14px;border-top:1px solid #3f556f;border-bottom:1px solid #3f556f;}
.tableTh span{color:#44BBBB;font-size:14px;border-right:1px solid #3f556f;display:inline-block;line-height:38px;height:40px;text-align:center;}
.tableTr{color:#44BBBB;font-size:14px;overflow:hidden;}
.tableTr span{color:#94BEE8;font-size:14px;border-right:1px solid #3f556f;display:block;line-height:40px;text-align:center;float:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 8px;} .tip{color:white;text-align:center;padding:12px 22px;float:left;font-size:16px;animation: tipAnimate 10s linear infinite;}
.tip span{font-size:25px;} .tip2{float:right;overflow:hidden;}
.tip2_item{margin:8px;overflow:hidden;}
.tip2_item span{display:block;color:white;float:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:30px;font-size:14px;}
.tip2_item span:nth-of-type(1){width:100px;text-align:right;}
.tip2_item span:nth-of-type(2){width:120px;padding:0 10px;background:rgba(255,255,255,0.2);color:#02AAEB;border-radius:8px;font-size:18px;animation: tip2Animate 10s linear infinite;}
.tip2_item span:nth-of-type(3){text-align:center;width:40px} .cornerLine{position:absolute;border:2px solid #aaa;height:20px;width:20px;}
.TLCorner{top:0px;left:0px;border-right:none;border-bottom:none;}
.TRCorner{top:0px;right:0px;border-left:none;border-bottom:none;}
.BLCorner{bottom:0px;left:0px;border-right:none;border-top:none;}
.BRCorner{bottom:0px;right:0px;border-left:none;border-top:none;} .MD_title{font-size:35px;padding:20px;color:#0E84EE;font-weight:bold;font-family:微软雅黑;} .MDdiv_title{color:white;font-size:16px;}
.MDdiv_title span{font-size:12px;} .MDTipTitle{font-size:20px;color:white;padding:5px 20px;}
.MDTipLine{color:#94BEE8;font-size:16px;color:white;padding:5px 20px;}
.MDTipLine2{background:rgba(14,132,238,0.2);border-radius:8px;margin-bottom:8px;font-size:14px;padding:5px 20px;color:white;padding:5px 20px;}
.MDTipLine2 span{font-size:22px;}
</style>
</head>
<body>
<div id="box" style="position:relative;height:1060px;width:2500px;overflow:hidden;left:0px;top:0px;">
<div id="example" style="position:absolute;height:1060px;width:2500px;left:0;top:0px;background:rgba(111,20,255,0.0);">
<div class="example-title" style="text-align:center;" ><img src="http://cdn.attach.qdfuns.com/notes/pics/201711/17/104523x79au2aip57dyfaf.png"></div>
</div>
<div id="example2" style="position:absolute;height:1060px;width:2500px;left:2500px;top:0px;background:rgba(11,111,255,0.0);">
<div class="example-title" style="text-align:center;" ><img src="http://cdn.attach.qdfuns.com/notes/pics/201711/17/104523x79au2aip57dyfaf.png"></div>
</div>
</div>
<script>
var ningMap='\
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke="#000099" fill="none">\
<path class="svgMap" id="yys" d="M155.3686 45.35257L156.0096 49.35898L154.8077 50.72116L153.6859 52.64423C151.7628 53.04487 150.4007 54.2468 150.4007 54.2468L149 55L148 58C150 59 152 60 152 60L155 59C156 59 159 58 159 58C160 58 162 60 162 60L162.9006 63.0609L163.2211 66.02565L163.3814 68.10898L163.2211 70.83334L162 72L160 74C160 74 160.657 75.52244 160.657 76.52244C160.657 76.52244 162.1148 78.53882 161.6186 79.40706C161.6186 80.40706 162 81 162 81L164.9038 81.57052C164.9038 81.57052 167 82 168 82C168 83 171 84 171 84L174 84L179 84L184 83L188 82L191 83L194 82C197 82 200 82 200 82C201 82 203.5257 83.65385 203.5257 83.65385C203.5257 83.65385 204 84 204 85L204 87L203 89C201 89 200 92 200 92L199 95C196 95 195 95 195 95L192.1474 94.8718L188 96L185.5769 100.0801L186 104L187 108L190.5449 111.2179L191 114C193 115 196 116 196 116L199 117L203 118C206 118 209 118 209 118L212 118C214 118 219 118 219 118L221.875 117.6282L225.9615 117.2276C227.9615 117.2276 232 117 232 117C234 117 236 118 236 118L238.3814 119.3109C241.3814 119.3109 243.1891 120.3526 243.1891 120.3526C246.1891 120.3526 248 120 248 120L251.0417 119.5513L254 119C254.0996 119 259 117.2788 259 118L261 121L259 123L259.2949 126.2019L262.8205 127.2436C262.8205 128.2436 260 130 260 130L257 132L255 134L255 138L255 141L255 145L254 148L253 151L251 153C250 153 248 155 248 155L245 157L246 161L250 163L249 169L247 173L245.9135 177.2436L244.5513 181.5705L241.4263 181.9712L241 179L241 177L239.5833 175.9615C238.5833 174.9615 236 176 236 176C234 177 233 176 233 176L233 174L231.9712 171.7949L229.1667 171.875L226 172L224.4808 176.8013L223.2372 179.6474L221 181C220 181 220.2404 182.4423 218.9904 182.6923C217.7404 182.9423 215 182 215 182L212 182L209.5353 183.6539L208 188L206 190L205.0481 194.9519L202.5609 198.1603L201.5609 200.1603L199 203C196 204 194 206 194 206L191 206L189.0224 208.6539C187.0224 208.6539 185.8974 209.9359 185.8974 209.9359L184 212L183.8141 218.5096L182.6122 219.2308L179 218C177 218 174 220 174 220L175 224L179 228L179 231L179.5673 237.2596L180.4487 239.1827L184 240L188.141 240.7051L192 240L191.9872 243.5898L181 248L178 252L175 255L170.8333 259.8558C168.8333 258.8558 166 257 166 257L164.1026 254.7276L159.2148 254.8077L156 256L154 253L151.843 251.9231L148 252L146 256L147 261L146.3942 264.5834L144 265C142 265 139 266 139 266L137.1795 264.9039L134.2148 265.625L129.0064 264.6635L126.3622 259.8558L128 255L133.3333 253.5257L134.1346 247.1154L137 245L133.2532 241.9872L131.3301 239.0224L133.4135 235.1763L137.9808 234.375C138.9808 233.375 139 231 139 231L140 229L143 227L146.4744 226.0417C148.4744 226.0417 149.9199 227.2436 149.9199 227.2436L153 223L156 220L160 218L162 216L160.4167 212.0994C159.4167 212.0994 161 207 161 207L162 203L159 202L154 200L148 197L144 195L138.7596 189.1218L135.7596 185.1218L135.7372 180.1282L136.218 177.4039L137.0192 174.9199L139.5032 173.0769L139.7436 169.8718L142.3077 166.1058L143.2692 162.0192L145.3526 159.2148L147 155C149 154 152.3237 153.125 152.3237 153.125L153.9263 151.6026L156.3301 151.4423L157.0513 147.0353L155 145L152 143L149 143L144 143L141 140L138 138C138 138 134.9216 138.3881 134 138C132 137 128 135 128 135L128 132L128 129L128 127L126 122C124 121 123 118 123 118L122 116L122 113L119 112L115 111L112 107L112 105C112 105 110 103 110 102C110 101 110.3365 99.27885 110.3365 99.27885C110.3365 98.27885 110 95 110 95C110 95 108.0992 94.02612 108.1731 93.02885C108.3333 90.86539 108.2532 88.0609 108.2532 88.0609L107 85L106 81L105 79L105.1282 77.2436C106.1282 76.2436 109.6154 75.48077 109.6154 75.48077L112.5801 73.79808L113 72L119 70L120 67L124.359 65.06411L127 64L130.4487 62.1795C130.4487 62.1795 131.75 60.75 133.5 59.5C135.25 58.25 137 57 137 57L139 54C142 53 144 52 144 52L145.64 49.92L148 49L150.3205 46.63462L155.3686 45.35257Z" fill="#00FFCC" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="cxs" d="M156.891 42.46795L158 45L158 48L157 50L157 52L155 54L152.2436 56.57051L153 58L155 57L157 56L159 56L161 56L163 58L165 60L165 62L166 64L165 69L165 72L164 74L163 76L163 78L165 80L167 80L170 81L173 82L176 82L178 82L181 81L183 81L187 80L189 80L192 80L194 80L196 80L198 80L199 79L201 80L202 81L205 83L206 84L207 87L206 88L205 90L203 92C202 92 202 94 202 94L201 95L200 96L198 97L196 97L194 97L193 97C192 97 190 97 190 97L189 98L188 100L187 102L188 104L188 106L190 108C191 108 192 111 192 111L193 113L196 114C197 114 199 114 199 114L201 115L203 115L205 116L207 116L210 116L212 116L214 116C215 116 218 116 218 116L220 116L222 116L225 116L228 115L230 114C231 114 234 114 234 114C234 114 235 115 236 115L238 117L241 117L243 118L245 118L247 118L250 117C252 116 254 116 254 116L255 116L259 116L261 117L262 118L263 120L263 122C263 122 263 124 262 124L262 125L264 125L266 124L268 123L270 122L271 122L275 122L277 122L279 122L281 121L284 122L284 123L285.0962 123.8782L286 122L287 121L289 119L289 117L290 116C291 116 293 116 293 116L296 117L298 118L299 120L301 120L302 121L304 122L305 122L307 123L309 124L311 124C312 124 315 125 315 125C316 125 318 124 318 124L320 124L322 123L323 122L325 121L326 120L326 119L324 119L323 118L321 117C320 116 320 115 320 115L320 113L318 111C318 111 318 110 318 109L318 108L317 106L317 104L316 101L315 100L314 98L312 96L311 95L310 93L308 92L306 92C305 92 303 92 303 92L301 92L300 90L300 88L301 87L301 85L301 83L302 80L301 78L300 76L299 75L298 73L296 71L295 69L294 68L292 65L290 63L289 62L287 62L285 61L283 59L281 58L280 56L278 55L277 53L275 50L274 49L272 47L270 45L268 43L266 42L263.7821 41.66667L263 40L261 39C260 39 259 39 259 39L257 37L256 36L254 35L253 35L249 36L246 36L244 35L244 33L245 32L245 29L245 27L244.2308 26.28205L242 25L240 25L238 27L236 28C235 28 233 26 233 26L230 25L228 24L225 24L223 23L220 23L217 23L198 23L195 23L192 24L190 25L187 26L185 27L183 29L179 29L177 30L175 32L172 35L172 37L171.6347 38.78205L167.359 38.83974L166 39L165 38L163 38L162 39L159 41L156.891 42.46795Z" fill="#3366FF" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="jdq" d="M308 184L308 187L307 189L307 190L306 192L304.4872 193.109L304 195L305 197L306 197L324 198L325 197L326 196L326.4423 195.3526L328 194L329 192L330 191L331 188L331 187L330 186L329 184L328 182L328 181L327 180L325.6411 179.1667L324 178L319 179L318.0289 179.6474L313 180L311 181L309 182L308 184Z" fill="#FF99CC" stroke="#000066" stroke-opacity="1" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="zhq" d="M280 131L281 130L283 130L283 129C284 129 285 129 285 129L286 128L287 126L288 125L288 124L289 122L290 121L291 119L295 119L297 120L297.7163 121.1539L298.2404 122L301.2404 123L303 124L306 125L308 126L310 126L311 126C311 126 312 127 313 127L317 127L317.9888 126.242L321.875 125.8814L323 125L325 124L326 122L327.0833 121.5545L329 124L330 126L331 128L332 129L333.4535 131.2099L334 132L334 133L336 134L337.9007 135.1763L338.8622 136.258L341 139L342.6282 140.3846L344 142L345 143L348 143L349.4391 143.5898L350.2404 144.5914L351.4824 145.7933L352.8446 146.5545L354 147L355 147L360.8975 147.476L362 148L363 148L364 149L364 150L363.3814 151.6026L362.1795 152.2035L361.5385 154.1266L360 155L359 156L357 157L354 157L353 158L349.2789 159.4151L347.8766 161.0176L346 162L345 165L343 167L341 168L339 168L337 169L336.218 169.4311L335 170L335 172L335 174L334 175L332.0513 176.6827L330 176L329 176L327 175L325 175L324 174L323.7981 167.2676L323 166L322.2757 165.024L320 163L318 162L316 160L315 159L313 158L310 157L309 156L307 154L306 153L302 151L301 149L300 148L298 147L296 146L294.9519 144.351L293 144L290 144L287 144L284 143L283 142L283 141L282 140L282 138L282 137L282 136L282 134L281.6907 133.6138L280 133L280 132L280 131Z" fill="#999999" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="jbq" d="M282 124L283 126C283 127 279 128 279 128L278 130L277 132L279 135L279 136L280 139L280 142L281 144L282 146L284 146L285 146L288 146L292 147L295 147L296 149L299 152L302 154L304 156L307 157L310 160L313 161L316 163L318 165L321 166L321 169L321 172L322 175L321 176L319 176L316 177L314 178L312 179L309 179C308 179 307 181 307 181L306 181L302 178L301 177L299 176L297 175L296 174L294 173L291 173L290 172L290 170L288 169C287 169 284 170 284 170L284 172L281 173L279 173L277 172L275 170L275 167L274 165L272 164L269 163L267 164L264 164L261 164L260 162L258 162L256 161L254 161L251 160L247 159L248 158L250 157L252 156L253 155L254 154L255 152L256 151L258 150L258 148L257 146L257 144L257 142L257 140L257 137L258 135L259 133L260 132L262 131L264 130L266 128L267 125L269 125L271 125L273 125L275 124C275 124 276 124 277 124L279 123L280 123L282 124Z" fill="#6600CC" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="yzq" d="M257 164L259 164L260 166L261 167L264 167C265 167 268 167 268 167L268 166L270 166C271 167 272 168 272 168L272 169L274 172L274 174L275 175L277 176L281 176L283 176L284 174L285 173L287 172C288 172 289 176 289 176L289 177L289 180L289 183L288 185L288 188L288 190L289 192L289 193L290 196C290 196 290 197 290 198L288 200L288 202L289 204C289 204 290 204 291 204L293 204L295 203L296 202L297 200L298 199L299 198C300 198 302 198 302 198C303 198 304 199 305 199L308 199L310 200C311 200 313 200 313 200L314 200C315 200 317 200 317 200C317 200 317 199 319 200C320 200 321 200 321 200L324 200C325 200 327 198 327 198L327 197L330 196L331 194L332 191L332 189L332 186L332 183L331 181L328 178L330 178C331 179 333 179 333 179L334 179L335 178L337 176L339 178L340 181L341 182L341 185L341 189L341 191L342 193L344 195L346 195C346 195 347 194 348 194L350 194L353 193L355 192L357 192L358 191L360 191L362 192L362 195L362 197L364 199L365 200L368 202L370 202C370 202 371 201 372 201C372 202 374 202 374 202L377 204L378 207L378 209L379 211L381 211C381 211 384 212 383 212L385 215L385 217L386 219L388 222L388 224L390 226L392 228L395 229L397 230L399 232C400 232 403 233 403 233L404 234L404 237L402 238L403 241L405 243L405 246L406 250L405 254L404 257L401 258L399 260L397 261L395 261C394 261 392 261 392 261L389 263L386 265L383 266L381 267L378 270L377 274L375 277L373 278L371 277L368 276L364 275L360 274L355 274L351 274L347 274L343 273L340 273L337 275L335 276L332 277L331 276C329 275 329 275 329 275L327 275L324 275L321 275L319 276L318 277L317 276C316 276 315 275 315 275L312 273L309 272L308 270L309 267C309 267 309 265 310 264L311 261L312 259L313 257L314 255L314 252L313 250L312 251L309 251L307 250L304 249L301 248L298 248L292 248L290 248L288 247L284 246L281 244L281 242L281 240L281 237L281 235L280 233L281 230L280 228L278 226L278 224L278 222L278 220C277 219 275 219 275 219L271 220C270 221 269 224 269 224L268 226L268 228L267 232L266 233L264 233L261 233L258 235L254 239L250 238L248 238L246 240L244 240L242 241L239 242L236 242L233 242L233 243C232 243 231 242 231 242L229 241L227 240L224 240C223 240 221 240 221 240L220 240L218 240L215 241L211 241L210 243L208 242L206 241L205 240L203 240C201 241 200 242 200 242L197 241C195 240 194 238 194 238L193 237L190 237L189 238L187 239L184 238L183 236L182 235L182 232L183 230L182 228L181 227C181 227 181 227 180 226C180 225 179 224 179 224L178 222L178 220L180 220L183 221L185 221L186 219L186 216L186 214L188 211L189 210L192 210L193 209C193 209 195 209 195 208C196 207 197 206 198 206L201 205L203 203L204 200L205 198L207 195C207 195 208 193 208 192L210 190L211 188L213 185L215 184C215 184 216 183 217 184L219 184L221 184L223 183L225 182L225 179L227 178L228 175L229 174L230 174L232 177L233 178C233 179 235 180 235 180L237 179L238 178L239 179L240 180L240 182L241 184L244 184L245 183L246 182L247 180L248 178L249 175L250 173L251 170L251 169L252 167L252 166L252 164L252 163C253 163 257 164 257 164Z" fill="#3366CC" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="fhs" d="M275 222L275.1602 221.9551L276 225L277 228L278 230L278 234L279 237L279 240L279 242L280 246L281 248L283 249C285 249 288 250 288 250C289 250 292 251 292 251L295 251L297 250C297 250 298 250 299 251C299 251 301 251 302 251L304 251L306 252C306 252 308 253 309 253L311 253L310 255L310 258L309 259L308 262L307 265L306 267C306 267 307 268 306 269L306 271L307 274L308 275L311 276L314 279L317 279L320 279L322 278L325 278L327 278L328 279C328 279 329 279 330 279L332 279L335 279L338 279L340 277L344 277L348 277L350 277L353 277L356 276L360 276L365 277L368 279L370 279L372 279L369 282L367 283L367 286L365 289L364 291L362 293C362 293 360 293 360 294C359 294 357 295 357 295L356 295L356 297C356 297 357 298 357 299L356 301L353 302L348 304L345 306L342 307L338 308L333 308C333 309 332 309 331 309L328 310L325 310L321 312L318 313L316 312L314 310L310 310L310 311C310 312 309 312 308 312C308 313 307 313 306 314L302 316C302 316 301 317 301 318C300 318 299 321 299 321L297 322L295 322L294 321L293 319L292 316L293 312L293 310L290 310L288 311L286 313L284 315L284 316L284 318L282 319L280 319C279 319 277 317 277 317L275 317L270 317L267 317L265 318L263 318L262 316C261 316 257 316 257 316L254 317L252 320L250 322L249 324L249 326L246 327L243 327C242 327 241 326 241 326L239 325C238 325 236 324 236 324L234 325L233 326L231 328L230 330L226 332L224 331L221 330L220 331C219 331 218 333 218 333L216 336L214 339L214 342L214 346L215 348L214 350L213 352L210 354L209 356L207 357L202 358L200 357L199 354L197 351L197 348L198 345L198 342L197 340L197 337L198 335C198 334 199 333 199 333L199 330L200 328L201 326L201 324L200 322L201 320C201 319 202 317 202 317L200 314L196 315L191 314L188 313L185 313L183 312C183 312 180 311 179 311L176 311L171 308L167 307L165 305L163 303L164 301L164 299L162 297L161 295L161 292L162 289L162 286L163 284L164 282L164 281C163 281 160 280 160 280L156 279L154 277L153 274L153 271C153 270 153 267 153 267L152 264L150 262L148 260L148 258L149 256L150 254L153 255L155 257L156 258L158 258L161 257L163 257L166 259L167 261L171 262C172 262 174 260 174 260L175 259L177 257L178 255L180 252L181 251C182 250 185 249 185 249L189 248L191 246C192 246 194 246 194 246L194 244L195 243L199 244L201 244L202 243L204 243L206 244L208 245L212 245L214 245L217 244L220 244L225 244L227 244L230 245L233 245L239 245C239 245 240 245 241 245L243 244L246 243C246 243 248 243 248 242L252 242L254 242L258 241L260 239L261 238C261 238 260 236 262 236C264 236 266 237 266 237L267 236L268 234L270 232L270 228C270 227 272 224 272 224C272 224 271 223 272 223C272 222 275 221 275 221" fill="#FF9999" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="hsq" d="M293 176L295 177L297 178L300 180L301 181L303 183C304 183 305 185 305 185L306 186L305 188L304 190L303 192L302 195L300 196L296 196L295 199L294 200L293 202L291 201L292 199L292 198C292 197 293 196 293 196L293 195L292 192L290 189L291 186L291 182L291 180L292 177L293 176Z" fill="#9966CC" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="blq" d="M363 157L365 153L366 151L368 150L369 149L371 149L373 149L373 150L374 151L375 152C376 152 378 152 378 152C379 152 381 152 381 152C382 152 383 152 383 152L384 153L385 155C386 155 387 156 387 156L389 157L391 157L393 158L395 159L397 159L398 160L399 161L401 161C402 161 405 161 405 161L406 162L408 163L409 163L411 163L412 164L415 164L417 164L419 166L421 166L421 164L421 163C421 163 422 162 423 162C423 161 425 161 425 161C426 160 427 159 427 159L429 159C430 158 431 157 431 157L432 156C433 156 434 157 434 157L435 158L436 159L438 161L438 162L440 164L441 165L442 167L443 168C444 169 444 169 444 169L444 172L444 173L443 175C442 175 440 176 440 176L439 177C439 177 438 178 439 178C440 178 441 178 441 178C442 178 444 177 444 177C446 178 447 179 447 179L449 179L451 179L455 179L462 179L465 179L467 178L468 176L469 175C471 175 471 175 471 175C471 175 472 175 473 175L474 174L477 173L479 173L481 174L483 176L484 178L485 179L485 180L485 183L484 184L484 186L482 187L478 187L477 188L474 189L473 191C472 191 471 191 471 191L468 192L466 194C465 194 464 196 464 196L460 197L459 198L458 200L456 199L456 201C456 202 454 202 454 202L452 202C451 203 449 203 449 203L447 203L445 205C444 205 443 205 443 205L442 206L441 207L439 208L438 209L436 211L434 212L433 214L431 215L430 216L427 217L426 217L425 218L425 219L425 220L426 222C425 223 422 223 422 223C421 223 420 223 420 223C420 224 419 224 419 224L419 226C418 226 417 228 417 228C416 228 414 229 414 229L413 230L412 231L411 231L410 229L410 228L410 225C408 225 407 225 407 225L405 226L404 227L404 229C404 230 405 231 405 231L403 231C402 231 401 231 401 231L399 229L397 228L396 227L395 226L393 225L390 222L389 219L388 217L387 215L387 213L386 211C385 210 383 209 383 209L380 208L380 206L379 204L378 201L376 199L374 199L372 198L370 199C368 199 367 199 367 199L365 196L364 193L365 192L364 189L362 188L359 188L355 189L352 190L348 191L346 192L345 191C344 191 343 189 343 189L344 187L344 186L344 184L343 183L343 181L342 179L341 178L339 176L339 175L338 174L337 173L339 171L341 171L343 170L345 169L347 167L348 165L350 163L352 161L355 161L356 159L358 159L360 159L362 157L363 157ZM430 220L432 221L433 223L435 223C436 223 437 224 437 224L439 225C440 224 442 223 442 223L442 220L443 219L446 218L447 217L450 217L451 217L452 217L452 214L454 212L454 211L456 209L455 207L455 205L454 204L451 205L449 206L447 206L444 208L442 209L440 210L438 211L438 213L437 214L436 216L435 215C434 215 433 216 433 216L432 218L430 219L430 220Z" fill="#FF6699" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="nh" d="M222 334L225 334L228 334L230 334L232 333L232 332L233 329L235 328L237 329L241 330L243 330L246 330L248 330L249 329L251 327L252 326L252 324C252 324 252 323 253 323C253 322 255 320 255 320L258 319C259 318 261 319 261 319L261 320L262 321L265 321L267 321L268 320L271 319L272 319L275 320L277 321L277 323L278 326L277 327C276 328 275 329 275 329L275 330L275 331L273 332C272 332 271 333 271 333L270 335L269 338L270 340L272 342L273 344L273 347L274 351L274 353L274 354L278 354L279 353L279 351L279 348L280 344L280 342L281 340L281 338L282 336L283 335C283 334 284.0131 332.8385 285 333C286 333 287 332 287 332L288 329C288 329 289 328 290 327C291 327 293 326 293 326L296 328L296 330L298 330L300 330L301 333L303 335L303 336L303 338L301 340L298 342L296 345L295 347L295 349L295 352L292 354L290 355L288 356L287 357L287 360L287 362L290 362L291 360C291 360 291 358 292 358C293 358 293 358 294 358L296 358C296 358 296 356 296 355L297 353C298 352 300 350 300 350L301 348L303 345C303 344 305 343 305 343L304 341L305 339C305 339 305 337 306 337C307 337 308 336 308 336C308 335 310 334 310 334L311 333L312 333L313 331L314 332L314 334L314 339L315 342L317 345L318 346L319 346C320 346 322 346 322 346L324 345L325 344C326 344 328 344 328 344L331 343L333 346L335 348L337 350L338 353C338 353 340 355 340 356L341 358C342 359 344 361 344 361L347 362L349 361L350 360C351 360 354 359 354 359L357 359L358 358L359 359L359 362L358 363L358 366L358 369L358 370L358 372L360 375L361 376L362 378L363 380L365 381L366 382L367 407L369 407L371 407L373 407L375 405L377 406L378 407L379 408C379 408 379 411 378 411L377 413L376 415L376 417L376 420C375 420 375 422 375 422L373 426L371 429L371 432L370 436L370 438L370 440L367 438L367 435C366 435 364 437 364 437L362 437L360 438L359 439L357 441L355 441L352 442L350 443L348 442L346 442L342 442L338 442L338 440L337 436L338 434L336 432L336 429L336 424L336 417L337 415L337 408L337 404L338 401L338 400L342 397L342 392L341 391L336 396L331 396L330 398L328 400L329 401L330 403L332 403L334 405L333 408L333 410L333 413L333 417L332 421L332 424L332 428L333 432L334 436L335 439L335 440L333 441L331 440L328 438L327 436L327 435C327 434 327 431 327 431L325 429L325 424L324 422L321 419L322 416L322 414C322 413 322 412 322 412L322 410L319 410L317 411L316 413L315 414L314 412L312 411L311 409L309 409L308 410L307 408L305 407L303 407L301 408C300 409 302 410 302 410L304 411L304 412C304 412 305 412 306 412C306 412 308 412 309 413L310 415L312 417L313 419L315 421L316 421L316 423L314 424L310 423L308 422L305 422L303 423L301 423C300 424 300 427 300 427L300 428L301 431L299 432L297 433C297 433 296 433 297 434L298 438L300 438L301 440L298 441L294 442L293 443L290 446L288 446L287 443L288 440L288 436L288 434L284 437L284 439L284 443L284 446L285 448L285 449C285 449 285 450 285 451L283 451L283 452L282 454L280 455L276 455L276 454L271 451L269 450L265 451C265 451 265 452 264 452C262 452 259 453 259 453L256 452L255 450L254 447L253 442L253 438L253 436C252 436 252 437 252 437L251 441L249 441L248 445L247 450L246 453L245 456L243 457C243 457 243 459 243 460L242 462C241 463 239 464 239 464L236 464C236 465 236 465 235 466C234 467 233 467 233 467L230 469L227 469C226 468 224 470 224 470L222 472L220 472L217 471L216 470L212 468L212 466L212 462L211 459L209 457L210 455C210 455 211 454 211 453L211 451L210 450C210 450 209 449 209 448L208 446C208 446 207 446 207 445L205 443L204 443L205 439L204 437L201 436L195 435L191 434L187 433L184 433L181 431L181 429C181 428 181 426 181 426L183 426L184 424C184 424 183 422 183 421C182 421 180 421 180 421C180 421 181 417 181 416L181 413L183 414L185 412L186 410L186 407L187 401L187 398L189 395L190 390L191 387L192 385L192 383L191 382C191 381 192 380 192 379L194 379C194 379 194 377 195 377C196 377 197 376 197 376L199 376L201 375L201 362L205 361C206 361 209 360 209 360L209 359C210 359 211 358 211 358L212 357L214 355C215 355 216 353 216 353C217 353 217 351 217 351L218 349L219 348L219 346L219 344L218 343C217 342 218 340 218 340C218 340 219 339 219 338L221 336L222 334Z" fill="#CCCC66" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
<path class="svgMap" id="xs" d="M383 481L383 479C382 479 380 479 380 479C380 478 379 476 379 476L378 475L380 474L382 474L383 473L383 470C383 470 383 470 384 469C386 469 386 469 386 469C387 469 390 470 390 470C390 470 390 471 391 471C391 472 392 473 392 474C393 475 394 476 394 476L395 478L393 480C393 480 392 479 392 481C392 484 393 485 393 485L392 486L390 486C389 486 386 486 386 486L386 484L385 481C384 482 384 483 384 483L382 483L382 482L383 481ZM377 465L380 465L383 465L385 465L388 466L390 467L391 469L392 470C393 471 394 471 394 471L397 471L398 472L401 472C402 472 404 469 404 469C404 469 404 468 405 468L408 467L410 466L410 465L413 465L416 466C417 467 418 469 418 469L417 472L417 473C417 474 417 476 417 476L416 478L418 479L421 478L421 477L422 479C423 479 424 481 424 481L425 484C425 484 426 484 426 485C427 486 426 487 427 487L429 486L430 485L431 484L432 482L433 481L433 479L433 477L434 476L437 476L438 474L438 473L438 471L436 471L433 471L433 470L433 468L435 467L437 467C438 467 439 467 439 467L439 463L439 460L439 458L439 457L438 454C438 453 438 452 438 452L440 451L439 449L437 447L436 446L436 444L433 443C432 443 432 441 431 441C431 440 429 439 429 439C428 439 425 439 425 439L424 440L421 442L419 445L416 447L413 449L413 451L411 451C410 451 406 453 406 453L402 454L396 454L394 454L391 453L389 452L388 452L387 450L384 450L382 453C381 453 379 452 379 452L377 452L377 454C377 455 377 457 377 457L376 459L376 461L376 463L377 465ZM449 450L452 450L455 449L457 448C457 448 458 448 459 447C460 447 460 447 461 447C462 448 464 447 464 447L465 446C465 446 464 444 465 444L467 443L468 442L468 439C468 439 467 439 466 439L464 438L462 439L460 439C459 438 460 437 460 437C461 437 463 436 463 436L464 434L464 433L462 430C462 430 462 429 461 429L459 429L456 429L454 429L454 431L453 432L453 434L453 436L453 437L453 438L451 439L450 440L450 441L449 441C448 441 447 442 447 442L448 444L448 445L447 446C447 446 446 447 447 448C448 448 448 449 448 449L449 450ZM383 407L385 406L387 405L389 405C390 405 390 407 390 407L389 409L387 410C387 410 386 411 386 412L384 414L383 416L380 417L381 414L382 411L383 409L383 407ZM377 311L378 310L380 310L381 308C382 308 385 309 385 309L388 309L390 309L390 312L388 314L386 318L385 320L384 322L383 325L382 327L381 329C380 329 378 330 378 330L374 331C373 331 372 329 372 329L372 323L372 320L374 318L374 317C375 317 377 315 377 315L376 313L377 311ZM497 346L499 345L499 343C500 343 503 342 503 342L505 341L507 339C509 339 511 338 511 338L517 339L517 340L516 343L515 344L513 345C512 345 510 347 510 347L508 348L505 350C504 351 504 349 504 349C503 349 501 350 501 350L499 350L497 349L496 347L497 346ZM382 306L385 306L389 306L392 307L393 308L394 310L393 312L392 313L390 314L389 316L389 317L388 319L388 321C388 321 388 321 388 322C387 323 386 324 386 324L386 326L385 328L384 329L381 331L377 333L374 334L371 333L370 331L369 329L369 325L369 323L369 320L370 318L372 315L374 314L374 312L372 312L370 312L367 312L364 312L362 312L361 310L361 308L360 307L359 306L357 306L355 308L354 309L351 311L348 312L346 313L345 313L344 315C343 315 342 316 342 316L341 318L339 319L338 320L338 322L336 322L334 323L334 326L331 326C331 326 329 326 328 326C328 327 325 328 325 328L323 329L318 330L316 330C315 331 316 332 316 332L316 334L316 336L317 340L318 341C318 341 318 343 319 343C319 343 320 343 321 343C322 342 325 342 325 342C327 341 329 340 329 340L330 340C330 340 332 341 333 341C334 342 336 343 336 343L337 345L339 346L340 349L340 351L342 353L343 355L345 358L346 359L348 359L350 358C351 358 352 357 352 357L353 357L356 356C356 356 358 357 358 356L361 356L362 357L362 359L362 362L361 363L360 365L360 367C360 368 360 369 360 370L362 373L363 375L364 377L366 378C366 378 367 378 367 379L368 382L368 387L368 389L368 394L368 395L368 398L368 401L368 403L369 404C369 404 370 404 371 404L373 403C373 403 374 403 375 403L378 403C378 404 379 404 379 405L380 407L381 405L380 403L380 401C380 400 380 397 380 397L379 394L379 392L377 389L376 387L375 385C375 384 375 383 375 383L377 382C378 382 378 379 378 379L378 378L376 376L374 376C374 376 373 375 374 375C374 374 374 373 375 373C376 372 377 372 377 372L379 371C380 371 383 372 383 372L384 374C384 375 384 376 384 376C385 377 385 379 385 379L383 379C383 379 383 380 382 380C382 381 380 382 380 382C380 382 379 382 379 383C379 384 379 384 379 385C379 386 379 387 379 387C379 388 379 388 380 388C381 388 383 388 383 388C383 388 383 388 385 388C386 387 387 386 388 386C389 386 388 386 390 386C391 386 393 386 394 386C395 386 397 385 397 385L396 387L394 388L391 388L391 389L390 390L386 392L386 393L384 395C384 395 383 396 383 397L383 399L383 401L384 402C384 403 385 402 385 402C385 402 384 402 387 402C389 402 389.0025 401.9299 390 402C391 402 391 403 392 404L392 405L392 407L392 408L391 410L390 411C390 411 389 411 389 412C389 412 389 413 389 414C388 415 387 415 387 415C387 415 387 416 387 417C386 418 386 418 385 419L384 420L383 420L382 421L382 423L382 427L381 430L381 431C381 431 381 433 380 433C380 433 380 434 379 435C378 436 378 437 378 437L376 439L376 440C377 441 378 442 378 443C378 444 379 445 379 445L381 446C382 446 383 446 383 446L384 447C385 448 386 448 386 448C386 448 387 448 388 448L392 448C392 448 393 447 394 447C394 447 394 447 395 447C397 447 398.0089 446.8668 399 447C402 447 402 447 404 447C405 447 406 447 406 447L407 446L408 444L409 441C409 441 409 441 410 440L412 439C412 439 412 438 413 437C413 437 413 437 415 436C416 436 419 435 419 435L422 434C423 434 425 433 425 433L427 431L428 430L428 427L430 424L430 423L432 423L434 423L434 425L435 426L436 426L437 424L436 422L435 421C435 421 434 420 434 419L434 418L434 417L433 415L434 412L435 411C436 411 436 410 436 410L437 409C440 408 440 408 440 408L442 407L442 404L441 401L438 401L437 402L436 403L434 402C432 402 430 402 430 402C429 402 426 401 426 401L424 401L424 400L424 398L421 398L424 395L423 394L423 392L423 390C423 389 423 388 423 388L425 388C426 388 427 388 427 388L427 385L428 383L429 382C430 381 429 379 429 379L426 379L424 381L422 382C421 382 419 381 419 381C419 380 419 379 419 379L420 376L421 374L423 372L424 371L423 368C423 368 421 367 422 366C422 366 423 365 423 364L424 362L424 360L424 358L423 357L422 355L421 354L421 352C421 351 421 351 422 351C423 351 424 350 424 350L427 351C428 352 430 353 430 353C430 354 431 354 431 354C432 354 433 353 433 353L434 352C434 352 434 351 433 351L433 350C433 350 433 349 433 348C433 348 433 347 434 347L435 346C436 346 437 345 437 345L436 344L437 341L438 340C439 341 440 341 440 341L442 342L442 339L441 337L440 335L437 333L436 330L434 329C434 329 433 329 433 328C434 327 433 324 433 323L433 320L433 319L432 318L430 317C429 317 427 316 427 316L427 315C427 315 425 314 427 314C428 313 429 312 429 312L431 312C432 311 433 310 433 310L434 308L434 305L433 304C433 304 433 303 433 302C433 302 434 301 434 300C435 300 436 299 437 299L437 298L438 297L441 296L442 294L442 293C442 293 442 292 443 292C444 291 444 290 444 290L444 289L444 287L442 286C441 285 441 285 441 285L440 283L440 282L439 281L438 280L438 279C437 278 435 278 435 278L433 277L431 277L431 275L429 273L429 272L425 271C424 271 420.8712 270.509 420 271C419 272 418 272 418 272C417 273 416 273 416 273C416 274 416 274 415 275L413 277L411 278C410 278 408 278 408 278L406 277C405 277 404 276 404 278C404 279 402 280 402 280C402 280 402 279 400 280L398 280L395 280L393 280L392 281C391 281 389 283 389 283L388 284L387 286L385 286L383 286L382 285L379 285C379 285 378 285 377 285L375 285L375 287C375 287 376 288 375 289C375 290 374 290 374 290C373 291 370 292 370 292C370 292 370 292 370 293C370 294 370 294 370 294L368 294L367 295C366 296 366 296 366 296L364 296L363 298L363 299C363 299 362 299 362 300C363 301 364.1488 303.0111 364 304C364 305 364.0013 306.9501 365 307C366 307 366 307 367 308C368 308 370 309 370 309C370 309 373 308 374 308C374 308 376 308 377 308L379 307L382 306Z" fill="#9966CC" fill-opacity="1" stroke="#000099" transform="matrix(0.9999999,0,0,0.9999999,14.103,-14.10203)" xmlns="http://www.w3.org/2000/svg" />\
</svg>\
<style>\
.svgMap{stroke:white;opacity:0.5;}\
.svgMap:hover{opacity:0.7;cursor:pointer;}\
</style>\
';
</script>
<script> //地区名
var areaData=["余姚市","慈溪","奉化区","宁海县","象山县","鄞州区","海曙区","江东区","江北区","镇海区","北仑区","杭州湾新区","保税区","大榭开发区","高新区","东钱湖旅游度假区","梅山保税港区"]; //定时器数组
var sta = [];
//清除所有定时器
function clearIntervals(array){
for (i=0; i <array.length; i++) {
clearInterval(array[i]);
};
sta = [];
} /*除输入框外禁止选中*/
$(function(){
var isInputText = false;
$("input[type='text'] ,textarea").focus(function () {
isInputText = true;
}).blur(function () {
isInputText = false;
})
document.onselectstart = function () {
return isInputText;
};
}) //自适应屏幕
function setBodySize(){
$("body").css({"transform":"scale("+($(this).width()/2500)+")"});
return;
} //加载内容
function fillExample(boxObj){
clearIntervals(sta);
getECharts1(boxObj);
getECharts2(boxObj);
getECharts3(boxObj);
getECharts4(boxObj);
getECharts5(boxObj);
getTable1(boxObj);
getTip1(boxObj);
getMainDiv(boxObj); }
//创建DIV
function creatDiv(id,style,parentObj){
$("#" + id).remove();
var html = "<div id='" + id + "'></div>";
var div = $(html);
div.css(style);
parentObj.append(div);
return div;
} //坐标轴颜色
var lineColor = {
lineStyle:{
color:'#fff',
width:1,
}
}
var labelColor = {
show: true,
textStyle: {
color: '#fff'
}
} function getECharts1(boxObj){
var id = boxObj.attr("id") + "-echarts-1";
var style={
width:500,
height:300,
top:-100,
left:-200,
padding:20,
border:"1px solid #3f556f",
position:"absolute",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({top:40,left:40,opacity:1},500)
var chart = echarts.init(div[0]); var option = {
color: ['#3398DB'],
title : [
{
text: '企业类型',
textStyle:{color:"#fff",fontSize:16},
x:'left',
top:4
},{
text: '产值',
textStyle:{color:"#FB9008",fontSize:20},
x:'left',
left:66
},{
text: '排行',
textStyle:{color:"#fff",fontSize:16},
x:'left',
left:108,
top:4
},{
text: '单位：亿元',
textStyle:{color:"#fff",fontWeight:"normal",fontSize:14},
x:'right',
},{
text: '2016年',
backgroundColor:"rgba(255,255,255,0.2)",
textStyle:{color:"#00AEF1",fontSize:12},
x:'left',
left:160,
top:5
}
],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['施工', '监理', '安全房屋\n鉴定', '勘察', '设计', '施工图\n审查'],
axisTick: {
alignWithLabel: true
},
axisLine:lineColor,
axisLabel:labelColor
}
],
yAxis : [
{
type : 'value',
max:700,
axisLine:lineColor,
axisLabel:labelColor,
splitArea : {show : false}
}
],
series : [
{
name:'产值',
itemStyle:{normal:{color:"#00AEF1"}},
type:'bar',
barWidth: '40%',
data:[152, 200, 334, 390, 330, 220],
animationDelay: function (idx) {
return idx * 50 + 100;
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
chart.setOption(option);
sta.push(setInterval(function (){
var data = option.series[0].data;
var num = Math.floor(Math.random() * data.length);
data[num] = Math.round(Math.random() * 400 + 200); div.animate({opacity:0},1000,function(){
chart.clear();
chart.setOption(option);
div.animate({opacity:1},1500);
})
}, 16100)
) } function getECharts2(boxObj){
var id = boxObj.attr("id") + "-echarts-2"
var style={
width:500,
height:300,
top:300,
left:40,
padding:20,
border:"1px solid #3f556f",
position:"absolute",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,top:380},400)
var chart = echarts.init(div[0]); var option = {
title : [
{
text: '建筑业走出去产值',
textStyle:{color:"#fff",fontSize:16},
x:'left',
top:4
},{
text: '分布',
textStyle:{color:"#FB9008",fontSize:20},
x:'left',
left:130
},{
text: '图',
textStyle:{color:"#fff",fontSize:16},
x:'left',
left:172,
top:4
},{
text: '2015年',
backgroundColor:"rgba(255,255,255,0.2)",
textStyle:{color:"#00AEF1",fontSize:12},
x:'left',
left:210,
top:5
}
],
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
top: 60,
textStyle:{color:"white"},
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '60%',
center: ['65%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option,false,false); sta.push(setInterval(function (){
var data = option.series[0].data;
var num = Math.floor(Math.random() * data.length);
data[num].value = Math.round(Math.random() * 1200 + 300);
chart.clear();
chart.setOption(option);
}, 7200)
)
} function getECharts3(boxObj){
var id = boxObj.attr("id") + "-echarts-3"
var style={
width:500,
height:300,
top:720,
left:140,
padding:20,
border:"1px solid #3f556f",
position:"absolute",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,left:40},800)
var chart = echarts.init(div[0]); var option = {
title: [
{
text: '建筑业',
textStyle:{color:"#fff",fontSize:16},
x:'left',
top:4
},{
text: '产值及增速',
textStyle:{color:"#FB9008",fontSize:20},
x:'left',
left:50
},{
text: '单位：亿元',
textStyle:{color:"#fff",fontWeight:"normal",fontSize:14},
x:'right',
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff',
width: 1,
type: 'dashed'
},
label: {
backgroundColor: '#666',
}
}
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
legend: {
textStyle:{color:"white"},
data:['生产总值', '建筑业增速'],
top:50
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLine:lineColor,
axisLabel:labelColor,
data: (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})()
},
{
type: 'category',
boundaryGap: true,
axisLine:{show:false},
axisLabel:{show:false},
data: (function (){
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
}
return res;
})()
}
],
yAxis: [
{
type: 'value',
scale: true,
max: 30,
min: 0,
axisLine:lineColor,
axisLabel:labelColor,
boundaryGap: [0.2, 0.2],
splitLine : {show : false}
},
{
type: 'value',
scale: true,
max: 1200,
min: 0,
axisLine:lineColor,
axisLabel:labelColor,
boundaryGap: [0.2, 0.2],
splitLine : {show : false}
}
],
series: [
{
name:'生产总值',
type:'bar',
barWidth: '70%',
itemStyle:{normal:{color:"#85DAF4"}},
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
name:'建筑业增速',
type:'line',
data:(function (){
var res = [];
var len = 0;
while (len < 10) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
]
}; chart.setOption(option);
var count = 11; sta.push(setInterval(function (){
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,''); var data0 = option.series[0].data;
var data1 = option.series[1].data;
data0.shift();
data0.push(Math.round(Math.random() * 1000));
data1.shift();
data1.push((Math.random() * 10 + 5).toFixed(1) - 0); option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData);
option.xAxis[1].data.shift();
option.xAxis[1].data.push(count++); chart.setOption(option);
}, 2100)
) } function getECharts4(boxObj){
var id = boxObj.attr("id") + "-echarts-4"
var style={
width:500,
height:300,
top:40,
right:140,
padding:20,
border:"1px solid #3f556f",
position:"absolute",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,right:40,top:40},800);
var chart = echarts.init(div[0]); var option = {
title: [
{
text: '房屋工程',
textStyle:{color:"#fff",fontSize:16},
x:'left',
top:4
},{
text: '竣工面积及增速',
textStyle:{color:"#FB9008",fontSize:20},
x:'left',
left:66
},{
text: '单位：万㎡',
textStyle:{color:"#fff",fontWeight:"normal",fontSize:14},
x:'right',
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff',
width: 1,
type: 'dashed'
},
label: {
backgroundColor: '#666',
}
}
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
legend: {
textStyle:{color:"white"},
data:['竣工面积', '竣工增长'],
top:50
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLine:lineColor,
axisLabel:labelColor,
data: ["2008","2009","2010","2011","2012","2013","2014","2015"]
},
{
type: 'category',
boundaryGap: true,
axisLine:lineColor,
axisLabel:{show:false},
data: (function (){
var res = [];
var len = 8;
while (len--) {
res.push(len + 1);
}
return res;
})()
}
],
yAxis: [
{
type: 'value',
scale: true,
max: 30,
min: 0,
axisLine:lineColor,
axisLabel:labelColor,
boundaryGap: [0.2, 0.2],
splitLine : {show : false}
},
{
type: 'value',
scale: true,
max: 1200,
min: 0,
axisLine:lineColor,
axisLabel:labelColor,
boundaryGap: [0.2, 0.2],
splitLine : {show : false}
}
],
series: [
{
name:'竣工面积',
type:'bar',
barWidth: '30%',
itemStyle:{normal:{color:"white"}},
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var len = 8;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
name:'竣工增长',
type:'line',
itemStyle:{normal:{color:"#00AEF1"}},
data:(function (){
var res = [];
var len = 0;
while (len < 8) {
res.push((Math.random()*8 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
]
}; var option2 = {
title : [
{
text: '房建工程',
textStyle:{color:"#fff",fontSize:16},
x:'left',
top:4
},{
text: '竣工面积构成',
textStyle:{color:"#FB9008",fontSize:20},
x:'left',
left:66
},{
text: '图',
textStyle:{color:"#fff",fontSize:16},
x:'left',
left:188,
top:4
}
],
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'right',
top: 60,
textStyle:{color:"white"},
data: ['住宅房屋','厂房及建筑物','商业及服务用房屋','办公用房屋','其他']
},
series : [
{
name: '竣工面积',
type: 'pie',
radius : '50%',
center: ['30%', '60%'],
data:[
{value:335, name:'住宅房屋'},
{value:310, name:'厂房及建筑物'},
{value:234, name:'商业及服务用房屋'},
{value:135, name:'办公用房屋'},
{value:1548, name:'其他'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}; chart.setOption(option);
var echarts_b = false; sta.push(setInterval(function (){
var thisOption = echarts_b?option:option2;
echarts_b = !echarts_b;
div.animate({opacity:0},2000,function(){
chart.clear();
chart.setOption(thisOption);
div.animate({opacity:1},1000);
})
}, 28000)
) } function getECharts5(boxObj){
var id = boxObj.attr("id") + "-echarts-5"
var style={
width:500,
height:300,
top:420,
right:40,
padding:20,
border:"1px solid #3f556f",
position:"absolute",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,right:40,top:380},900)
var chart = echarts.init(div[0]); var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('T' + i);
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
} var option = {
title: [
{
text: '柱状图',
textStyle:{color:"#fff",fontSize:16},
x:'left',
top:4
},{
text: '动画延迟',
textStyle:{color:"#FB9008",fontSize:20},
x:'left',
left:50
}
],
legend: {
data: ['bar', 'bar2'],
textStyle:{color:"#fff"},
align: 'left',
x:"right",
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false
},
axisLine:lineColor,
axisLabel:labelColor
},
yAxis: {
axisLine:lineColor,
axisLabel:labelColor,
},
series: [{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'bar2',
type: 'bar',
data: data2,
itemStyle:{normal:{color:"#00AEF1"}},
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
chart.setOption(option); sta.push(setInterval(function (){
div.animate({opacity:0},1200,function(){
chart.clear();
chart.setOption(option);
div.animate({opacity:1},400);
})
}, 20100)
) } function getTable1(boxObj){
var id = boxObj.attr("id") + "-table-1"
var style={
width:500,
height:300,
top:820,
right:-100,
border:"1px solid #3f556f",
position:"absolute",
overflow:"hidden",
//background:"rgba(0,174,241,0.2)",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,right:40,top:720},500); var data = [
["浙江省二建建设集团有限公司","建筑企业","108.18"],
["龙元建设集团有限公司","建筑企业","285.22"],
["浙江欣捷建设有限公司","建筑企业","145.20"],
["浙江万华建设集团股份有限公司","建筑企业","110.68"],
["博宏恒基集团有限公司","建筑企业","114.54"],
["大荣建设有限公司","建筑企业","110.68"],
["宁波建工股份有限公司","建筑企业","541.88"],
["华丰建设股份有限公司","建筑企业","138.50"],
]; var divContent = "<div class='boxTitle'>2015年宁波市<span>龙头企业</span></div>";
divContent += "<div class='boxRTText'>单位:<span>亿元</span></div>";
divContent += "<div class='tableTh'>";
divContent += "<span style='width:45%;'>企业名称</span>";
divContent += "<span style='width:30%;'>企业类型</span>";
divContent += "<span style='width:25%;border:none;'>产值额</span>";
divContent += "</div>";
divContent += "<div class='tableBody'>";
for(var i=0;i<data.length;i++){
var trStyle = i%2==0?"background:rgba(0,174,241,0.15);":"";
divContent += "<div class='tableTr' style='" + trStyle + "'>";
divContent += "<span style='width:45%;color:white;'>" + data[i][0] + "</span>";
divContent += "<span style='width:30%;'>" + data[i][1] + "</span>";
divContent += "<span style='width:25%;border:none;'>" + data[i][2] + "</span>";
divContent += "</div>";
}
divContent += "</div>";
div.html(divContent); sta.push(setInterval(function(){
div.find(".tableBody .tableTr").eq(0).slideUp(1000,function(){
$(this).show();
div.find(".tableBody").append($(this));
});
},5000)
)
} function getTip1(boxObj){
var id = boxObj.attr("id") + "-tip-1"
var style={
width:1340,
height:90,
bottom:100,
left:580,
position:"absolute",
overflow:"hidden",
padding:"0 20px",
//background:"rgba(0,174,241,0.2)",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,bottom:40},500); var flowOutMessage = 9617;
var flowInMessage = 17902; var divContent = "<div class='tip'>建筑业总产值<br><span>7735.1</span>亿元</div>";
divContent += "<div class='tip'>企业总数<br><span>5349</span>家</div>";
divContent += "<div class='tip'>从业人员<br><span>4182</span>人</div>";
divContent += "<div class='tip'>项目总数<br><span>59609</span>个</div>";
divContent += "<div class='tip'>起重机械<br><span>9617</span>架</div>";
divContent += "<div class='tip2'>";
divContent += "<div class='tip2_item'><span>今日流出：</span><span id='flowoutM'>" + flowOutMessage.toLocaleString() + "</span><span>条</span></div>";
divContent += "<div class='tip2_item'><span>累计数据总量：</span><span>98.9</span><span>GB</span></div>";
divContent += "</div>";
divContent += "<div class='tip2'>";
divContent += "<div class='tip2_item'><span>今日流入：</span><span id='flowinM'>" + flowInMessage.toLocaleString() + "</span><span>条</span></div>";
divContent += "<div class='tip2_item'><span>累计数据总数：</span><span>885.6366</span><span>万条</span></div>";
divContent += "</div>";
div.html(divContent); sta.push(setInterval(function (){
flowOutMessage += Math.floor(Math.random() * 50);
flowInMessage += Math.floor(Math.random() * 50);
$("#flowoutM").html(flowOutMessage.toLocaleString());
$("#flowinM").html(flowInMessage.toLocaleString());
}, 1000)
)
} function getMainDiv(boxObj){
var id = boxObj.attr("id") + "-main-div"
var style={
width:1340,
height:800,
bottom:150,
left:580,
position:"absolute",
overflow:"hidden",
padding:"0 20px",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,bottom:170},500); var divContent = "<div class='cornerLine TLCorner'></div>";
divContent += "<div class='cornerLine TRCorner'></div>";
divContent += "<div class='cornerLine BLCorner'></div>";
divContent += "<div class='cornerLine BRCorner'></div>";
divContent += "<div class='MD_title'>宁波建筑业专题</div>";
div.append($(divContent)); getMDECharts(div);
getMDTip(div);
getMDMap(div);
} function getMDMap(boxObj){
var id = boxObj.attr("id") + "-MD-map"
var style={
width:600,
height:600,
top:120,
left:370,
position:"absolute",
overflow:"hidden",
border:"0px solid #3f556f",
background:"rgba(63,85,111,0)",
padding:"0 20px",
"z-index":"2",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1},500);
div.html("<div style='zoom:1.2;position:absolute;left:-60px;top:20px;'>" + ningMap + "</div>");
//var chart = echarts.init(div[0]); //chart.setOption(option);
} function getMDTip(boxObj){
var id = boxObj.attr("id") + "-MD-tip"
var style={
width:300,
height:450,
top:20,
right:65,
position:"absolute",
overflow:"hidden",
//border:"1px solid #3f556f",
padding:"0 20px",
"z-index":"3",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,top:150},500); var divContent = "<div class='MDTipTitle'>鄞州区</div>";
divContent += "<div class='MDTipLine'>开工项目数量与面积</div>";
divContent += "<div class='MDTipLine2' id='MDTip1'><span>4,017</span>个<span>／28,741</span>万㎡</div>";
divContent += "<div class='MDTipLine'>竣工项目数量与面积</div>";
divContent += "<div class='MDTipLine2' id='MDTip2'><span>345</span>个<span>／4,216</span>万㎡</div>";
divContent += "<div class='MDTipLine'>企业数量</div>";
divContent += "<div class='MDTipLine2' id='MDTip3'><span>519</span>家</div>";
divContent += "<div class='MDTipLine'>龙头企业</div>";
divContent += "<div class='MDTipLine2' id='MDTip4'>";
divContent += "浙江万华建设集团股份有限公司";
divContent += "<br>大荣建设有限公司";
divContent += "<br>宁波建工股份有限公司";
divContent += "</div>"; div.html(divContent);
sta.push(setInterval(function (){
div.fadeOut(1000,function(){
var r = Math.floor(Math.random() * areaData.length + 1);
div.find("div").eq(0).html(areaData[r]);
$("#MDTip1 span").eq(0).html((Math.floor(Math.random() * 5000 + 1000)).toLocaleString());
$("#MDTip1 span").eq(1).html(" / "+(Math.floor(Math.random() * 20000 + 4000)).toLocaleString());
$("#MDTip2 span").eq(0).html((Math.floor(Math.random() * 2000 + 100)).toLocaleString());
$("#MDTip2 span").eq(1).html(" / "+(Math.floor(Math.random() * 5000 + 1000)).toLocaleString());
$("#MDTip3 span").html((Math.floor(Math.random() * 1500 + 150)).toLocaleString());
div.slideDown(300);
})
}, 17400)
)
} function getMDECharts(boxObj){
var id = boxObj.attr("id") + "-MD-echarts-1"
var style={
width:350,
height:700,
bottom:150,
left:-20,
position:"absolute",
overflow:"hidden",
padding:"0 20px",
opacity:0
}
var div = creatDiv(id,style,boxObj);
div.animate({opacity:1,bottom:20,left:20},500); var chart = echarts.init(div[0]); var data = [
{itemStyle:{normal:{color:"#900006"}},value:1132},
{itemStyle:{normal:{color:"#900006"}},value:2461},
{itemStyle:{normal:{color:"#900006"}},value:1115},
{itemStyle:{normal:{color:"#900006"}},value:1854},
{itemStyle:{normal:{color:"#900006"}},value:4990},
4216,
3451,
1967,
1579,
2004,
710,
376,
5,
23,
63,
5,
50
];
var data2 = [
{itemStyle:{normal:{color:"#900006"}},value:125},
{itemStyle:{normal:{color:"#900006"}},value:527},
{itemStyle:{normal:{color:"#900006"}},value:239},
{itemStyle:{normal:{color:"#900006"}},value:585},
{itemStyle:{normal:{color:"#900006"}},value:1169},
1148,
928,
675,
378,
1028,
539,
45,
111,
5,
221,
10,
12
]; var option = {
title: [
{
text: '各区域产值对比',
textStyle:{color:"#fff",fontSize:16},
top:20
},
{
text: '(单位：亿元)',
textStyle:{color:"#ccc",fontSize:12,fontWeight:"normal"},
top:24,
left:114
},
],
grid: {
left: '1%',
right: '13%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'value',
max: 2000,
splitLine: {
show: false
},
show:false
},
yAxis: {
type: 'category',
axisLine:{show:false},
data: areaData,
axisTick: {
show: false
},
axisLabel:labelColor
},
series: [
{
type: 'bar',
barWidth:"30%",
label: {
normal: {
show: true,
position:'right',
color:'#94BEE8',
formatter:function(a){
return a.value.toLocaleString();
}
}
},
itemStyle:{normal:{color:"#B26316"}},
data:data2.reverse(),
animationDelay: function (idx) {
return idx * 50 + 1;
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 2;
}
};
var option2 = {
title: [
{
text: '各区域竣工面积对比',
textStyle:{color:"#fff",fontSize:16,},
top:20
},
{
text: '(单位：万㎡)',
textStyle:{color:"#ccc",fontSize:12,fontWeight:"normal"},
top:24,
left:146
},
],
grid: {
left: '1%',
right: '13%',
bottom: '1%',
containLabel: true
},
xAxis: {
show:false
},
yAxis: {
type: 'category',
axisLine:{show:false},
data: areaData.reverse(),
axisTick: {
show: false
},
axisLabel:labelColor
},
series: [
{
type: 'bar',
barWidth:"30%",
label: {
normal: {
show: true,
position:'right',
color:'#94BEE8',
formatter:function(a){
return a.value.toLocaleString();
}
}
},
itemStyle:{normal:{color:"#B26316"}},
data:data.reverse(),
animationDelay: function (idx) {
return idx * 100 + 10;
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 2;
}
}; chart.setOption(option);
var echarts_b = false; sta.push(setInterval(function (){
var thisOption = echarts_b?option:option2;
echarts_b = !echarts_b;
div.animate({opacity:0},3000,function(){
chart.clear();
chart.setOption(thisOption);
div.animate({opacity:1},2000);
})
}, 15000)
)
} </script> <script>
$(window).load(function(){
fillExample($("#example"));
setBodySize();
});
$(window).resize(function(){
setBodySize();
}); //拖动切换
var downX = 0;
var ifFirstScreen = true;
var exampleTitle = '<div style="text-align:center;" ><img src="http://cdn.attach.qdfuns.com/notes/pics/201711/17/104523x79au2aip57dyfaf.png"></div>';
$("#box").mousedown(function(e){
downX = e.clientX;
return false;
})
$("#box").mouseup(function(e){
var distance = e.clientX - downX;
if(Math.abs(distance) < 200) return;
var obj1 = ifFirstScreen ? $("#example"):$("#example2");
var obj2 = ifFirstScreen ? $("#example2"):$("#example");
var left1 = distance < 0 ? "100%" : "-100%";
var left2 = distance < 0 ? "-100%" : "100%";
obj2.css({left:left1});
obj1.animate({left:left2},function(){
obj1.html(exampleTitle);
});
obj2.animate({left:0},function(){
fillExample(obj2);
});
ifFirstScreen = !ifFirstScreen; return false;
})
</script>
</body>
</html>
echarts demo的更多相关文章
- Echarts图表常用功能配置，Demo示例
先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...
- 开源库Magicodes.ECharts使用教程
目录 1 概要 2 2 Magicodes.ECharts工作原理 3 2.1 架构说明 3 2.1.1 Axis 4 2.1.2 CommonD ...
- mpvue——引入echarts图表
安装 mpvue-echarts的github地址 https://github.com/F-loat/mpvue-echarts $ cnpm install mpvue-echarts $ cnp ...
- Echarts扩展地图文字位置错乱的问题
最近在弄echarts 因为要用到扩展地图,所以在官网下载了相应的json文件 ,引入之后发现文字位置错乱 于是查找网上资料 发现 textFixed : { ...
- echarts.js多图表数据展示使用小结
echarts api文档: http://echarts.baidu.com/echarts2/doc/doc.html echarts demo示例: http://echarts.baidu.c ...
- Angular使用echarts
安装 npm install echarts --save npm install @types/echarts --save 基本使用 定义一个dom <div id="chart& ...
- react-native-echarts在打包时出现的坑
react-native-echarts目前是RN开发中使用echarts图表最好的插件了,用法与Echarts完全一致,默认提供了三个属性: option (object): The option ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- react native中使用native-echarts
第一步,下载依赖 npm install native-echarts --save 第二步,引入 import Echarts from 'native-echarts'; 第三步,使用 expor ...
随机推荐
- oc71--NSArray2
// // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject - (void)say; - ( ...
- ubuntu安装typora
optional, but recommended sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys BA300B7755AF ...
- ios集合
Foundation framework中用于收集cocoa对象(NSObject对象)的三种集合分别是: NSArray 用于对象有序集合(数组) NSSet 用于对象无序集合 (集合) NSDic ...
- python 循环高级用法 [expression for x in X [if condition] for y in Y [if condition] ... for n in N [if condition] ]按照从左至右的顺序，分别是外层循环到内层循环
高级语法 除了像上面介绍的 [x ** 2 for x in L] 这种基本语法之外,列表推导式还有一些高级的扩展. 4.1. 带有if语句 我们可以在 for 语句后面跟上一个 if 判断语句,用于 ...
- MyEclipse个性设置
MyEclipse个性设置 (1)Myeclipse 打开 jsp 的默认编辑器不好,会同时打开预览.所以做如下更改 Windows–>Perferences–>General–>E ...
- Is the Information Reliable?(差分约束系统)
http://poj.org/problem?id=2983 题意:给出M条信息,判断这些信息的正确性.(1)V A B :表示A,B之间的距离>=1; (2)P A B X :表示A B之间的 ...
- P1272 重建道路(树形dp)
P1272 重建道路 题目描述 一场可怕的地震后,人们用N个牲口棚(1≤N≤150,编号1..N)重建了农夫John的牧场.由于人们没有时间建设多余的道路,所以现在从一个牲口棚到另一个牲口棚的道路是惟 ...
- JS判断数组是否包含某元素
我在学习ES6数组拓展时,发现了新增了不少了有趣的数组方法,突然想好工作中判断数组是否包含某个元素是非常常见的操作,那么这篇文章顺便做个整理. 1.for循环结合break 可能很多人第一会想到for ...
- sessionStorage 的使用
sessionStorage 的使用: sessionStorage.removeItem("data"); sessionStorage.getItem("data&q ...
- C/C++ Python的函数默认参数
发现C/C++ Python的函数可以使用默认参数,来减少传参时候的参数个数. 但是:这样的默认参数最好是不变对象! #include <stdio.h> #include <st ...