ECharts数据可视化项目-大屏数据可视化【持续更新中】

文章目录

ECharts数据可视化项目-大屏数据可视化【持续更新中】
- 一、数据可视化ECharts使用
- 二、技术栈
- 三、数据可视化
- 四、可视化适配方案
- - 1.使用技术：
  - 2.项目准备初始化：
  - 3.案例适配方案：
  - 4.基础设置：
  - 5.可视化项目头部制作：
  - 6.mainbox布局分析：
  - 7.公共面板模块 panel：
  - 8.panel盒子完成(图表模块布局)：
  - 9.数字模块no布局制作：
  - 10.数字模块no-hd布局制作：
  - 11.数字模块no-bd布局制作：
  - 12.地图模块(map)布局制作：
  - - map1球体模块制作
    - 旋转盒子1(map2)*
    - 旋转箭头盒子2(map3)
    - 地图模块(chart)
  - 页面布局完成
- 五、Echarts开源可视化图表库
- - 1.常见的数据可视化库：
  - 2.Echarts 简介
  - 2.Echarts体验使用：
  - - 步骤1：下载并引入echarts.js文件
    - 步骤2：准备一个具备大小的DOM容器
    - 步骤3：初始化echarts实例对象
    - 步骤4：指定配置项和数据option
    - 步骤5：将配置项设置给echarts实例对象
  - 2.Echarts基础配置：
总结
- ==**持续更新中**==

一、数据可视化ECharts使用

可视化面板布局适配屏幕
利用ECharts实现展示

二、技术栈

基于flexible.js+rem智能大屏适配
VScode cssrem插件
Flex布局
Less使用
基于Ecarts数据可视化展示
Echarts柱状图数据设置
Echarts地图引入

三、数据可视化

数据可视化主要目的：借助于图形手段，清晰有效地传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

四、可视化适配方案

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

1.使用技术：

div+css布局
flex布局
Less
原生js+jquery使用
rem适配
echarts基础

2.项目准备初始化：

index.html首页文件
css文件夹
js文件夹
font图标字体文件夹
images图片文件夹

下载插件（Easy LESS）

此插件会将我们写的less文件生成一份css文件，在index.html引入css文件即可

3.案例适配方案：

设计稿是1920px
1. flexible.js把屏幕分为24等份
2. cssrem插件的基准值是80px，插件-配置按钮-配置扩展设置-Root Font Size里面设置。但是你别忘记重启vscode软件保证生效

引入flexible.js

▼flexible.js源码(可以直接新建一个js文件，复制粘贴过去，也可以私信我要源代码)

