Project_yhfu/src/views/bigdata/chart-equipmentDistribution.vue

<!-- **************************************NO.16 摄像头*************************************** -->
<template>
	<div class="chart-container">
		<!-- <div id="camera1" style="width: 100%; height:25vh; ">
		</div> -->
		<div id="camera2" style="width: 100%; height:85vh; ">
		</div>
		<!-- <div id="camera3" style="width: 100%; height:30vh; ">
		</div> -->
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'camera',
		data() {
			return {
				count: 0
			}
		},
		mounted() {
			// this.myEcharts1();
			this.myEcharts2();
			// this.myEcharts3();

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
			myEcharts1() {
				var chartDom = document.getElementById('camera1');
				var myChart = echarts.init(chartDom);
				var option;
				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
				option = {
					dataset: {
						dimensions: ['name', '摄像头'],
						source: [{
								name: '双辽市',
								'摄像头': 50
							},
							{
								name: '梨树县',
								'摄像头': 40
							},
							{
								name: '伊通县',
								'摄像头': 30
							},
							{
								name: '铁东区',
								'摄像头': 20
							},
							{
								name: '铁西区',
								'摄像头': 30
							}
						]
					},
					tooltip: {
						trigger: 'item',
						position: function(point, params, dom, rect, size) {
							const x = point[0];
							const y = point[1];
				 		const viewWidth = size.viewSize[0];
							const viewHeight = size.viewSize[1];
							const boxWidth = size.contentSize[0];
				 		const boxHeight = size.contentSize[1];
							let posX = 0;
							let posY = 0;
				 		if (x < boxWidth) {
								// 左边放不开
								posX = 5;
							} else {
								// 左边放的下
								posX = x - boxWidth;
							}
							if (y < boxHeight) {
								// 上边放不开
								posY = 5;
							} else {
								// 上边放得下
								posY = y - boxHeight;
							}
							return [posX, posY];
						},
					},
					angleAxis: {
						max(value) {
							return value.max * 1.1;
						},
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
				  axisLine: {
							show: false
						},
						splitLine: {
							show: false
						},
						startAngle: 270
					},
					radiusAxis: {
						type: 'category',
						minorTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
					},
					polar: {
				 	radius: ['40%', '90%'],
				 },
					// angleAxis:{
					//     clockwise:false
					// },
					series: [{
						type: 'bar',
						coordinateSystem: 'polar',
						itemStyle: {
				  	color(params) {
								const idx = params.dataIndex;
								return dfColor[idx];
							},
						},
						barWidth: 5,
						roundCap: true,
						showBackground: true,
						backgroundStyle: {
							color: 'RGBA(0, 69, 117, 0.5)',
						},
					}],
				};
				option && myChart.setOption(option);
			},

			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
			myEcharts2() {
				var chartDom = document.getElementById('camera2');
				var myChart = echarts.init(chartDom);
				var option;
				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
				option = {
					dataset: {
						source: [
							["类型1", 1200],
							["类型2", 1000],
							["类型3", 746],
							["类型4", 636],
							["类型5", 581],
							["类型6", 426],
							["类型7", 326]
						],
					},
					tooltip: {
						trigger: 'item',

					},
					grid: {
						top: "0%",
						left: "6%",
						// right: "4%",
						bottom: "5%",
						width: '75%',
						containLabel: true,
					},
					xAxis: {
						show: false,
						type: "value",
					},
					yAxis: {
						type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
						inverse: true,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#5deaff',
								fontSize: '12'
							}
						},
				  splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
					},

					series: [{

						type: "bar",
						animationCurve: "easeOutBack",
						barWidth: 8,
						label: {
							show: true,
							position: "right",
							offset: [0, 0],
							color: "#88dfd5",
							// fontSize: "12",
							style: {
				   	fill: "#fff"
							},
						},
						backgroundBar: {
							show: true,
							style: {
								fill: "rgba(97,152,255,0.30)",
							},
						},
						barStyle: {
							stroke: "rgba(41,244,236,1)",
						},
						gradient: {
							color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
						},
						itemStyle: {
							label: {
								show: true
							},
							labelLine: {
								show: false,
							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
				 				offset: 0,
									color: "rgba(41,244,236,0)"
								},
								{
									offset: 1,
									color: "rgba(41,244,236,1)"
								},
							]),
							borderColor: "#a2f9f7",
							shadowBlur: 16,
							shadowColor: "#a2f9f7",
						},
					}, ],
				};
				option && myChart.setOption(option);
			},
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
			myEcharts3() {
				var chartDom = document.getElementById('camera3');
				var myChart = echarts.init(chartDom);
				var option;
				option = {
					color: ['#3D91F7', '#61BE67'],
					tooltip: {},
					legend: {
						show: true,
						icon: "circle",
						bottom: 30,
						center: 0,
						itemWidth: 14,
						itemHeight: 14,
						itemGap: 21,
						orient: "horizontal",
						data: ['a', 'b'],
						textStyle: {
							color: '#8C8C8C'
						},
					},

					radar: {
						// shape: 'circle',
						radius: '80%',
						triggerEvent: true,
						name: {
							textStyle: {
								color: '#fff',
								fontSize: '10',
								borderRadius: 3,
								padding: [3, 5]
							}
						},
						nameGap: '2',
						indicator: [{ //[4300, 10000, 28000, 35000, 50000, 19000, 21000]
								name: '型号1',
								max: 6500
							},
							{
								name: '型号2',
								max: 16000
							},
							{
								name: '型号3',
								max: 30000
							},
							{
								name: '型号4',
								max: 38000
							},
							{
								name: '型号5',
								max: 52000
							},
							{
								name: '型号6',
								max: 25000
							},
							{
								name: '型号7',
								max: 25000
							}
						],
						splitArea: {
							areaStyle: {
								color: [
									'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
									'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
									'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
								].reverse()
							}
						},
						// axisLabel:{//展示刻度
						//     show: true
						// },
						axisLine: { //指向外圈文本的分隔线样式
							lineStyle: {
								color: 'rgba(0,0,0,0)'
							}
						},
						splitLine: {
							lineStyle: {
								width: 2,
								color: [
									'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
									'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
									'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
								].reverse()
							}
						},

					},

					series: [{
						name: '型号统计',
						type: 'radar',
						//areaStyle: {normal: {}},
						areaStyle: {
							normal: {
								color: 'rgba(252,211,3, 0.3)'
							}
						},
						symbolSize: 0,
						lineStyle: {
							normal: {
								color: 'rgba(252,211,3, 1)',
								width: 1
				  	}
						},
						data: [{
							value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
							name: '型号统计',



						}]
					}]
				};
				option && myChart.setOption(option);
			},


		},


	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.chart-container {
		width: 100%;
		height: auto;
		position: relative;
		padding-bottom: 10px;
		display: flex;
		flex-direction: column;
	}
</style>