Echarts+大屏

浅浅的花香味﹌ 2024-05-06 23:02 71阅读 0赞

先放上我做的大屏吧，做的不是很好看，希望大家能见谅。

![603149a66e194307b2ab38eb21312e01.png][]

#### 一、实验目的 ####

1.  理解大数据可视化的原理和方法
2.  掌握ECharts可视化的原理、步骤和效果
3.  掌握使用D3读取数据的方法

#### 二、实验任务与要求 ####

1.   通过网店运营的销售数据，分别从各月的销售情况、各产品销售情况、各地区销售情况、各省份销售情况及各产品经理的销售情况进行可视化。
    
    1、根据给定初步方案制定详细方案
    
     根据案例需求，按照大数据可视化流程的实施步骤进行实验方案的制订。主要包括但不限于：数据如何读取？如何处理？如何进行页面的整体设计？需要用那些图表？如何实现交互？如何发现问题与解决问题等。
    
    2、数据读取和处理
    
    选择合适的方式读取和处理网店运营数据。
    
    3、页面设计和图表选择
    
     利用格式塔理论、色彩搭配理论以及数据可视化设计原则与技巧，进行页面的整体设计。将页面划分成多个模块，利用可视化方法，选择合适的图表分别进行可视化展现，最后进行交互设计和实现。
    
    4、发现问题与解决问题
    
     进行大数据可视化的实施过程中，每个模块的可视化结果是否正确，如何验证与发现问题，并提出解决思路和方法。

#### 三、实验原理（技术） ####

**1.关于Echarts**

官网地址：[https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]

![130638d2bccc4fcf956c6c7bf63e62ed.png][]

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

(1)、具有丰富的可视化类型

ECharts 提供了常规的[折线图][Link 1]、[柱状图][Link 2]、[散点图][Link 3]、[饼图][Link 4]、[K线图][K]，用于统计的[盒形图][Link 5]，用于地理数据可视化的[地图][Link 6]、[热力图][Link 7]、[线图][Link 8]，用于关系数据可视化的[关系图][Link 9]、[treemap][]、[旭日图][Link 10]，多维数据可视化的[平行坐标][Link 11]，还有用于 BI 的[漏斗图][Link 12]，[仪表盘][Link 13]，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了[自定义系列][Link 14]，只需要传入一个*renderItem*函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

(2)、多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。

为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。

**具体请查看官网文档：**

![b4402745f4564505bcfd65f10d4587bf.png][]

**2、ECharts的引入和使用**

使用ECharts绘制图形，主要分为以下几个步骤完成：

（1）引入ECharts；

（2）为ECharts准备一个具备大小的Dom；

（3）初始化实例；

（4）设定图表的配置项；

（5）使用指定的配置项和数据显示图表。

**2、D3读取数据**

（1）关于D3

