大数据可视化（全屏）

实现效果

（在浏览器上按f11全屏预览）
预览地址： https://2468901709.github.io/echarts–bigdata/
完整vue项目地址： https://cloud.189.cn/t/FRf2AvvANnY3

使用工具

1、vue框架 : 一个用于构建用户界面的渐进式框架

2、Apache ECharts : 一个基于 JavaScript 的开源可视化图表库

功能实现

自适应全屏

html{/* 将屏幕的宽度设置为24rem,从而自动实现将内容按照屏幕的大小进行缩放 *//* 屏幕宽高比16:9 */font-size: calc(100vw / 24);color: #fff;
}

获取实时时间

mounted () {setInterval(() => {this.nowTime = this.getNowTime()}, 1000)},methods: {getNowTime () {let myDate = new Date()let year = myDate.getFullYear()let month = myDate.getMonth() + 1let date = myDate.getDate()let hour = myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()let minute = myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes()let second = myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds()return `${year}年${month}月${date}日${hour}:${minute}:${second}`}}

可视化图标配置

1、柱状图、折线图、饼图等等，根据echarts官网文档配置

2、中国地图，根据myMap.js配置

(function() {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".map .chart"));// 2. 指定配置和数据// 2. 指定配置和数据var geoCoordMap = {上海: [121.4648, 31.2891],东莞: [113.8953, 22.901],东营: [118.7073, 37.5513],中山: [113.4229, 22.478],临汾: [111.4783, 36.1615],临沂: [118.3118, 35.2936],丹东: [124.541, 40.4242],丽水: [119.5642, 28.1854],乌鲁木齐: [87.9236, 43.5883],佛山: [112.8955, 23.1097],保定: [115.0488, 39.0948],兰州: [103.5901, 36.3043],包头: [110.3467, 41.4899],北京: [116.4551, 40.2539],北海: [109.314, 21.6211],南京: [118.8062, 31.9208],南宁: [108.479, 23.1152],南昌: [116.0046, 28.6633],南通: [121.1023, 32.1625],厦门: [118.1689, 24.6478],台州: [121.1353, 28.6688],合肥: [117.29, 32.0581],呼和浩特: [111.4124, 40.4901],咸阳: [108.4131, 34.8706],哈尔滨: [127.9688, 45.368],唐山: [118.4766, 39.6826],嘉兴: [120.9155, 30.6354],大同: [113.7854, 39.8035],大连: [122.2229, 39.4409],天津: [117.4219, 39.4189],太原: [112.3352, 37.9413],威海: [121.9482, 37.1393],宁波: [121.5967, 29.6466],宝鸡: [107.1826, 34.3433],宿迁: [118.5535, 33.7775],常州: [119.4543, 31.5582],广州: [113.5107, 23.2196],廊坊: [116.521, 39.0509],延安: [109.1052, 36.4252],张家口: [115.1477, 40.8527],徐州: [117.5208, 34.3268],德州: [116.6858, 37.2107],惠州: [114.6204, 23.1647],成都: [103.9526, 30.7617],扬州: [119.4653, 32.8162],承德: [117.5757, 41.4075],拉萨: [91.1865, 30.1465],无锡: [120.3442, 31.5527],日照: [119.2786, 35.5023],昆明: [102.9199, 25.4663],杭州: [119.5313, 29.8773],枣庄: [117.323, 34.8926],柳州: [109.3799, 24.9774],株洲: [113.5327, 27.0319],武汉: [114.3896, 30.6628],汕头: [117.1692, 23.3405],江门: [112.6318, 22.1484],沈阳: [123.1238, 42.1216],沧州: [116.8286, 38.2104],河源: [114.917, 23.9722],泉州: [118.3228, 25.1147],泰安: [117.0264, 36.0516],泰州: [120.0586, 32.5525],济南: [117.1582, 36.8701],济宁: [116.8286, 35.3375],海口: [110.3893, 19.8516],淄博: [118.0371, 36.6064],淮安: [118.927, 33.4039],深圳: [114.5435, 22.5439],清远: [112.9175, 24.3292],温州: [120.498, 27.8119],渭南: [109.7864, 35.0299],湖州: [119.8608, 30.7782],湘潭: [112.5439, 27.7075],滨州: [117.8174, 37.4963],潍坊: [119.0918, 36.524],烟台: [120.7397, 37.5128],玉溪: [101.9312, 23.8898],珠海: [113.7305, 22.1155],盐城: [120.2234, 33.5577],盘锦: [121.9482, 41.0449],石家庄: [114.4995, 38.1006],福州: [119.4543, 25.9222],秦皇岛: [119.2126, 40.0232],绍兴: [120.564, 29.7565],聊城: [115.9167, 36.4032],肇庆: [112.1265, 23.5822],舟山: [122.2559, 30.2234],苏州: [120.6519, 31.3989],莱芜: [117.6526, 36.2714],菏泽: [115.6201, 35.2057],营口: [122.4316, 40.4297],葫芦岛: [120.1575, 40.578],衡水: [115.8838, 37.7161],衢州: [118.6853, 28.8666],西宁: [101.4038, 36.8207],西安: [109.1162, 34.2004],贵阳: [106.6992, 26.7682],连云港: [119.1248, 34.552],邢台: [114.8071, 37.2821],邯郸: [114.4775, 36.535],郑州: [113.4668, 34.6234],鄂尔多斯: [108.9734, 39.2487],重庆: [107.7539, 30.1904],金华: [120.0037, 29.1028],铜川: [109.0393, 35.1947],银川: [106.3586, 38.1775],镇江: [119.4763, 31.9702],长春: [125.8154, 44.2584],长沙: [113.0823, 28.2568],长治: [112.8625, 36.4746],阳泉: [113.4778, 38.0951],青岛: [120.4651, 36.3373],韶关: [113.7964, 24.7028]};var XAData = [[{ name: "西安" }, { name: "北京", value: 100 }],[{ name: "西安" }, { name: "上海", value: 100 }],[{ name: "西安" }, { name: "广州", value: 100 }],[{ name: "西安" }, { name: "西宁", value: 100 }],[{ name: "西安" }, { name: "拉萨", value: 100 }]];var XNData = [[{ name: "西宁" }, { name: "北京", value: 100 }],[{ name: "西宁" }, { name: "上海", value: 100 }],[{ name: "西宁" }, { name: "广州", value: 100 }],[{ name: "西宁" }, { name: "西安", value: 100 }],[{ name: "西宁" }, { name: "银川", value: 100 }]];var YCData = [[{ name: "拉萨" }, { name: "北京", value: 100 }],[{ name: "拉萨" }, { name: "潍坊", value: 100 }],[{ name: "拉萨" }, { name: "哈尔滨", value: 100 }]];var planePath ="path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";//var planePath = 'arrow';var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord],value: dataItem[1].value});}}return res;};var color = ["#fff", "#fff", "#fff"]; //航线的颜色var series = [];[["西安", XAData],["西宁", XNData],["银川", YCData]].forEach(function(item, i) {series.push({name: item[0] + " Top3",type: "lines",zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: "red", //arrow箭头的颜色symbolSize: 3},lineStyle: {normal: {color: color[i],width: 0,curveness: 0.2}},data: convertData(item[1])},{name: item[0] + " Top3",type: "lines",zlevel: 2,symbol: ["none", "arrow"],symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: planePath,symbolSize: 15},lineStyle: {normal: {color: color[i],width: 1,opacity: 0.6,curveness: 0.2}},data: convertData(item[1])},{name: item[0] + " Top3",type: "effectScatter",coordinateSystem: "geo",zlevel: 2,rippleEffect: {brushType: "stroke"},label: {normal: {show: true,position: "right",formatter: "{b}"}},symbolSize: function(val) {return val[2] / 8;},itemStyle: {normal: {color: color[i]},emphasis: {areaColor: "#2B91B7"}},data: item[1].map(function(dataItem) {return {name: dataItem[1].name,value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});var option = {tooltip: {trigger: "item",formatter: function(params, ticket, callback) {if (params.seriesType == "effectScatter") {return "线路：" + params.data.name + "" + params.data.value[2];} else if (params.seriesType == "lines") {return (params.data.fromName +">" +params.data.toName +"<br />" +params.data.value);} else {return params.name;}}},geo: {map: "china",label: {emphasis: {show: true,color: "#fff"}},roam: false,//   放大我们的地图zoom: 1,itemStyle: {normal: {areaColor: "rgba(43, 196, 243, 0.42)",borderColor: "rgba(43, 196, 243, 1)",borderWidth: 1},emphasis: {areaColor: "#2B91B7"}}},series: series};myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});
})();

