ECharts + Jquery 做大屏展示
HTML
<!doctype html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>echarts</title>
<link rel="stylesheet" type="text/css" href="api.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head> <body>
<form id="form" runat="server">
<input type="hidden" id="start" name="start" value="0" />
<input type="button" id="btnSet" class="btnPause" title="点击停止" />
<div class="title"><b>大屏信息展示</b></div>
<div id="dataContainer" class="dataContainer"></div>
<div id="pieContainer" class="pieContainer"></div>
<div id="mapContainer" class="mapContainer"></div>
<div id="barContainer" class="barContainer"></div>
</form>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="options.js"></script>
<script type="text/javascript" src="index.js"></script> </html>
data.js
/************************************map**************************************/
var data = [{
name: '海门',
value: 40
}, {
name: '鄂尔多斯',
value: 12
}, {
name: '招远',
value: 62
}, {
name: '舟山',
value: 82
}, {
name: '齐齐哈尔',
value: 14
}, {
name: '盐城',
value: 125
}, {
name: '赤峰',
value: 126
}, {
name: '青岛',
value: 91
}, {
name: '乳山',
value: 118
}, {
name: '金昌',
value: 119
}, {
name: '泉州',
value: 121
}, {
name: '莱西',
value: 21
}, {
name: '日照',
value: 21
}, {
name: '胶南',
value: 55
}, {
name: '南通',
value: 60
}, {
name: '拉萨',
value: 84
}, {
name: '云浮',
value: 44
}, {
name: '梅州',
value: 125
}, {
name: '文登',
value: 95
}, {
name: '上海',
value: 125
}, {
name: '攀枝花',
value: 95
}, {
name: '威海',
value: 65
}, {
name: '承德',
value: 75
}, {
name: '厦门',
value: 46
}, {
name: '汕尾',
value: 66
}, {
name: '克拉玛依',
value: 72
}, {
name: '大庆',
value: 279
}];
//城市设置[经度，纬度]
var geoCoordMap = {
'海门': [121.15, 31.89],
'鄂尔多斯': [109.781327, 39.608266],
'招远': [120.38, 37.35],
'舟山': [122.207216, 29.985295],
'齐齐哈尔': [123.97, 47.33],
'盐城': [120.13, 33.38],
'赤峰': [118.87, 42.28],
'青岛': [120.33, 36.07],
'乳山': [121.52, 36.89],
'金昌': [102.188043, 38.520089],
'泉州': [118.58, 24.93],
'莱西': [120.53, 36.86],
'日照': [119.46, 35.42],
'胶南': [119.97, 35.88],
'南通': [121.05, 32.08],
'拉萨': [91.11, 29.97],
'云浮': [112.02, 22.93],
'梅州': [116.1, 24.55],
'文登': [122.05, 37.2],
'上海': [121.48, 31.22],
'攀枝花': [101.718637, 26.582347],
'威海': [122.1, 37.5],
'承德': [117.93, 40.97],
'厦门': [118.1, 24.46],
'汕尾': [115.375279, 22.786211],
'克拉玛依': [84.77, 45.59],
'大庆': [125.03, 46.58]
}; //浮层内容的设置（）
var $imgs = [{
area: '海门',
txt: '哈哈哈'
}, {
area: '鄂尔多斯',
txt: '哈哈哈'
}, {
area: '招远',
txt: '哈哈哈'
}, {
area: '舟山',
txt: '哈哈哈'
}, {
area: '齐齐哈尔',
txt: '哈哈哈'
}, {
area: '盐城',
txt: '哈哈哈'
}, {
area: '赤峰',
txt: '哈哈哈'
}, {
area: '青岛',
txt: '哈哈哈'
}, {
area: '乳山',
txt: '哈哈哈'
}, {
area: '金昌',
txt: '哈哈哈'
}, {
area: '泉州',
txt: '哈哈哈'
}, {
area: ' 莱西',
txt: '哈哈哈'
}, {
area: '日照',
txt: '哈哈哈'
}, {
area: '胶南',
txt: '哈哈哈'
}, {
area: '南通',
txt: '哈哈哈'
}, {
area: '拉萨',
txt: '哈哈哈'
}, {
area: '云浮',
txt: '哈哈哈'
}, {
area: '梅州',
txt: '哈哈哈'
}, {
area: '文登',
txt: '哈哈哈'
}, {
area: '上海',
txt: '哈哈哈'
}, {
area: '攀枝花',
txt: '哈哈哈'
}, {
area: '威海',
txt: '哈哈哈'
}, {
area: '承德',
txt: '哈哈哈'
}, {
area: '厦门',
txt: '哈哈哈'
}, {
area: '汕尾',
txt: '哈哈哈'
}, {
area: '克拉玛依',
txt: '哈哈哈'
}, {
area: '大庆',
txt: '哈哈哈'
}];
//数据转换函数
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
/************************************map**************************************/ /************************************pie**************************************/
var pieData = [{
value: 4698,
name: '个体司机'
}, {
value: 808,
name: '个体货主'
}, {
value: 404,
name: '公司货主'
}, {
value: 193,
name: '公司车队/专线'
}, {
value: 278,
name: '物流公司/园区'
}];
var pieColumn = ['个体司机', '个体货主', '公司货主', '公司车队/专线', '物流公司/园区'];
/************************************pie**************************************/ /************************************bar**************************************/
var barDate = ['2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09'];
var barColumn = ['车辆数', '用户数', '订单数'];
var barData = [
{
name: '车辆数',
type: 'bar',
label:{
show:true
},
data: [537, 763, 992, 1121, 1298, 1332]
}, {
name: '用户数',
type: 'bar',
label:{
show:true
},
data: [998, 1481, 2678, 4389, 6461, 6640],
markLine: {
label:{
show : false
},
lineStyle: {
// normal: {
// type: 'dashed'
// },
color:'#ccc'
},
data: [
[{
type: 'min'
}, {
type: 'max'
}]
]
}
}, {
name: '订单数',
type: 'bar',
label:{
show:true
},
data: [3847, 10126, 11922, 12099, 12335, 12341]
}
];
/************************************bar**************************************/ /************************************data**************************************/
var datadata = [12341,875,1332];
/************************************data**************************************/
options.js
var myOptions = [{
backgroundColor: '#020933',
title: {
top: 20,
// left: 190,
text: '', //标题
subtext: '',
sublink: '#', //subtext跳转地址
left: 'center',
// x: 'left',
textStyle: {
color: '#ccc'
}
},
//浮层设置
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
var $pna = params.name;
var res = "";
for (var i = 0; i < $imgs.length; i++) {
if ($imgs[i].area == $pna) {
res = '<p>' + $imgs[i].txt + '</p>'; //设置自定义数据的模板，这里的模板是文字
//console.log(res);
break;
}
}
setTimeout(function() {
// 仅为了模拟异步回调
callback(ticket, res); //回调函数，这里可以做异步请求加载的一些代码
}, 15)
return "loading";
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['Top 3', 'All'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
//调整显示级别 位置大小
layoutCenter: ['50%', '50%'],
layoutSize: 700,
series: [{
name: 'All',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}, {
name: 'Top 3',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 3)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}]
}, {
backgroundColor: '#020933',
title: {
top: 20,
text: '用户分布',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
right: 'right',
top: 40,
data: pieColumn,
textStyle:{
color:'#ccc'
}
},
series: [{
name: '用户类型',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data: pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
},{
backgroundColor: '#020933',
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:barColumn,
textStyle:{
color:'#ccc'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : barDate,
axisLine :{
lineStyle:{
color:'#ccc'
}
}
}
],
yAxis : [
{
type : 'value',
axisLine :{
lineStyle:{
color:'#ccc'
}
}
}
],
series : barData
}];
index.js
var mapContainer = document.getElementById('mapContainer');
var pieContainer = document.getElementById('pieContainer');
var barContainer = document.getElementById('barContainer');
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function() {
$("#form").width($(window).width());
$("#form").height($(window).height());
$("#mapContainer").width($("#form").width()*3/5);
$("#mapContainer").height(($("#form").height()-44)*3/5);
$("#barContainer").width($("#form").width()*2/5);
$("#barContainer").height(($("#form").height()-44)*2/5);
$("#pieContainer").width($("#form").width()*1/5);
$("#pieContainer").height(($("#form").height()-44)*3/5);
$("#pieContainer").css('left',$("#form").width()*1/5);
$("#dataContainer").width($("#form").width()*1/5);
$("#dataContainer").height(($("#form").height()-44)*3/5);
};
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(mapContainer);
var myChart2 = echarts.init(pieContainer);
var myChart3 = echarts.init(barContainer);
var uploadedDataURL = "china.json";
myChart1.showLoading();
myChart2.showLoading();
myChart3.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
echarts.registerMap('china', geoJson);
myChart1.hideLoading();
myChart2.hideLoading();
myChart3.hideLoading();
myChart1.setOption(myOptions[0],true);
myChart2.setOption(myOptions[1],true);
myChart3.setOption(myOptions[2],true);
//重置容器高宽
resizeWorldMapContainer();
myChart1.resize();
myChart2.resize();
myChart3.resize();
//用于使chart自适应高度和宽度
window.onresize = function() {
//重置容器高宽
resizeWorldMapContainer();
myChart1.resize();
myChart2.resize();
myChart3.resize();
};
});
$(function() {
//定时循环
// var interval = setInterval("redoMethod()", 5000); //每隔一秒执行一次redoMethod()
//假如有两个按钮：继续、暂停
$("#btnSet").click(function() { //点击暂停按钮
// if (interval) {
// clearInterval(interval);
// interval = null;
// }
if ($(this).attr("title") == "点击停止") {
$(this).attr("title", "点击开始");
$(this).attr("class", "btnPlay");
} else {
$(this).attr("title", "点击停止");
$(this).attr("class", "btnPause");
// interval = setInterval("redoMethod()", 5000);
}
});
var s = '<table>';
s += '<tr>';
s += '<td class=\"left\">订单数</td>';
s += '<td class=\"right\">'+ datadata[0] +'</td>';
s += '</tr>';
s += '<tr>';
s += '<td class=\"left\">平台企业</td>';
s += '<td class=\"right\">'+ datadata[1] +'</td>';
s += '</tr>';
s += '<tr>';
s += '<td class=\"left\">平台车辆</td>';
s += '<td class=\"right\">'+ datadata[2] +'</td>';
s += '</tr>';
s += '</table>';
$('#dataContainer').html(s);
// <table>
// <tr>
// <td class="left">订单数</td>
// <td class="right">12341</td>
// </tr>
// <tr>
// <td class="left">平台企业</td>
// <td class="right">875</td>
// </tr>
// <tr>
// <td class="left">平台车辆</td>
// <td class="right">1332</td>
// </tr>
// </table>
});
ECharts + Jquery 做大屏展示的更多相关文章
- Vuex与前端表格施展“组合拳”，实现大屏展示应用的交互增强
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 下图是一个产品开发中非常常见的大屏展示界面 ...
- echarts解决一些大屏图形配置方案汇总
本文主要记录使用echarts解决各种大屏图形配置方案. 1.说在前面 去年经常使用echarts解决一些可视化大屏项目,一直想记录下使用经验,便于日后快速实现.正好最近在整理文档,顺道一起记录在博客 ...
- jQuery/CSS3大屏下拉菜单 自定义子菜单内容
这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是 ...
- 给echarts加个“全屏展示”
echarts的工具箱并没有提供放大/全屏的功能, 查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature show代码 t ...
- 数据可视化界面UI设计大屏展示
- 基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
- vue+echarts+datav大屏数据展示及实现中国地图省市县下钻
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...
- 移动端不利用HTML5和echarts开发一样可以实现大数据展示及炫酷统计系统（产品技术综合）
一.由于项目需要进行手机看板展示设计及开发展示效果图如下:
- 从零开始设计数据大屏—基于Vue ZT
虽然已经决定这个项目用Wyn来做了,但是,了解一下如何从头开始写一个数据大屏还是挺有好玩的. ------------- 为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的 ...
随机推荐
- dxCameraControl控件(拍照)
拍照演示 主要属性设置 Active:True DeviceIndex:设备号,默认为0 其他方法 procedure Capture; //捕获 procedure Pause; //暂停 proc ...
- win7 64位共享打印机
故障一 链接的电脑提示需要密码 处理步聚:取消win7共享计算机上网络的密码保护共享 1.查看网上邻居链接局域网的网络的网络防火墙设置. 2.更改链接局域网的网络的防火墙的更改高级共设置. 3.关闭链 ...
- vue中使用promise
init1(){ return new Promise((resolve, reject) => { let data={ dateStr:this.time }; api.get('url', ...
- vue中常用的两中页面刷新的方式和页面回退
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要导航到不同的 URL,则使 ...
- vue-自定义全局键盘码
1.Vue.config.keyCodes.enter=13; //main.js中定义全局 <template> <div> <input v-model=" ...
- PHP数组对象对比机制
$a = [1,2]; $b = [1,'2']; var_dump($a == $b); // true var_dump($a === $b); // false $c = ['ab'=>' ...
- [js]顶部导航和内容区布局
自己实现顶部导航布局--内容显示 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- LINUX的DNS怎么设置？linux下如何修改DNS地址
LINUX的DNS怎么设置?linux下如何修改DNS地址 https://jingyan.baidu.com/article/870c6fc32c028eb03fe4be30.html Linux下 ...
- Ngx_Lua使用分享
2017年04月22日 20:05:21 阅读数:430 Nginx_Lua 1.1. 介绍 1.2. 安装 1.2.1. 安装JIT平台 1.2.2. NDK与Lua_module 1.2.3. 编 ...
- js同时获得数组的两个最小值
//数组中找两个最小值,及索引 //例如数组: [2,6,7,4,10,3,5]; 计算得出,min1=2,index1=0,min2=3,index2=5; var min1 = Infinity; ...