(function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {      document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 24;//划分的等份，可以根据自己的需求进行更改docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resizewindow.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function(e) {if (e.persisted) {setRemUnit();}});// detect 0.5px supportsif (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);

▲上方手动设置分成24等份，设计稿是1920px，每一份就是80px

下载插件（px to rem & rpx & vw (cssrem)）

下载好，根据需要进行基准设置，这样可以更好的帮助我们进行设计

4.基础设置：

body设置背景图，缩放为100%，行高1.15
css初始化
基础设置css代码

// css初始化
*{margin: 0;padding: 0;box-sizing: border-box;
}
// 基础设置
body{//body 设置背景图，缩放为 100% ，行高1.15background: url(../images//bg.jpg) no-repeat top center;line-height: 1.15;
}

body背景图(可以右键下载，也可私我要全部素材和源码)

基础设置完成(效果图)

5.可视化项目头部制作：

UI图

header布局：

高度为100px
header背景图，在容器内显示
缩放比例为100%
h1标题部分白色 38像素居中显示行高为80像素
时间模块 showTiime 定位右侧 right为30px 行高为75px 文字颜色为rgba(255,255,255,0.7) 而文字大小为20像素

header布局html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据可视化</title><link rel="stylesheet" href="css/index.css">
</head>
<body><!-- 头部的和最 --><header><h1>数据可视化</h1><div class="showTime">111</div></header><!-- 引入flexible.js --><script src="js/flexible.js"></script><!-- 引入showTime.js时间 --><script src="js/showTime.js"></script>
</body>
</html>

header布局less代码

// css初始化
*{margin: 0;padding: 0;box-sizing: border-box;
}
// 基础设置
body{//body 设置背景图，缩放为 100% ，行高1.15background: url(../images//bg.jpg) no-repeat top center;line-height: 1.15;
}
// header 布局
header{position: relative;// 高度为100pxheight: 1.25rem;// 背景图，在容器内显示 缩放比例为 100%background: url(../images/head_bg.png) no-repeat;background-size: 100% 100%;h1{// h1 标题部分 白色 38像素 居中显示 行高为 80像素font-size: .475rem;color: white;text-align: center;line-height: 1rem;}.showTime{// 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素 position: absolute;right: .375rem;top: 0;line-height: .9375rem;color:rgba(255, 255, 255, 0.7);font-size: .25rem;}
}

header布局js代码

 格式： 当前时间：2020年3月17-0时54分14秒
var t = null;
t = setTimeout(time, 1000);//開始运行
function time() {clearTimeout(t);//清除定时器dt = new Date();var y = dt.getFullYear();var mt = dt.getMonth() + 1;var day = dt.getDate();var h = dt.getHours();//获取时var m = dt.getMinutes();//获取分var s = dt.getSeconds();//获取秒document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";t = setTimeout(time, 1000); //设定定时器，循环运行
}

header布局完成(效果图)

6.mainbox布局分析：

UI图

mainbox 主体模块布局：

需要一个上左右10px的内边框
column列容器，分三列，占比 3 : 5 ：3

mainbox布局html代码和header同级

  <!-- mainbox页面主体部分 --><section class="mainbox"><div class="column">1</div><div class="column">2</div><div class="column">3</div></section>

mainbox布局less代码

// mainbox页面主题盒子
.mainbox{min-width: 1024px;max-width: 1920px;height: 300px;margin: 0 auto;display: flex;background-color: rgb(171, 247, 95);// 需要一个上左右的10px 的内边距padding: .125rem .125rem 0;.column{flex: 3;}.column:nth-child(2){flex: 5;}
}

mainbox布局完成(效果图)

7.公共面板模块 panel：

高度为310px
1像素的1px solid rgba(25, 186, 139, 0.17) 边框
有line.jpg背景图片
padding为上为 0 左右 15px 下为 40px
下外边距是15px
利用panel 盒子 before 和after 制作上面两个角大小为 10px 线条为 2px solid #02a6b5
新加一个盒子before 和after 制作下侧两个角宽度高度为 10px
panel公共面板模块布局html代码

  <!-- mainbox页面主体部分 --><section class="mainbox"><div class="column"><!-- panel公共面板 --><div class="panel"><div class="panel-footer"></div></div></div><div class="column">2</div><div class="column">3</div></section>

panel公共面板模块布局css代码

.panel{position: relative;//高度为310pxheight: 3.875rem;// 1像素的 1px solid rgba(25, 186, 139, 0.17)  边框border:1px solid rgba(25, 186, 139, 0.17);//有line.jpg背景图片background: url(../images/line.png) rgba(255, 255, 255, 0.04);// padding为 上为 0 左右 15px  下为 40pxpadding: 0 .1875rem .5rem;//下外边距是 15pxmargin-bottom: .1875rem;&::before{// 左上角边框// 利用panel  盒子 before 和after 制作上面两个角   大小为 10px  线条为  2px solid #02a6b5 content: '';position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-top:  2px solid #02a6b5 ;border-left:  2px solid #02a6b5 ;}&::after{// 右上角边框content: '';position: absolute;top: 0;right: 0;width: 10px;height: 10px;border-top:  2px solid #02a6b5 ;border-right:  2px solid #02a6b5 ;}.panel-footer{position: absolute;bottom: 0;left: 0;width: 100%;&::before{// 新加一个盒子before 和after   制作下侧两个角  宽度高度为 10px// 左上角边框content: '';position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;border-bottom:  2px solid #02a6b5 ;border-left:  2px solid #02a6b5 ;}&::after{// 右上角边框content: '';position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-bottom:  2px solid #02a6b5 ;border-right:  2px solid #02a6b5 ;}}}

panel公共面板模块布局完成(效果图)

8.panel盒子完成(图表模块布局)：

标题模块h2高度为48px 文字颜色为白色文字大小为20px
图标内容模块chart高度为240px
以上可以作为panel公共样式部分
图表模块布局html代码

 <!-- mainbox页面主体部分 --><section class="mainbox"><div class="column"><!-- panel公共面板 --><div class="panel bar"><!-- 柱形图bar模块 --><h2>柱形图-就业行业</h2><div class="chart">图表</div><div class="panel-footer"></div></div><div class="panel bar"><!-- 折线图line模块 --><h2>折线图-就业行业</h2><div class="chart">图表</div><div class="panel-footer"></div></div><div class="panel bar"><!-- 饼图图pe模块 --><h2>饼图-就业行业</h2><div class="chart">图表</div><div class="panel-footer"></div></div></div><div class="column">2</div><div class="column"><!-- panel公共面板 --><div class="panel bar"><!-- 柱形图bar模块 --><h2>柱形图-就业行业</h2><div class="chart">图表</div><div class="panel-footer"></div></div><div class="panel bar"><!-- 折线图line模块 --><h2>折线图-就业行业</h2><div class="chart">图表</div><div class="panel-footer"></div></div><div class="panel bar"><!-- 饼图图pe模块 --><h2>饼图-就业行业</h2><div class="chart">图表</div><div class="panel-footer"></div></div></div></section>

图表模块布局less代码

// mainbox页面主题盒子
.mainbox{min-width: 1024px;max-width: 1920px;height: 300px;margin: 0 auto;display: flex;// 需要一个上左右的10px 的内边距padding: .125rem .125rem 0;.column{flex: 3;}.column:nth-child(2){flex: 5;}//panel公共面板 .panel{position: relative;//高度为310pxheight: 3.875rem;// 1像素的 1px solid rgba(25, 186, 139, 0.17)  边框border:1px solid rgba(25, 186, 139, 0.17);//有line.jpg背景图片background: url(../images/line.png) rgba(255, 255, 255, 0.04);// padding为 上为 0 左右 15px  下为 40pxpadding: 0 .1875rem .5rem;//下外边距是 15pxmargin-bottom: .1875rem;&::before{// 左上角边框// 利用panel  盒子 before 和after 制作上面两个角   大小为 10px  线条为  2px solid #02a6b5 content: '';position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-top:  2px solid #02a6b5 ;border-left:  2px solid #02a6b5 ;}&::after{// 右上角边框content: '';position: absolute;top: 0;right: 0;width: 10px;height: 10px;border-top:  2px solid #02a6b5 ;border-right:  2px solid #02a6b5 ;}.panel-footer{position: absolute;bottom: 0;left: 0;width: 100%;&::before{// 新加一个盒子before 和after   制作下侧两个角  宽度高度为 10px// 左上角边框content: '';position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;border-bottom:  2px solid #02a6b5 ;border-left:  2px solid #02a6b5 ;}&::after{// 右上角边框content: '';position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-bottom:  2px solid #02a6b5 ;border-right:  2px solid #02a6b5 ;}}// 图表模块(布局)h2{// 标题模块  h2  高度为 48px 文字颜色为白色 文字大小为  20px  height: .6rem;color: white;line-height: .6rem;text-align: center;font-size: .25rem;font-weight: 400;}}.chart{height: 3rem;background-color: pink;}
}

图表模块布局完成(效果图)

9.数字模块no布局制作：

uii图
中间布局

上面是no数字模块
下面是map地图模块
数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
注意中间列 column 有个左右 10px 下 15px 的外边距
.数字模块no布局html代码

   <div class="column"><!-- no模块制作 --><div class="no">这是数字模块</div></div>

.数字模块no布局less代码


// no数字模块
.no{// 数字模块 no  有个背景颜色 rgba(101, 132, 226, 0.1);
background-color:  rgba(101, 132, 226, 0.1); ;
// 有个15像素的内边距
padding: .1875rem;
}

== 注意中间列 column less代码==

.数字模块no布局完成(效果图)

10.数字模块no-hd布局制作：

uii图
no 模块里面上下划分上面是数字（no-hd) 下面是相关文字说明(no-bd)

no-hd布局方案

no-hd 数字模块有一个边框 1px solid rgba(25, 186, 139, 0.17)
no-hd 数字模块里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
no-hd 利用 after 和 before制作2个小角，边框 2px solid #02a6b5 宽度为 30px 高度为 10px
小竖线给第一个小li after 就可以 1px宽背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可

.no-hd布局html代码

    <div class="column"><!-- no模块制作 --><div class="no"><div class="no-hd"><ul><li>23856</li><li>67239</li></ul></div><div class="no-bd">文字</div></div></div>

.no-hd布局less代码


// no数字模块
.no {// 数字模块 no  有个背景颜色  rgba(101, 132, 226, 0.1); background-color: rgba(101, 132, 226, 0.1);;// 有个15像素的内边距padding: .1875rem;.no-hd {// no-hd 数字模块  有一个边框 1px solid rgba(25, 186, 139, 0.17)    border: 1px solid rgba(25, 186, 139, 0.17);position: relative;// 左上角&::before {// no-hd 利用 after 和 before制作2个小角content: '';position: absolute;top: 0;left: 0;// 宽度为 30pxwidth: 30px;// 高度为 10pxheight: 10px;// 边框 2px solid #02a6b5 border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}// 右下角&::after {// no-hd 利用 after 和 before制作2个小角content: '';position: absolute;bottom: 0;right: 0;// 宽度为 30pxwidth: 30px;// 高度为 10pxheight: 10px;// 边框 2px solid #02a6b5 border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}ul {display: flex;}li {flex: 1;// no-hd 数字模块 里面分为两个小li 每个小li高度为80px 文字大小为70px 颜色为 #ffeb7b 字体是图标字体  electronicFonttext-align: center;line-height: 1rem;font-size: .875rem;color: #ffeb7b;font-family: "electronicFont";position: relative;&::after {// 小竖线 给 第一个小li after 就可以 content: '';position: absolute;//  1px宽width: 1px;// top 25%top: 25%;right: 0;// 高度 50%height: 50%;//背景颜色为 rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);}}}
}

.no-hd布局数字声明less代码

/* 声明字体*/
@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF);
}