echarts+vue 实现大数据可视化（全屏）相关推荐

基于hadoop和echarts的教育大数据可视化系统毕设完整的代码+数据集
一.摘要在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
echarts学习——（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合.以及一些功能模块的设计及代码 ...
基于 HTML+ECharts 实现物流大数据可视化平台（含源码）
源码下载地址在文章末尾! 效果演示智慧仓储系统: 物流大数据服务平台: 物流云数据可视化平台: 智慧物流服务中心: 物联网数据统计平台: 源码下载地址 https://download.csdn.n ...
基于JavaScript+Koa2实现 Echarts 电商平台数据可视化大屏全栈【100010415】
全新 Echarts 电商平台数据可视化大屏全栈 1. 前言五一假期重学了新版 Echarts,一个基于 JavaScript 的开源可视化图表库,收集参考了很多网上资料,最终选择电商平台作为练手项 ...
vue 可视化布局工具_GitDataV一款Github的'大数据可视化平台'
简介 GitDataV基于Vue框架构建的github数据可视化平台,是一个github"大数据可视化平台",通过它你可以更直观的看到你在github里的一些数据: 个人信息(✔) ...
大数据可视化大屏设计经验，教给你！
前言大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的 ...
大数据可视化大屏设计经验分享
前言大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习 ...
大数据可视化大屏实例
最近得到公司的一个任务,就是开发可视化大屏,这个我也没有弄过啊,所以当时是有一点手足无措的感觉,然后在进行借助搜索之后,发现数据大屏其实也就是那样,一般最经典的数据大屏就是图加背景然后加数据就搞定了 ...

echarts+vue 实现大数据可视化（全屏）