vue项目中Echarts两个图表之间连接两条线

r囧r小猫 2022-09-03 04:25 557阅读 0赞

效果图     完整代码在最下面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

基本效果是，左侧默认显示最大占比的区域，旋转到右侧，同时两条线的起点是左侧扇形区域

上下两点，两条线的终点是右侧扇形的上下两点。

实现思路，两条线是div定位实现的，这里利用了css的属性 transform-origin  设置基准点

两条线都是设置右侧为基准点，同时设置了旋转transform: rotate(0deg);

最终只需要更改偏移角度，就可以实现线条的移动。

**这里需要注意**

因为线条是根据左侧扇形区域的占比大小不同而移动，所以线条的宽度也不一定，除了需要计算

偏移角度，线条的长度也是需要动态计算的。

目前已知条件有：

左侧扇形，半径90

右侧扇形，半径75

左侧扇形图到右侧扇形图圆心的距离，330

两根线条默认长度，330

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 5][]

完整代码

<template>
    	<div id="app">
    		<div class="flex chart_content"
    			style="width: 600px;height: 400px;justify-content: space-between;align-items: center;position: relative;">
    			<chartTen :data="chart_two_data" :colordata="colorData" :startAngleRotate="startAngleRotate"
    				style="width: 200px;height: 200px;z-index: 999;" @loadedChart="clickRotate"></chartTen>
    			<chartTen :data="chart_two_data" :colordata="colorData" style="width: 160px;height: 160px;"></chartTen>
    			<div class="squareOne" :style="'transform: rotate(-' + endRotete + 'deg);width: '+shadowWidth2+'px;background-color: ' + lineColor + ';'"></div>
    			<div class="squareTwo" :style="'transform: rotate(' + endRotete + 'deg);width: '+shadowWidth2+'px;background-color: ' + lineColor + ';'"></div>
    		</div>
    	</div>
    </template>
    
    <script>
    
    	import chartTen from './components/chart/chart_ten.vue'
    
    	export default {
    		name: 'app',
    		components: {
    			chartTen
    		},
    		data() {
    			return {
    				chart_two_data: [{
    						value: 100,
    						name: '火影'
    					},
    					{
    						value: 200,
    						name: '海贼'
    					},
    					{
    						value: 300,
    						name: '死神'
    					},
    					{
    						value: 400,
    						name: '龙珠'
    					},
    					{
    						value: 500,
    						name: '幽游白书'
    					},
    					{
    						value: 600,
    						name: '猫和老鼠'
    					}
    				],
    				colorData: ["#9fe27d", "#54cc34", "#ffc684", "#c2e953", "#fed348", "#ffeaa3"],
    				lineColor: "#9fe27d",//线条默认颜色
    				rightDom:null,//右侧扇形传递的charts
    				startAngleRotate: 90, //起始角度
    				endRotete: 0,//两根线条的偏移
    				baseWidth2: 330, //两个扇形之间的距离左侧扇形距离右侧扇形圆心
    				pieR2: 90, //左边扇形半径
    				width_val2: 0,//w 扇形图中扇形区域两点之间连线距离右侧的宽度
    				pieRightR: 75,//右边扇形半径
    				shadowWidth2: 330 //默认线的长度
    			}
    		},
    		computed: {
    		},
    		mounted() {
    
    		},
    		methods: {
    			clickRotate(dom) {
    				//默认展示最大区域值
    				let val_num = 0;
    				const numArray = [];
    				this.chart_two_data.forEach((val, index) => {
    					val_num += val.value;
    					numArray.push(val.value);
    				});
    				// 默认展示占比最大的值
    				let max = numArray[0];
    				let maxIndex = 0;
    				if (numArray.length === this.chart_two_data.length) {
    					for (var i = 1; i < numArray.length; i++) {
    						if (numArray[i] > max) {
    							maxIndex = i;
    							max = numArray[i];
    						}
    					}
    				}
    				const valAll = this.chart_two_data;
    				const spliceVal = valAll.splice(
    					valAll.findIndex(item => item.name === valAll[maxIndex].name),
    					1
    				);
    				valAll.unshift(spliceVal[0]);
    				this.chart_two_data = valAll;
    				// 加载后默认不显示高亮
    				setTimeout(() => {
    					dom.dispatchAction({
    						type: "downplay"
    					});
    				}, 300);
    				// 默认计算占比最大的扇形区域
    				const percent = ((this.chart_two_data[0].value * 100) / val_num).toFixed(
    					2
    				);
    				const color_val = this.colorData[0];
    				this.startAngleRotate = ((percent / 100) * 360) / 2;
    				this.publicRotate(percent);
    				// 点击左侧扇形图
    				dom.on("click", e => {
    					this.chart_two_data.forEach((val, index) => {
    						if (val.name === e.name) {
    							const colorData = this.colorData;
    							const valAll = this.chart_two_data;
    							// 点击的数据默认放第一个 更改子组件数据
    							valAll.splice(
    								valAll.findIndex(item => item.name === val
    									.name),
    								1
    							);
    							valAll.unshift(val);
    							this.chart_two_data = valAll;
    							colorData.splice(
    								colorData.findIndex(item => item === e.color),
    								1
    							);
    							colorData.unshift(e.color);
    							this.colorData = colorData;
    							this.lineColor=colorData[0];
    							// 计算后的角度
    							let val_num = 0;
    							this.chart_two_data.forEach((val, index) => {
    								val_num += val.value;
    							});
    							const percent = ((e.value * 100) / val_num).toFixed(2);
    							//percent是当前区域在扇形图中的占比 /100*360是计算了弧度  除以2一半的弧度
    							this.startAngleRotate = ((percent / 100) * 360) / 2;
    							this.publicRotate(percent);
    						}
    					});
    				});
    			},
    			publicRotate(percent) {
    				// 计算左半边扇形弦
    				const xian = Math.sin(this.startAngleRotate * Math.PI / 180) * this.pieR2; //pieR2是左边扇形的半径
    				//中间位置距离差形成的长方形高的一半  pieRightR是右边扇形的半径  
    				const centerHeight = this.pieRightR - xian;
    				// 扇形弦距
    				const w =
    					this.pieR2 *
    					Math.cos((((percent / 100) * 360) / 2) * (Math.PI / 180));
    				// 圆心距
    				this.width_val2 = this.pieR2 - w; //pirR2就是半径
    				// baseWidth2是左侧扇形边距离右侧扇形圆心的距离
    				const lineReg = Math.atan(centerHeight / (this.width_val2 + this.baseWidth2)) * 180 / Math.PI;
    				// lineReg计算的是线条的偏移角度  也就是直角三角形的角度值
    				this.endRotete = lineReg;
    				const linb = this.width_val2 + this.baseWidth2;
    				// 已知直角边和高,求直角三角形的斜边 斜边=根号下的a平方+b平方  两个线条的长度就是直角三角形的斜边
    				const hypotenuse = Math.sqrt(Math.pow(centerHeight, 2) + Math.pow(linb, 2));
    				this.shadowWidth2 = hypotenuse;
    			}
    		}
    	}
    </script>
    
    <style>
    	#app {
    		display: flex;
    		flex-wrap: wrap;
    	}
    
    	.flex {
    		display: flex;
    	}
    
    	.chart_content {
    		border: 1px solid #ededed;
    		width: calc((100% - 30px)/3);
    		height: 400px;
    		margin: 0 10px 10px 0;
    	}
    
    	.squareOne,
    	.squareTwo {
    		width: 420px;
    		height: 1px;
    		position: absolute;
    		z-index: 3;
    	}
    
    	.squareOne {
    		right: 80px;
    		top: 126px;
    		transform-origin: right bottom;
    		/* css设置基准点 */
    	}
    
    	.squareTwo {
    		right: 80px;
    		top: 270px;
    		transform-origin: right bottom;
    	}
    </style>