.数字模块no-hd布局完成(效果图)

11.数字模块no-bd布局制作：

no-bd布局方案

no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
.no-bd布局html代码

    <div class="column"><!-- no模块制作 --><div class="no"><div class="no-hd"><ul><li>23856</li><li>67239</li></ul></div><div class="no-bd"><ul><li>前端需求人数</li><li>市场供应人数</li></ul></div></div></div>

.no-bd布局less代码

// no数字模块
.no {// 数字模块 no  有个背景颜色  rgba(101, 132, 226, 0.1); background-color: rgba(101, 132, 226, 0.1);;// 有个15像素的内边距padding: .1875rem;.no-hd {// no-hd 数字模块  有一个边框 1px solid rgba(25, 186, 139, 0.17)    border: 1px solid rgba(25, 186, 139, 0.17);position: relative;// 左上角&::before {// no-hd 利用 after 和 before制作2个小角content: '';position: absolute;top: 0;left: 0;// 宽度为 30pxwidth: 30px;// 高度为 10pxheight: 10px;// 边框 2px solid #02a6b5 border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}// 右下角&::after {// no-hd 利用 after 和 before制作2个小角content: '';position: absolute;bottom: 0;right: 0;// 宽度为 30pxwidth: 30px;// 高度为 10pxheight: 10px;// 边框 2px solid #02a6b5 border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}ul {display: flex;}li {flex: 1;// no-hd 数字模块 里面分为两个小li 每个小li高度为80px 文字大小为70px 颜色为 #ffeb7b 字体是图标字体  electronicFonttext-align: center;line-height: 1rem;font-size: .875rem;color: #ffeb7b;font-family: "electronicFont";position: relative;&::after {// 小竖线 给 第一个小li after 就可以 content: '';position: absolute;//  1px宽width: 1px;// top 25%top: 25%;right: 0;// 高度 50%height: 50%;//背景颜色为 rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);}}}.no-bd{// no-bd 里面也有两个小li ul{display: flex;li{flex: 1;// 高度为 40px height: .5rem;line-height: .5rem;// 文字大小为 18pxfont-size: .225rem;text-align: center;// 上内边距为  10px上内边距为 10pxpadding-top: .125rem;//文字颜色为 rgba(255, 255, 255, 0.7) color:rgba(255, 255, 255, 0.7);}}}
}

