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来做了,但是,了解一下如何从头开始写一个数据大屏还是挺有好玩的. ------------- 为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的 ...
随机推荐
- [js]js的表单验证
http://uule.iteye.com/blog/2183622 表单验证类 <form class="form" method="post" id= ...
- 微信小程序：wx.navigateBack页面返回传参
场景(比如:商城选地址,选优惠券): 在[页面A]中调用wx.navigateTo方法跳转到[页面B] 然后从[页面B]返回[页面A], 并将[页面B]中的一些数据传回[页面A] wx.navigat ...
- Python 全栈开发一 python初识
1.Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- Vim的6种基本模式及基本操作
说明:文章所有内容截选自实验楼教程[Vim编辑器]~ Vim 快速入门 一.实验介绍 1.1 实验内容 本次实验将学习vim中的不同模式和一些基本操作. 1.2 实验知识点 Vim中的六种基本模式 V ...
- vuex中的dispatch和commit
dispatch:含有异步操作,eg:向后台提交数据,写法: this.$store.dispatch('mutations方法名',值) commit:同步操作,写法:this.$store.com ...
- leetcode的注意点
读懂一个题其实非常非常重要,读懂题包括要读懂题的问题是什么,条件是什么,考察的是什么知识点.所以能够读懂题就已经成功一半了,但是如果没有读懂题目就开始答题,就不假思索地乱写答案,那么会事倍功半,还得返 ...
- 新手解读JSP
一.解读简单JSP代码(承接上篇文章中的代码) 1. <%@ page language="java" contentType="text/html; charse ...
- express-generator 自动生成服务器基本文件
(1) 安装 express-generator 构建工具 npm install -g express-generator 在命令行中用 npm 在全局安装 express-generator 脚手 ...
- vue打包后404，webpack配置问题
首先声明这是基于vue2.x的 1. 将其中build的配置项assetsPublicPath进行修改,改为上图-->目的是将资源文件的引入路径,改为相对地址(相对index.html) 2.h ...
- Spring @Value注解 and Spring Boot @ConfigurationProperties注解
一.Spring的@Value Spring EL表达式语言,支持在XML和注解中表达式,类是于JSP的EL表达式语言. 在Spring开发中经常涉及调用各种资源的情况,包含普通文件.网址.配置文件. ...