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

<!-- **************************************NO.7 散养户分布*************************************** -->
<template>
	<div class="chart-container">
		<div id="freelyraise" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'freelyraise',
		data() {
			return {
				count: 0
			}
		},
		mounted() {
			this.myEcharts()

		},

		methods: {
			// 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE

			myEcharts() {


				var chartDom = document.getElementById('freelyraise');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
				var option;
				let data = [{
						"name": "双辽市",
						"num": "18.987691"
					},
					{
						"name": "梨树县",
						"num": "20.377176"
					},
					{
						"name": "伊通县",
						"num": "19.127404"
					},
					{
						"name": "铁东区",
						"num": "18.40882"
					},
					{
						"name": "铁西区",
						"num": "17.980597"
					},
				]

				function contains(arr, dst) {
					var i = arr.length;
					while ((i -= 1)) {
						if (arr[i] == dst) {
							return i;
						}
					}
					return false;
				}

			 var attackSourcesColor = [
					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#EB3B5A"
						},
						{
							offset: 1,
							color: "#FE9C5A"
						}
					]),
					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#FA8231"
						},
						{
							offset: 1,
							color: "#FFD14C"
						}
					]),
					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#F7B731"
						},
						{
							offset: 1,
							color: "#FFEE96"
						}
					]),
					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#21fe8f"
						},
						{
							offset: 1,
							color: "#38911f"
						}
					]),
					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#395CFE"
						},
						{
							offset: 1,
							color: "#2EC7CF"
						}
					])
					
				];
				var attackSourcesColor1 = [
					"#EB3B5A",
					"#FA8231",
					"#F7B731",
					"#38911f",
					"#3860FC",
					"#F57474",
					"#56D0E3",
					"#1089E7",
					"#F57474",
					"#1089E7",
					"#F57474",
					"#F57474"
				];
				var attaData = [];
				var attaName = [];
				var topName = []
				data.forEach((it, index) => {
					attaData[index] = parseFloat(it.num).toFixed(0);
					//attaData[index] = parseInt(it.num);
					attaName[index] = it.name;
					topName[index] = `${it.name}`
				});
				var salvProMax = [];
				var max = attaData[0];
				for (let i = 0; i < attaData.length; i++) {
					max = max < attaData[i + 1] ? attaData[i + 1] : max;
				}
				for (let i = 0; i < attaData.length; i++) {
					salvProMax.push(max); //背景按最大值
				}

				function attackSourcesDataFmt(sData) {
					var sss = [];
					sData.forEach(function(item, i) {
						let itemStyle = {
							color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
						};
						sss.push({
							value: item,
							itemStyle: itemStyle
						});
					});
					return sss;
				}

				option = {
					tooltip: {
						show: false,
						backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
						textStyle: {
							fontSize: 12
						}
			  },
					color: ["#F7B731"],
					legend: {
						show: false,
						pageIconSize: [12, 12],
						itemWidth: 20,
						itemHeight: 10,
						textStyle: {
							//图例文字的样式
							fontSize: 12,
							color: "#fff"
						},
						selectedMode: false,
						data: ["个人所得(亿元)"]
					},
					grid: {
						left: '12%',
						width: '70%',
						bottom: '5%',
						top: "8%",
					},
					xAxis: {
						type: "value",

						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
			  	},
						axisLine: {
							show: false
						}
					},
					yAxis: [{ //左侧排行数字
							type: "category",
							inverse: true,
			  		axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisPointer: {
								label: {
									show: true,
									//margin: 30
								}
			 			},
							padding: [5, 0, 0, 0],
							postion: "right",
							data: attaName,
							axisLabel: {
								margin: 30,
								fontSize: 12,
			  			align: "left",
								padding: [2, 0, 0, 0],
								color: "#000",
								rich: {
									nt1: {
										color: "#fff",
										backgroundColor: attackSourcesColor1[0],
										width: 15,
										height: 15,
										fontSize: 12,
										align: "center",
										borderRadius: 100,
										lineHeight: "5",
										padding: [0, 1, 2, 1]
										// padding:[0,0,2,0],
									},
									nt2: {
										color: "#fff",
										backgroundColor: attackSourcesColor1[1],
										width: 15,
										height: 15,
										fontSize: 12,
										align: "center",
										borderRadius: 100,
										padding: [0, 1, 2, 1]
									},
									nt3: {
										color: "#fff",
										backgroundColor: attackSourcesColor1[2],
										width: 15,
										height: 15,
										fontSize: 12,
										align: "center",
										borderRadius: 100,
										padding: [0, 1, 2, 1]
									},
									nt: {
										color: "#fff",
										backgroundColor: attackSourcesColor1[3],
										width: 15,
			  					height: 15,
										fontSize: 12,
										align: "center",
										lineHeight: 3,
										borderRadius: 100,
										padding: [0, 1, 2, 1],
										lineHeight: 5
									}
								},
								
							}
						},
						{ //右侧名字
							type: "category",
							inverse: true,
							axisTick: "none",
							axisLine: "none",
							show: true,
							axisLabel: {
								textStyle: {
									color: "#fff",
									fontSize: "12"
								}
							},
							//data: attackSourcesDataFmt(attaName) 
							data: attackSourcesDataFmt(attaData) //数字
						},
						{ //名称
							type: 'category',
							offset: -10,
							position: "left",
							axisLabel: {
								color: `#fff`,
								fontSize: 10
							},
			  		axisLine: {
								show: false
							},
							inverse: true,
							axisTick: {
								show: false
							},
							axisLabel: {
								interval: 0,
								color: ["#fff"],
								align: "left",
								verticalAlign: "bottom",
								lineHeight: 32,
								fontSize: 12
							},
							data: topName
			 		},
					],
					series: [{ //条形图数值
							zlevel: 1,
							name: "个人所得(亿元)",
							type: "bar",
							barWidth: "8px",
							animationDuration: 1500,
							data: attackSourcesDataFmt(attaData),
							align: "center",
							itemStyle: {
								normal: {
									barBorderRadius: 10
								}
							},
							label: {
								show: false,
			 				fontSize: 12,
			  			color: "#fff",
								textBorderWidth: 2,
								padding: [2, 0, 0, 0]
							}
						},
						{ //最大值背景条形图
							name: "个人所得(亿元)",
							type: "bar",
							barWidth: 8,
							barGap: "-100%",
							margin: "20",
							data: salvProMax,
							textStyle: {
								//图例文字的样式
								fontSize: 12,
								color: "#fff"
							},
							itemStyle: {
								normal: {
									color: "#05325F",
									//width:"100%",
									fontSize: 12,
									barBorderRadius: 30
								},
							}
						}
					]
				};
				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;
	}
</style>