.数字模块no-bd布局完成(效果图)

12.地图模块(map)布局制作：

地图模块布局方案

地图模块(map)高度为 810px 里面包含4个盒子 chart 放图表模块球体盒子(map1) 旋转盒子1(map2) 旋转盒子2(map3)

map1球体模块制作

UI图

map1球体模块布局方案

球体图片模块 map1 大小为 518px 要加背景图片因为要缩放100% 定位到最中央透明度 .3
map1素材图

map+map1布局html代码

      <!-- 地图模块盒子(map)--><div class="map"><!-- 球体盒子(map1)  --><div class="map1"></div></div></div>

map+map1布局less代码

// map地图模块
.map{position: relative;// 地图模块高度为 810pxheight: 10.125rem;// map1球体盒子模块.map1{// 大小为 518px width: 6.475rem;height: 6.475rem;// 要加背景图片background: url(../images/map.png);background-size: 100%;// 透明度 0.3   opacity: 0.3;// 定位到最中央position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
}

map+map1模块布局完成(效果图)

旋转盒子1(map2)*

map2旋转盒子1模块布局方案

旋转1 map 2 大小为 643px 要加背景图片因为要缩放100% 定位到中央透明度 .6 做旋转动画利用z-index压住球体

map2素材图

map2布局html代码

   <div class="map"><!-- 球体盒子(map1)  --><div class="map1"></div><!-- map2旋转盒子1模块 --><div class="map2"></div></div>