官网地址：[https://d3js.org/][https_d3js.org]

![eb5ce9f7c19749ab8e40ce8ad11f54d0.png][]

**D3.js** 是一个 JavaScript 库，用于基于数据操作文档。**D3** 可帮助您使用 HTML、SVG 和 CSS 使数据栩栩如生。D3 对 Web 标准的强调为您提供了现代浏览器的全部功能，而无需将自己绑定到专有框架，将强大的可视化组件和数据驱动的 DOM 操作方法相结合。

**D3** 允许您将任意数据绑定到文档对象模型 （DOM），然后将数据驱动的转换应用于文档。例如，可以使用 D3 从数字数组生成 HTML 表。或者，使用相同的数据创建具有平滑过渡和交互的交互式 SVG 条形图。

**D3** 不是一个寻求提供所有可能功能的整体框架。相反，D3 解决了问题的症结：基于数据高效操作文档。这避免了专有表示，并提供了非凡的灵活性，公开了 HTML、SVG 和 CSS 等 Web 标准的全部功能。D3 开销最小，速度极快，支持大型数据集以及交互和动画的动态行为。D3 的函数式风格允许通过各种[官方][Link 15]和社区[开发的][Link 16]模块重用代码。

（2）引入D3

在index.html页面的< head >和</head>标签之间引入d3.min.js。

（2）读取数据

先打开数据查看，在加载完数据后，对数据进行可视化展现。通过D3在index.html页面的< script >和</script >标签之间读取csv数据，并做相应的整理。

d3.csv("data/sales_region.csv",function(error,data){
    
    console.log(data)
    
        //后面实验步骤的代码放在这里
    
        });
    
    d3.json("data/ sales_product.json",function(error,data){
    
    console.log(data)
    
        //后面实验步骤的代码放在这里
    
        });

#### 四、编码实现 ####

**index.html**

<!DOCTYPE html>
    
    <html lang="zh-CN">
    	<head>
    		<meta charset="utf-8" />
    	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    		<title>可视化大屏</title>
    		<link rel="stylesheet" href="css/bootstrap.min.css" />
    		<link rel="stylesheet" href="css/app.css" />
    		<script src="js/echarts.min.js"></script>
    		<script src="js/d3.min.js"></script>
    		<script src="js/china.js"></script>
    	</head>
    	
    	<body class="bg06">
    		<header class="header">
    		<div id='currentTime'></div>
    			<h3>可视化大屏</h3>
    		</header>
    		
    		<div class="wrapper" style="color: aqua;">
    			<div class="container-fluid">
    				<div class="row fill-h">
    					<div class="col-lg-3 fill-h">
    						<div class="xpanel-wrapper xpanel-wrapper-1-2">
    							<div class="xpanel">
    								<div class="title">地区</div>
    								<div class="left_right_div" id="sales_region"></div>
    							</div>
    						</div>
    						<div class="xpanel-wrapper xpanel-wrapper-1-2">
    							<div class="xpanel">
    								<div class="title">年利润</div>
    								<div class="left_right_div" id="sales_month" style="background-color: aliceblue;"></div>
    							</div>
    						</div>
    					</div>
    					<div class="col-lg-6 fill-h">
    						<div class="xpanel-wrapper xpanel-wrapper-1">
    							<div class="xpanel no-padding no-bg">
    								<div class="center_title">地图</div>
    								<div class="center_div" style="background-color: lightskyblue;">
    									<div id="map" style="height: 550px; width: 720px;"></div>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="col-lg-3 fill-h">
    						<div class="xpanel-wrapper xpanel-wrapper-2-3">
    							<div class="xpanel">
    								<div class="title">销售经理</div>
    								<div class="left_right_div" id="data_manager"></div>
    							</div>
    						</div>
    						<div class="xpanel-wrapper xpanel-wrapper-1-3">
    							<div class="xpanel">
    								<div class="title">办公用品</div>
    								<div class="left_right_div" id="data_product"></div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    	<script src="js/sales_manager.js"></script>
    	<script src="js/sales_region.js"></script>
    	<script src="js/myMap.js"></script>
    	<script src="js/sales_product.js"></script>
    	<script src="js/sales_month.js"></script>
    </html>

**全局样式app.css**

@charset "utf-8";
    
    /********** Global **********/
    /*
     *常用背景色： #0f1c30 #0b0f34 (6,64,102) (29,45,57) (7,33,58) (8,13,28) (15,43,36)
     */
    html, body {
    	width:100%;
    	height:100%;
    	min-height:635px;
    	font-family:"microsoft yahei", arial, sans-serif;
    	background-color:#152a59;
    	background-repeat:no-repeat;
    	background-position:center;
    	background-size:100% 100%;
    	overflow-x:hidden;
    	overflow-y:auto;
    }
    body.bg06 {background-image:url("../img/bg06.png");}
    .header {
    	margin:0 auto;
    	width:100%;
    	height:55px;
    	max-width:1920px;
    	background:url("../img/header-left.png") left center no-repeat, url("../img/header-right.png") right center no-repeat;
    	background-size:43% 100%, 43% 100%;
    	overflow:hidden;
    }
    .header h3 {
    	margin:0;
    	padding:0;
    	line-height:60px;
    	text-align:center;
    	font-size:24px;
    	color:#5dc2fe;
    }
    #currentTime {
    	position:absolute;
    	height:100%;
    	width:35%;
    	line-height:25px;
    	top:2%;
    	left:75%;
    	/*text-align: center;*/
    	font-size:10px;
    	color:#1890FF;
    	}
    @media (max-width: 1199px) {
    	.header {
    		background:url("../img/header-left.png") left bottom no-repeat, url("../img/header-right.png") right bottom no-repeat;
    		background-size:100%, 100%;
    	}
    	.header h3 {line-height:48px;}
    }
    .wrapper {position:absolute;top:70px;bottom:0;left:0;right:0;min-height:555px;}
    .container-fluid {height:100%;min-height:100%;}
    .row {margin-left:-7px;margin-right:-8px;}
    .row>div {padding-left:7px;padding-right:8px;}
    .xpanel-wrapper {padding-bottom:15px;box-sizing:border-box;}
    .xpanel-wrapper-1 {height:100%;}
    .xpanel-wrapper-1-2 {height:50%;}
    .xpanel-wrapper-1-3 {height:50%;}
    .xpanel-wrapper-2-3 {height:50%;}
    .xpanel {
    	position: relative;
    	padding:15px;
    	height:100%;
    	min-height:170px;
    	background:url("../img/panel.png") center no-repeat;
    	background-size:100% 100%;
    	box-sizing:border-box;
    }
    .title {
    	position: absolute;
    	padding-left:24px;
    	height:36px;
    	width: 90%;
    	line-height:36px;
    	font-size:15px;
    	font-weight:normal;
    	color:#00C6FB;
    	background-image:url("../img/title-bg.png");
    	background-repeat:no-repeat;
    	background-size:100% 100%;
    	margin: 0;
    }
    .center_title {
    	position: absolute;
    	padding-left:24px;
    	height:36px;
    	width: 90%;
    	line-height:36px;
    	font-size:15px;
    	font-weight:normal;
    	color:#00C6FB;
    	background-image:url("../img/title-bg.png");
    	background-repeat:no-repeat;
    	background-size:100% 100%;
    	margin: 0;
    	top:2%;
    }
    .title1 {
    	position: absolute;
    	padding-left:15px;
    	height:30px;
    	width: 90%;
    	line-height:15px;
    	font-size:15px;
    	font-weight:normal;
    	color:#FFFFFF;
    	background:none;
    	background-repeat:no-repeat;
    	background-size:100% 100%;
    	margin: 0;
    }
    /* tool */
    .fill-h {height:100%;min-height:100%;}
    .no-margin {margin:0 !important;}
    .no-padding {padding:0 !important;}
    .no-bg {background:none !important;}
    .no-border {border:0 !important;}
    .left_right_div {
    	position: absolute;
    	height:79%;
    	width: 93%;
    	top:20%;
    	padding: 0px 0px 0px 0px;
    	background:none;
    	margin: 0;
    }
    .center_div {
    	position: absolute;
    	height:88%;
    	width: 100%;
    	top:8%;
    	padding: 0;
    	background:none;
    	margin: 0;
    }
    .center_div1 {
    	position: absolute;
    	height:100%;
    	width: 100%;
    	top:5%;
    	padding: 0;
    	background:none;
    	margin: 0;
    }
    /* scrollbar */
    ::-webkit-scrollbar {width:0;height:0;}
    ::-webkit-scrollbar-track {background-color:transparent;}
    ::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);}

