大数据可视化前端模板001

1、vue2+echarts静态图表

2、可根据所需要的柱状折线饼图单独抽出使用，每个图表数据耦合 

3、支持标准大屏1920px*1080px，

依赖命令如下：

npm i

运行命令如下：

npm run serve

打包命令如下：

npm run build

可能产生的问题是常见的node版本和sass-loader、scss，可以根据自身电脑的node版本使用sass-loader和scss。 

<section class="container">
	<section class="cont-left">
		<!--左1 GO-->
		<div class="area3 arrow-n-line">
			<div class="arrow-up"></div>
			<div class="arrow-down"></div>
			<div class="item first">
				<div class="tit">
					人大代表情况
				</div>
				<div class="char" id="char1"></div>
			</div>

			<div class="item last">
				<div class="tit">
					政协委员情况
				</div>
				<div class="char" id="pieChart"></div>
			</div>
	</section>
</section>

.container {
			padding: 0 30px;

			.cont-left {
				width: calc(100% - 1010px);
				height: calc(100% - 130px);
				overflow: hidden;
				float: left;

				.area1 {
					width: 100%;
					display: flex;
					background: url('../assets/bg-char1.png');
					background-size: 100% 100%;
					position: relative;
					margin-top: 20px;


					.item {
						position: relative;
						padding-left: 30px;

						&.first {
							width: 380px;

							.char {
								width: 100%;
								height: 230px;
							}
						}

						&.last {
							width: calc(100% - 380px);

							.char {
								width: 100%;
								height: 230px;
							}
						}

						.tit {
							position: absolute;
							top: 10px;
							left: 40px;
							color: #1ac9ff;
							font-size: 18px;
							padding-left: 20px;
							background: url('../assets/bg-arrow.png') left center no-repeat;
							display: flex;

							.age {
								color: #ffffff;
								font-size: 14px;
								padding-left: 20px;

								span {
									font-size: 20px;
									color: #1ac9ff;
								}
							}

						}

					}

				}
		        }
		}

/**

			 * 代表情况 饼图GO
			 * */
			handlePart1() {
				var setChart1 = echarts.init(document.getElementById('char1'));
				var legendData1 = [{
						value: 1048,
						name: '国家级'
					},
					{
						value: 735,
						name: '省级'
					},
					{
						value: 580,
						name: '市级'
					},
					{
						value: 484,
						name: '区县级'
					}
				]
				let option5 = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						// data: legendData,
						itemWidth: 15, //色标图宽
						itemHeight: 7, //色标图高
						orient: 'vertical', //垂直显示  
						top: 50,
						right: 0,
						itemGap: 25, //色标间隔
						textStyle: {
							color: '#fff',
							fontSize: 14
						},
						formatter: function(params) {
							var legendIndex = 0;
							legendData1.forEach(function(v, i) {
								if (v.name == params) {
									legendIndex = i;
								}
							});
							return params + " " + legendData1[legendIndex].value + "人";
						}
					},
					series: [{
						type: 'pie',
						radius: '50%',
						center: ["140px", "50%"],
						data: legendData1,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				setChart1.setOption(option5);
				window.addEventListener('resize', () => {
					setChart1.resize();
				});
},

比较长，展示一个示例，可以下载例子包支持下作者，谢谢。