map2布局less代码

  // map2旋转盒子1模块.map2{//大小为 643pxwidth: 8.0375rem;height: 8.0375rem;background: url(../images/lbx.png);background-size: 100%;// 定位到中央position:absolute ;top:50%;left: 50%;transform: translate(-50%,-50%);// 透明度  .6  opacity: .6;// 使用旋转动画rotate1animation: rotate1 15s linear infinite;// linear匀速 无限循环 }// map2旋转盒子1做旋转动画@keyframes rotate1 {from{transform:    translate(-50%,-50%)rotate(0deg);}to{transform:    translate(-50%,-50%)rotate(360deg);}}

map2模块布局完成(效果图)

旋转箭头盒子2(map3)

map3旋转箭头盒子2(模块布局方案

旋转2 map3 大小为 566px 要加背景图片因为要缩放100% 定位到中央旋转动画注意是逆时针

map3素材图

map3布局html代码

 <!-- 地图模块盒子(map)--><div class="map"><!-- 球体盒子(map1)  --><div class="map1"></div><!-- map2旋转盒子1模块 --><div class="map2"></div><!-- map3旋转箭头盒子2模块 --><div class="map3"></div></div>

map3布局less代码

  // map3旋转箭头盒子2模块.map3 {//大小为 643pxwidth: 7.075rem;height: 7.075rem;background: url(../images/jt.png);background-size: 100%;// 定位到中央position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);// 透明度  .6  opacity: .6;// 使用旋转动画rotate1animation: rotate2 15s linear infinite;// linear匀速 无限循环 }// map3旋转箭头盒子2做旋转动画@keyframes rotate2 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}}

map2模块布局完成(效果图)

地图模块(chart)

chart地图模块html代码

 <!-- 地图模块盒子(map)--><div class="map"><!-- 球体盒子(map1)  --><div class="map1"></div><!-- map2旋转盒子1模块 --><div class="map2"></div><!-- map3旋转箭头盒子2模块 --><div class="map3"></div><!-- 地图模块 --><div class="chart"></div></div>

chart地图模块less代码

  .chart{position: absolute;top: 0;left: 0;width: 100%;height: 10.125rem;background-color: #ffeb7b;}

chart模块布局完成(效果图)
这里只做了布局，后期会导入地图

页面布局完成

五、Echarts开源可视化图表库

1.常见的数据可视化库：

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库，目前已经被Apache托管
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

2.Echarts 简介

☞官网地址

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

特点：

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图

2.Echarts体验使用：

使用步骤：

步骤1：下载并引入echarts.js文件
图表依赖这个js库
步骤2：准备一个具备大小的DOM容器
生成的图表会放入这个容器内
步骤3：初始化echarts实例对象
实例化echarts对象
步骤4：指定配置项和数据option
根据具体的需要修改配置选项
步骤5：将配置项设置给echarts实例对象
让echarts对象根据修改好的配置生效

步骤1：下载并引入echarts.js文件

获取和引入Echarts：
☞echarts获取网址教程
Apache ECharts 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。Apache ECharts 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。

从官网下载
☞下载网址
从 GitHub 获取
从 npm 获取
```
npm install echarts
```
从 CDN 获取
在线定制
引入echarts

 <!-- 步骤1：引入echarts --><script src="../obj2/js/echarts.min.js"></script>

步骤2：准备一个具备大小的DOM容器

DOM容器html代码

  <div class="box"></div>

DOM容器css代码

    .box{width: 800px;height: 400px;background-color: bisque;}

DOM容器完成(效果图)

步骤3：初始化echarts实例对象

echarts.init(dom容器) 初始化实例对象
初始化echarts实例对象js代码

  <script>// 步骤3：初始化echarts实例对象var mychart=echarts.init(document.querySelector('.box'))// echarts.init(dom容器) 初始化实例对象</script>

步骤4：指定配置项和数据option

配置项和数据的配置可以参考echarts官方文档配置项手册
☞配置项手册
指定配置项和数据js代码

    // 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};

步骤5：将配置项设置给echarts实例对象

     // 使用刚指定的配置项和数据显示图表。把配置想给实例对象mychart.setOption(option);

效果图

2.Echarts基础配置：

配置根据自己的需求设置，更多的可以参考下方网址链接，进入Echarts配置项手册进行阅读了解~
☞配置项手册
主要配置：series xAxis yAxis grid tooltip title legend color

title(标题组件，用于设置图表标题)
toolbox(工具箱盒子组件)
tooltip(提示框组件)
- trigger (触发方式)
legend (图例组件)
grid(网格配置可以控制线形图柱状图图表大小)
- left(图表距离dom盒子左侧的距离)
- right(图表距离右侧盒子左侧的距离)
- bottom
- containLabel(是否显示刻度标签如果是true 就显示)
xAxis( 设置x轴的相关配置)
- type: ‘category’(图表轴的类型)
- category(类目轴)
- value( 数值轴）
- boundaryGap(是否让我们的线条和坐标轴有缝隙 true有，false没有)
yAxis( 设置y轴的相关配置)
series(系列图表配置它决定着显示那种类型的图表)
- name(这条数据的名字)
- type(图表类型)
- stack（数据堆叠,同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。）
- data 轴的数据
- series里面有了 name值则 legend里面的data可以删掉
color（调色盘颜色列表）

总结

素材源码联系我免费获取，后续会放到git仓库里

持续更新中

如果这篇【文章】有帮助到你

ECharts数据可视化项目-大屏数据可视化【持续更新中】相关推荐

拼接大屏数据展示_大屏数据可视化设计注意事项
大屏数据可视化是以大屏为主要展示载体的数据可视化设计.大屏的特点,使得在用户观感上留下独特的印象,同时,大屏所具备储存更大的信息量,对于大屏企业来说重点主要在于将信息全面的显示在屏幕上,关注于画质的清 ...

嵌入式相关开源项目、库、资料------持续更新中
学习初期最难找的就是找学习资料了,本贴精心汇总了一些嵌入式相关资源,包括但不限于编程语言.单片机.开源项目.物联网.操作系统.Linux.计算机等资源,并且在不断地更新中,致力于打造全网最全的嵌入式资 ...

Python网易云音乐爬虫大数据分析可视化系统——大屏数据可视化开发之路
介绍现在比较流行的大数据数据可视化都是大屏,有钱的人会使用阿里云全家桶的DataV或者商业化的大屏解决方案,但是在国内还是小公司比较多,本人50年大数据开发经验,精通数据可视化,曾经处理过百万亿级别 ...

关于大数据相关的问答汇总，每天持续更新中哦~
NO.1 想要学好大数据需掌握哪些技术? 答:1,Java编程技术 Java编程技术是大数据学习的基础,Java是一种强类型语言,拥有极高的跨平台能力,可以编写桌面应用程序.Web应用程序.分布式系统 ...

有价值项目分享，缺项目可直接搜索（持续更新中）
近来统计一下最近发的一些资源,包括CSDN+B站+微信公众号三个平台,仅包括Java资源(SSM+SpringBoot+uniapp).部分硬件.安卓资源,一共30+75+8+49+25+88=27 ...

可交互的数据可视化信息展示案例、u3d智慧城市、Ventuz数据可视化、大屏数据交互可视化、数字孪生
提供U3D Ventuz等等可交互的数据可视化信息展示项目工程源码及演示EXE,机不可失,先到先得.拿到手有能力的立马就可以改成自己的项目,大大减少了逻辑交互制作 uI动效制作等时间.可做模板使用, ...

大数据组件的各种协议与作用(持续更新中)
协议作用 spark:// spark的standalone模式 hdfs:// 分布式文件集群 hiveserver2 beeline连接的前提 thrift/thrift2 python连接hb ...

python中接口测试垃圾数据如何清理_Python接口测试题（持续更新中）
1.json和字典的区别? Json是轻量级的数据交互格式,以key-value的键值对形式来保存数据,结构清晰,可以说是目前互联网项目开发中最常用的一种数据交互格式. 字典,同样是以key-valu ...

帆软大屏背景怎么设置_帆软报表（finereport）大屏细节操作(持续更新)
图表间之间的组件间隔:body-->属性-->布局-->组件间隔决策报表背景水印:body-->属性-->水印仪表盘指针/枢纽/背景颜色:样式-->系列柱形图 ...

最新文章

error: device not found - waiting for device -

谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词

POJ 3061 (二分+前缀和or尺取法)

Ajax中最有名axios插件（只应用于Ajax）（post方法，官网写错了，应是字符串格式）...

android 多个复选框,Android UI控件之CheckBox(复选框、多选框)

goland远程调试Docker

使用maven创建web项目

ubuntu 9.04 更新源_ubuntu更换中国源

[雪峰磁针石博客]数据仓库快速入门教程1简介

圆方树（bzoj 2125: 最短路）

Android打开相机进行人脸识别，使用虹软人脸识别引擎

基于极限学习机的自编码器(ELM-AE)

5分钟学会 Vim 分屏操作方方面面

android147 360 程序锁

php mud游戏源码,mud 文字游戏 - 源码下载|游戏|源代码 - 源码中国

paip.消除 Java 的冗长try/catch/finally

数学画图软件_数学建模竞赛要点分析 amp; 实用工具网站收集

计算机主机开机为什么显示器不开,电脑开机后显示器不亮怎么办？电脑开机后显示器没反应的解决办法...

阿里数据科学家一次讲透数据中台，15页PPT精华，速转走！

Python API+Postman+jmeter

热门文章

【自考】网络经济与企业管理（一）——泛读

mysql 释放空间_Mysql InnoDB删除数据后释放磁盘空间的步骤详解

conductor使用redis

ffmpeg系列之mp4与ts格式转换

mycncart 之网银在线chinapay支付方式

手写单例模式的线程池实践

Power Automate 中的 SharePoint Trigger Conditions 配置

Windows 文件审核指南

js stack栈与heap堆的区别与含义

mysql 单机数据_MySQL数据一致性-单机

ECharts数据可视化项目-大屏数据可视化【持续更新中】

ECharts数据可视化项目-大屏数据可视化【持续更新中】

文章目录

一、 数据可视化ECharts使用

二、技术栈

三、数据可视化

四、可视化适配方案

1.使用技术：

2.项目准备初始化：

3.案例适配方案：

4.基础设置：

5.可视化项目头部制作：

6.mainbox布局分析：

7.公共面板模块 panel：

8.panel盒子完成(图表模块布局)：

9.数字模块no布局制作：

10.数字模块no-hd布局制作：

11.数字模块no-bd布局制作：

12.地图模块(map)布局制作：

map1球体模块制作

旋转盒子1(map2)*

旋转箭头盒子2(map3)

地图模块(chart)

页面布局完成

五、Echarts开源可视化图表库

1.常见的数据可视化库：

2.Echarts 简介

2.Echarts体验使用：

步骤1：下载并引入echarts.js文件

步骤2：准备一个具备大小的DOM容器

步骤3：初始化echarts实例对象

步骤4：指定配置项和数据option

步骤5：将配置项设置给echarts实例对象

2.Echarts基础配置：

总结

持续更新中

ECharts数据可视化项目-大屏数据可视化【持续更新中】相关推荐

最新文章

热门文章

一、数据可视化ECharts使用