**大屏的地图展示**

d3.csv("data/sales_province.csv", function(error, data) {
    	console.log(data)
    	var sales_data=[];
    	var profit_data=[];
    	var names=[];
    	for (i=0;i<data.length;i++){
    		temp={};
    		temp1={};
    		temp['value']=data[i].sales;
    		temp['name']=data[i].province;
    		temp1['value']=data[i].profit;
    		temp1['name']=data[i].province;
    		sales_data.push(temp);
    		profit_data.push(temp1);
    		names.push(data[i].province);
    	}
    	console.log([sales_data,profit_data])
    	var myChart = echarts.init(document.getElementById('map'));
    	var option = {
    		title: {
    			text: '全国销售额',
    			left: 'center',
    			textStyle:{
    				color:'#0099FF',
    				fontSize:20,
    			}
    		},
    		tooltip: {
    			trigger: 'item'
    		},
    		visualMap: {
    			type: 'piecewise',
    			pieces: [{
    					min: 120000,
    					max: 99999999,
    					label: '销售额大于等于120000元',
    					color: '#372a28'
    				},
    				{
    					min: 90000,
    					max: 120000,
    					label: '销售额90000到120000元',
    					color: '#4e160f'
    				},
    				{
    					min: 60000,
    					max: 90000,
    					label: '销售额60000-90000元',
    					color: '#974236'
    				},
    				{
    					min: 30000,
    					max: 60000,
    					label: '销售额30000-60000元',
    					color: '#ee7263'
    				},
    				{
    					min: 1,
    					max: 30000,
    					label: '销售额1-30000元',
    					color: '#f5bba7'
    				},
    			],
    		},
    		
    		series: [{
    			name: '销售额',
    			type: 'map',
    			map: 'china',
    			roam: false,
    			label: {
    				show: true
    			},
    			data: sales_data
    		},]
    	};
    	//使用指定的配置项和数据显示图表
    	myChart.setOption(option);
    })

