<!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
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
EchartScreen.rar (18个子文件)
EchartScreen
js
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
共 18 条
- 1
资源评论
清风道长白云外
- 粉丝: 5
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 现在微信小程序能用的mqtt.min.js
- 基于MPC的非线性摆锤系统轨迹跟踪控制matlab仿真,包括程序中文注释,仿真操作步骤
- 基于MATLAB的ITS信道模型数值模拟仿真,包括程序中文注释,仿真操作步骤
- 基于Java、JavaScript、CSS的电子产品商城设计与实现源码
- 基于Vue 2的zjc项目设计源码,适用于赶项目需求
- 基于跨语言统一的C++头文件设计源码开发方案
- 基于MindSpore 1.3的T-GCNTemporal Graph Convolutional Network设计源码
- 基于Java的贝塞尔曲线绘制酷炫轮廓背景设计源码
- 基于Vue框架的Oracle数据库实训大作业设计与实现源码
- 基于SpringBoot和Vue的共享单车管理系统设计源码
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功