JS+ECharts实现大屏数据可视化（一）
JavaScript+ECharts实现大屏数据可视化
- JavaSctipt+ECharts实现大屏数据可视化
-
- 实现过程
-
- 1 项目适配
- 2 搭建页面初始结构
- 3 对页面进行CSS初始化
JavaSctipt+ECharts实现大屏数据可视化
本文利用纯JS语言+ECharts实现对数据的可视化（目前数据是静态的，后期如果有时间，会增加和数据库的交互）
最终结果如下图所示:
实现过程
1 项目适配
对屏幕的不同尺寸实现适配，文件放在js/flexible.js下（这里用到了立即执行函数） 代码片.
(function flexible(window, document) {
// 获取的html 的根元素
var docEl = document.documentElement
// dpr 物理像素比，可以在浏览器控制台查看对应的dpr
var dpr = window.devicePixelRatio || 1
// 设置我们body 的字体大小
function setBodyFontSize() {
// 如果页面中有body 这个元素 就设置body的字体大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
// 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body的字体大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 24 设置我们html 元素的文字大小 将整个页面划分成多少等份
function setRemUnit() {
var rem = docEl.clientWidth / 24
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize 当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
window.addEventListener('resize', setRemUnit)
// pageshow 是我们重新加载页面触发的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
2 搭建页面初始结构
将页面划分为3大部分，左，中，右（有很多冗余的代码，可以使用JS进行动态节点生成，减少代码量）
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts数据可视化title>
<script src="/js/07-flexible.js">script>
<link rel="stylesheet" href="./fonts/icomoon.css">
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="./css/index.less">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./fonts/style.css">
<script src="/js/echarts.min.js">script>
<script src="/js/07-flexible.js">script>
<script src="/js/jquery.min.js">script>
<script src="/js/china.js">script>
<script src="/js/bar.js">script>
<style>
style>
head>
<body>
<div class="viewport">
<div class="column">
<div class="panel overview">
<div class="inner">
<ul>
<li>
<h4>2,190h4>
<span>
<i class="iconfont icon-dot">i>
设备总数
span>
li>
<li>
<h4>190h4>
<span>
<i class="iconfont icon-dot" style="color: #6acca3;">i>
季度新增
span>
li>
<li>
<h4>3,001h4>
<span>
<i class="iconfont icon-dot">i>
运营设备
span>
li>
<li>
<h4>108h4>
<span>
<i class="iconfont icon-dot" style="color: #ed3f35;">i>
异常设备
span>
li>
ul>
div>
div>
<div class="panel monitor">
<div class="inner">
<div class="tabs">
<a href="javascript:;" class="active" index="0">故障设备监控a>
<a href="javascript:;" index="1" >异常设备监控a>
div>
<div class="content" style="display: block;">
<div class="header">
<span class="col">故障时间span>
<span class="col">设备地址span>
<span class="col">异常代码span>
div>
<div class="marquee-view">
<div class="marquee">
<div class="row">
<span class="col">20180701span>
<span class="col">11北京市昌平西路金燕龙写字楼span>
<span class="col">1000001span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190601span>
<span class="col">北京市昌平区城西路金燕龙写字楼span>
<span class="col">1000002span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190704span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000003span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20180701span>
<span class="col">北京市昌平区建路金燕龙写字楼span>
<span class="col">1000004span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000005span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000006span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建西路金燕龙写字楼span>
<span class="col">1000007span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000008span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000009span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190710span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000010span>
<span class="icon-dot">span>
div>
div>
div>
div>
<div class="content">
<div class="header">
<span class="col">异常时间span>
<span class="col">设备地址span>
<span class="col">异常代码span>
div>
<div class="marquee-view">
<div class="marquee">
<div class="row">
<span class="col">20180701span>
<span class="col">11北京市昌平西路金燕龙写字楼span>
<span class="col">1000001span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190601span>
<span class="col">北京市昌平区城西路金燕龙写字楼span>
<span class="col">1000002span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190704span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000003span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20180701span>
<span class="col">北京市昌平区建路金燕龙写字楼span>
<span class="col">1000004span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000005span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000006span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建西路金燕龙写字楼span>
<span class="col">1000007span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000008span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190701span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000009span>
<span class="icon-dot">span>
div>
<div class="row">
<span class="col">20190710span>
<span class="col">北京市昌平区建材城西路金燕龙写字楼span>
<span class="col">1000010span>
<span class="icon-dot">span>
div>
div>
div>
div>
div>
div>
<div class="panel point">
<div class="inner">
<h3>点位分布统计h3>
<div class="chart">
<div class="pie">div>
<div class="data">
<div class="item">
<h4>320,11h4>
<span><i class="icon-dot" style="color: #ed3f35;">i>点位总数span>
div>
<div class="item">
<h4>418h4>
<span><i class="icon-dot" style="color: #eacf19;">i>本月新增span>
div>
div>
div>
div>
div>
div>
<div class="column">
<div class="map">
<div class="map1">div>
<div class="map2">div>
<div class="map3">div>
<div class="chart">div>
div>
<div class="total panel">
<div class="inner">
<h3>全国用户总量统计h3>
<div class="chart">
<div class="bar">div>
<div class="data">
<div class="item">
<h4>120,899h4>
<span><i class="icon-dot" style="color: #ed3f35;">i>用户总量span>
div>
<div class="item">
<h4>248h4>
<span><i class="icon-dot" style="color: #eacf19;">i>本月新增span>
div>
div>
div>
div>
div>
div>
<div class="column">
<div class="order panel">
<div class="inner">
<div class="tabs">
<a href="javascript:;" class="active">365天a>
<a href="javascript:;">90天a>
<a href="javascript:;">30天a>
<a href="javascript:;">24小时a>
div>
<div class="content" style="display:block">
<ul>
<li>
<h4>20,301,987h4>
<span><i class="icon-dot" style="color: #ed3f35;" >i>订单量span>
li>
<li>
<h4>99,834h4>
<span><i class="icon-dot" style="color: #eacf19;">i>销售额(万元)span>
li>
ul>
div>
<div class="content" >
<ul>
<li>
<h4>2,301,987h4>
<span><i class="icon-dot" style="color: #ed3f35;" >i>订单量span>
li>
<li>
<h4>9,834h4>
<span><i class="icon-dot" style="color: #eacf19;">i>销售额(万元)span>
li>
ul>
div>
<div class="content" >
<ul>
<li>
<h4>301,987h4>
<span><i class="icon-dot" style="color: #ed3f35;" >i>订单量span>
li>
<li>
<h4>834h4>
<span><i class="icon-dot" style="color: #eacf19;">i>销售额(万元)span>
li>
ul>
div>
<div class="content" >
<ul>
<li>
<h4>987h4>
<span><i class="icon-dot" style="color: #ed3f35;" >i>订单量span>
li>
<li>
<h4>34h4>
<span><i class="icon-dot" style="color: #eacf19;">i>销售额(万元)span>
li>
ul>
div>
div>
div>
<div class="sales panel">
<div class="inner">
<div class="header">
<h3>销售额统计h3>
<ul>
<li class="active" type="year">年li>
<li type="quarter">季li>
<li type="month">月li>
<li type="week">周li>
ul>
div>
<div class="chart">
<div class="line">div>
div>
div>
div>