**兰丁格尔图进行数据展示**

d3.csv("data/sales_region.csv",function(error,data){
    //	console.log(data)
    	var sales_data=[];
    	var profit_data=[];
    	var names=[];
    	for (i=0;i<data.length;i++){
    		temp={};
    		temp1={};
    		temp['value']=data[i].sales;
    		temp['name']=data[i].region;
    		temp1['value']=data[i].profit;
    		temp1['name']=data[i].region;
    		sales_data.push(temp);
    		profit_data.push(temp1);
    		names.push(data[i].region);
    	}
    	console.log([names,sales_data,profit_data])
    	var myChart = echarts.init(document.getElementById('sales_region'));
    
    option = {
    	color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
        title: {
            text: '           销售情况                                          利润情况',
            left: 'left',
     		textStyle:{
     			color:'#0099FF',
     			fontSize:10,
     		}
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: names,
            textStyle:{
            	color:["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
            },
            padding:0,
            itemGap:3,
            itemWidth:30,    
        },
        series: [
            {
                name: '销售额',
                type: 'pie',
                radius: [5, 85],
                center: ['20%', '50%'],
                roseType: 'area',
                label: {
                    show: false
                },
                labelLine: {
    	            normal: {
    	                show: false,
    	            },
    	            emphasis: {
    	                show: false
    	            }
    	        },
                emphasis: {
                    label: {
                        show: false
                    }
                },
                data: sales_data,
            },
            {
                name: '利润',
                type: 'pie',
                radius: [5, 85],
                center: ['68%', '50%'],
                roseType: 'area',
                label:{
                	show:false,
                },
                labelLine: {
    		            normal: {
    		                show: false,
    		            },
    		            emphasis: {
    		                show: false
    		            }
    		        },
                data: profit_data,
            }
        ]
    };
    	myChart.setOption(option);
    })

#### ⛵小结 ####

**以上就是对从Echarts+大屏的概述，希望大家看的开心！！！！！！！**

![20201213121345281.gif_pic_center][]

> 如果这篇文章有帮助到你，希望可以给作者点个赞?，创作不易，如果有对后端技术、前端领域感兴趣的，也欢迎关注 ，我将会给你带来巨大的收获与惊喜???！

[603149a66e194307b2ab38eb21312e01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/2364b9efa1ae45b4b159f384d7164513.png
[https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[130638d2bccc4fcf956c6c7bf63e62ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f583ffab74214529ad09f90d9528242b.png
[ZRender]: https://github.com/ecomfe/zrender
[Link 1]: https://echarts.apache.org/zh/option.html#series-line
[Link 2]: https://echarts.apache.org/zh/option.html#series-bar
[Link 3]: https://echarts.apache.org/zh/option.html#series-scatter
[Link 4]: https://echarts.apache.org/zh/option.html#series-pie
[K]: https://echarts.apache.org/zh/option.html#series-candlestick
[Link 5]: https://echarts.apache.org/zh/option.html#series-boxplot
[Link 6]: https://echarts.apache.org/zh/option.html#series-map
[Link 7]: https://echarts.apache.org/zh/option.html#series-heatmap
[Link 8]: https://echarts.apache.org/zh/option.html#series-lines
[Link 9]: https://echarts.apache.org/zh/option.html#series-graph
[treemap]: https://echarts.apache.org/zh/option.html#series-treemap
[Link 10]: https://echarts.apache.org/zh/option.html#series-sunburst
[Link 11]: https://echarts.apache.org/zh/option.html#series-parallel
[Link 12]: https://echarts.apache.org/zh/option.html#series-funnel
[Link 13]: https://echarts.apache.org/zh/option.html#series-gauge
[Link 14]: https://echarts.apache.org/zh/option.html#series-custom
[b4402745f4564505bcfd65f10d4587bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/30a52402db05483f84fa99be0782a317.png
[https_d3js.org]: https://d3js.org/
[eb5ce9f7c19749ab8e40ce8ad11f54d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/76db6cd0238947bda6af24010d0338dd.png
[Link 15]: https://github.com/d3/d3/blob/main/API.md
[Link 16]: https://www.npmjs.com/browse/keyword/d3-module
[20201213121345281.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/97e4408a60e543ddbb212da608ef5830.gif