数据大屏展示+echart+jquery+html资源-CSDN文库

共18个文件

js：9个

png：5个

html：2个

echart

jquery

需积分: 2 123 浏览量 2024-10-31 10:19:23 上传评论收藏 745KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

EchartScreen.rar （18个子文件）

EchartScreen

mrote.js 459B

jquery-3.7.1.min.js 85KB

dfData.js 4KB

echart5.4

map

china.js 61KB

echarts.js 3.17MB

wodanims.js 881B

mmap.js 5KB

jquery.rotate.min.js 7KB

mcharts.js 15KB

img

0.png 22KB

1.png 17KB

ecic0.png 3KB

ecic1.png 4KB

2.png 49KB

css

mmain.css 152B

Web.config 471B

index.html 5KB

indextst.html 9KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/mmain.css" rel="stylesheet" /> <script src="js/jquery-3.7.1.min.js"></script> <script src="js/jquery.rotate.min.js"></script> <script src="js/echart5.4/echarts.js"></script> <script src="js/echart5.4/map/china.js"></script> <script src="js/dfData.js"></script> <script> var H; var itv; var mapChart; var mapindx = 0;//当前 var rotatedt = [{ id: "img0", sd: 0, rd: -200 }, { id: "img1", sd: 0, rd: 720 }, { id: "img2", sd: 0, rd: -360 }]//旋转参数 $(function () { $(window).resize(function () { setsize(); }); setsize(); startitv(); }); function powerclick() { var img3 = $("#img3").attr('src'); if (img3.indexOf('ecic0.png') > 0) { $("#img3").attr('src', 'img/ecic1.png') if (itv) { clearInterval(itv); } } else { $("#img3").attr('src', 'img/ecic0.png') startitv(); } } function setsize() { H = $(window).height(); $(".mainbk").css("height", H); $("#map").css("height", parseInt(H * 20 / 30)); reloadchart(); } function rotation() { for (var i = 0; i < rotatedt.length; i++) { var itm = rotatedt[i]; var tmp = itm.sd; itm.sd = itm.rd; itm.rd = tmp; $("#" + itm.id).rotate({ angle: itm.sd, animateTo: itm.rd, duration: 2000 }); } } function startitv() { if (itv) { clearInterval(itv); } itv_do(); itv = setInterval(function () { itv_do(); }, 2000); } function itv_do() { rotation();//旋转 //地图轮播 if (mapChart) { mapindx++ if (mapindx >= wince_ord_num.length) { mapindx = 0 } mapChart.dispatchAction({ type: 'select', serieIndex: 0, dataIndex: mapindx });//选中 } } function reloadchart() { loadmap('map'); } function loadmap(did) { mapChart = echarts.init(document.getElementById(did)); mapChart.setOption({ //title: { // text: 'iphone销量', // subtext: '纯属虚构', // x: 'center' //}, tooltip: { trigger: 'item', showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms formatter: function (params) { var res = params.name; //res += '<br/>' + params.seriesName; var data = 0; if (params.value > 500 && params.value < 1000) { data = params.value - 500 + 24500; } if (params.value > 1000 && params.value < 1500) { data = params.value - 1000 + 49500; } if (params.value > 1500 && params.value < 2000) { data = params.value - 1500 + 74500; } if (params.value > 2000 && params.value < 2500) { data = params.value - 2000 + 99500; } if (params.value > 2500) { data = params.value - 2500 + 349500; } res += '<br/> 订单数 : ' + data; return res; } }, //legend: { // orient: 'vertical', // x: 'right', //}, dataRange: { show: false, min: 0, max: 2500, x: 'left', y: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true }, series: [ { name: '订单数', type: 'map', map: 'china', layoutCenter: ['50%', '50%'], layoutSize: '120%', selectedMode: 'single',//当选择一个时，上一个取消选择 roam: false, label: { show: true, color: '#8cc', }, itemStyle: { areaColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [{ offset: 0, color: 'rgba(125, 255, 255, 0)' // 阴影颜色 }, { offset: 1, color: 'rgba(125, 255, 255, 0.2)' // 透明 }]), borderColor: '#8ee', borderWidth: 1, shadowColor: '#88f', shadowBlur: 20, shadowOffsetX: 0, shadowOffsetY: 0 }, emphasis: { label: { color: '#8ff' }, itemStyle: { areaColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [{ offset: 0, color: 'rgba(125, 255, 255, 0)' // 阴影颜色 }, { offset: 1, color: 'rgba(125, 255, 255, 0.4)' // 透明 }]), borderColor: '#8ff', borderWidth: 2, } }, select: { label: { color: '#8ff' }, itemStyle: { areaColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [{ offset: 0, color: 'rgba(125, 255, 125, 0)' // 阴影颜色 }, { offset: 1, color: 'rgba(125, 255, 125, 0.4)' // 透明 }]), borderColor: '#8ff', borderWidth: 2, } }, data: wince_ord_num, markPoint: { symbol: 'emptyCircle', symbolSize: function (v) { return 10 + v % 10 }, effect: { show: true, shadowBlur: 0 }, label: { show: false }, emphasis: { label: { position: 'top' } }, data: [ { name: '云南', value: 95, coord: [101.412251, 24.440609] } ] } } ] }); //var ecConfig = echarts.config;//事件命名统一挂载到require('echarts/config').E

评论收藏

内容反馈