组件代码

<template>
    	<div class="chart" v-resize="resizeCharts" ref="barChart"></div>
    </template>
    <script>
    	import * as echarts from "echarts";
    	export default {
    		name: "barChart",
    		props: {
    			data: {
    				type: Array,
    				default () {
    					return [];
    				},
    			},
    			colordata: {
    				type: Array,
    				default () {
    					return [];
    				},
    			},
    			startAngleRotate: {
    				type: Number,
    				default () {
    					return 90;
    				}
    			}
    		},
    		data() {
    			return {
    				charts: null,
    			};
    		},
    		computed: {},
    		methods: {
    			resizeCharts() {
    				this.charts.resize();
    			},
    			initCharts() {
    				this.$nextTick(() => {
    					this.charts = echarts.init(this.$refs.barChart);
    					this.charts.clear();
    					this.$emit("loadedChart", this.charts);
    					this.setOption();
    				});
    			},
    			setOption() {
    				const option = this.getOption();
    				this.charts.setOption(option, true);
    			},
    			getOption() {
    				const option = {
    					tooltip: {
    						trigger: 'item',
    						show: false //是否显示提示框
    					},
    					color: this.colordata,
    					legend: {
    						orient: 'vertical',
    						left: '10',
    						top: '150',
    						show: false //隐藏左侧文字
    					},
    					series: [{
    						name: '标题',
    						type: 'pie',
    						radius: '90%', //圆环的大小
    						center: ['50%', '50%'], //圆环的位置
    						startAngle: this.startAngleRotate, //起始角度
    						data: this.data,
    						label: { //去除饼图的指示折线label
    							show: false
    						},
    					}]
    				};
    				return option;
    			},
    		},
    		mounted() {
    			this.initCharts();
    		},
    		beforeDestroy() {
    			this.charts && this.charts.dispose();
    			this.charts = null;
    		},
    		watch: {
    			data: {
    				handler() {
    					this.setOption();
    				},
    			},
    			colordata: {
    				handler() {
    					this.setOption();
    				},
    			},
    			startAngleRotate: {
    				handler() {
    					this.setOption();
    				},
    			},
    		},
    		components: {},
    	};
    </script>
    
    <style scoped>
    	.chart {
    		width: 100%;
    		height: 100%;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220829/7fff18457f0647f09db280157f00a496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20220829/d462a0ebc2a14e9f98ea585a8d786a8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2]: /images/20220829/45ebc1b20d0e4a819d5e33b3ed42b59c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 3]: /images/20220829/b9680b1e880748b0a7ac3c8871216bc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 4]: /images/20220829/ff117eec59514da793f5a368796fab9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 5]: /images/20220829/b26c2de8294e4d2ba7039a49df3d0bb4.png