Echarts扇形图点击切换角度+右侧阴影区域和角度对齐

妖狐艹你老母 2022-09-02 08:10 201阅读 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][]

主要效果实现是中间阴影区域，随着左侧扇形图当前选中区域的角度变化随之变化。

这里简单说下思路，主要是计算扇形区域两点之间的高度，因为右侧的地区高度是固定的，就是秦皇岛，张家界那一列高度，中间阴影部分的实现，是定位了一个长方形，上下有两个直角三角形，背景是白色，为了画出最终的两个三角形，所以要计算两个三角形的高。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2][]

因为这里牵扯到定位，所以左侧的扇形图和长方形都是固定宽高，扇形图是固定宽高，所以半径也可以直接拿到，这里计算时需要用到两个公式，sinA( ) 和 cosA ( ) ;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 3][]

下面是sinA的计算过程，个人感觉很清晰了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 4][]

cosA( )

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 5][]

完整代码

<template>
    	<div id="app">
    		<div class="flex chartWidthMax">
    			<div class="chartWidthMaxLeft">
    				<div class="chartCanvas">
    					<chartNine ref="childEchart" :data="chartLegendData" :startAngle="startAngleData"
    						:colorData="colorData" @loadedChart="shadowClick" style="width:470px;height:290px;">
    					</chartNine>
    					<div class="circular">
    						<div class="circularTop">{
       { percent_val }}%</div>
    						<div class="circularBot">{
       { name_val }}</div>
    					</div>
    				</div>
    			</div>
    			<div class="sharts-sector" :style="
    		                    'width:' +
    		                      shadowWidth +
    		                      'px; right: 290px;top:30px;background-color: ' +
    		                      backCol +
    		                      ';'
    		                  ">
    				<div class="sharts-sector-wid">
    					<div class="triangle_one" :style="{
    		                        borderWidth: `0px 0px ${this.triangle_heg}px ${this.shadowWidth}px`,
    		                        borderLeftWidth: shadowWidth + 'px'
    		                      }"></div>
    					<div class="triangle_two" :style="{
    		                        borderWidth: `0px ${this.shadowWidth}px ${this.triangle_heg}px 0px`,
    		                        borderRightWidth: shadowWidth + 'px'
    		                      }"></div>
    				</div>
    			</div>
    			<div class="chartWidthMaxRight flex">
    				<div class="charts-height">
    					<div class="flex" v-for="(item, index) in chart_color" :key="index"
    						:style="'height: ' + item.zhanbi * 100 + '%;'">
    						<div class="charts-color" :style="
    		                          'background-color: ' +
    		                            backCol +
    		                            ';opacity: ' +
    		                            (1 - index * 0.2) +
    		                            ';'
    		                        "></div>
    						<div class="chartHeightRight flex">
    							<div class="chartHeightRightOne">{
       { item.name }}</div>
    							<div class="chartHeightRightTwo">
    								{
       { (item.zhanbi * 100).toFixed(2) }}%
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </template>
    
    <script>
    	import chartNine from './components/chart/chart_nine.vue'
    
    	export default {
    		name: 'app',
    		components: {
    			chartNine
    		},
    		data() {
    			return {
    				chartLegendData: [{
    					name: '海贼王',
    					value: 200
    				}, {
    					name: '火影忍者',
    					value: 320
    				}, {
    					name: '死神',
    					value: 100
    				}],
    				resuleData: [{
    						typeName: '海贼王',
    						city: [{
    							name: '香克斯',
    							zhanbi: 0.20
    						}, {
    							name: '白胡子',
    							zhanbi: 0.35
    						}, {
    							name: '凯多',
    							zhanbi: 0.45
    						}]
    					},
    					{
    						typeName: '火影忍者',
    						city: [{
    							name: '鸣人',
    							zhanbi: 0.10
    						}, {
    							name: '佐助',
    							zhanbi: 0.20
    						}, {
    							name: '自来也',
    							zhanbi: 0.35
    						}, {
    							name: '宇智波斑',
    							zhanbi: 0.35
    						}]
    					}, {
    						typeName: '死神',
    						city: [{
    							name: '流刃若火',
    							zhanbi: 0.50
    						}, {
    							name: '崩玉',
    							zhanbi: 0.50
    						}]
    					}
    				],
    				startAngleData: 90, //起始角度
    				percent_val: "",
    				name_val: "",
    				backCol: "",
    				baseWidth: 90,
    				pieR: 115,//半径
    				width_val: 0,
    				left_val: 125,
    				triangle_heg: 0, //两个直角三角形的高
    				chart_color: [], //当前显示的地市数据
    				colorData: ["#9fe27d", "#54cc34", "#ffc684"]
    			}
    		},
    		computed: {
    			shadowWidth() {
    				return (Number(this.baseWidth) + Number(this.width_val)).toFixed(3);
    			}
    		},
    		mounted() {
    			this.chart_color = this.resuleData[0].city;
    		},
    		methods: {
    			shadowClick(dom) {
    				this.$nextTick(() => {
    					// 拿到第一个扇形区域的角度  用当前的值/整个扇形区域的总值
    					let val_num = 0;
    					const numArray = [];
    					this.chartLegendData.forEach((val, index) => {
    						val_num += val.value;
    						numArray.push(val.value);
    					});
    					// 默认展示占比最大的值
    					let max = numArray[0];
    					let maxIndex = 0;
    					if (numArray.length === this.chartLegendData.length) {
    						for (var i = 1; i < numArray.length; i++) {
    							if (numArray[i] > max) {
    								maxIndex = i;
    								max = numArray[i];
    							}
    						}
    					}
    					const valAll = this.chartLegendData;
    					const spliceVal = valAll.splice(
    						valAll.findIndex(item => item.name === valAll[maxIndex].name),
    						1
    					);
    					valAll.unshift(spliceVal[0]);
    					this.chartLegendData = valAll;
    					// 加载后显示默认高亮
    					dom.dispatchAction({
    						type: "highlight",
    						seriesIndex: 0,
    						dataIndex: maxIndex
    					});
    					// 默认计算占比最大的扇形区域
    					const percent = ((this.chartLegendData[0].value * 100) / val_num).toFixed(
    						2
    					);
    					const name_val = this.chartLegendData[0].name;
    					const color_val = this.colorData[0];
    					this.publicFun(percent,name_val);
    					// 点击事件
    					dom.on("click", e => {
    						const code_name = e.name;
    						this.chartLegendData.forEach((val, index) => {
    							if (val.name === code_name) {
    								const colorData = this.colorData;
    								// 点击的数据默认放第一个 更改子组件数据
    								this.chartLegendData.splice(
    									this.chartLegendData.findIndex(item => item.name === val
    										.name),
    									1
    								);
    								this.chartLegendData.unshift(val);
    								const addColor = colorData.splice(
    									colorData.findIndex(item => item === colorData[index]),
    									1
    								);
    								colorData.unshift(addColor);
    								this.colorData = colorData;
    								// 计算后的角度
    								let val_num = 0;
    								this.chartLegendData.forEach((val, index) => {
    									val_num += val.value;
    								});
    								const percent = ((e.value * 100) / val_num).toFixed(2);
    								this.publicFun(percent,val.name);
    								setTimeout(() => {
    									dom.dispatchAction({
    										type: "downplay"
    									});
    									dom.dispatchAction({
    										type: "highlight",
    										seriesIndex: 0,
    										dataIndex: 0
    									});
    								}, 300);
    							}
    						});
    					});
    				});
    			},
    			publicFun(percent,name_val){
    				this.startAngleData = ((percent / 100) * 360) / 2;
    				const xian = Math.sin(this.startAngleData * (Math.PI / 180)) * 115 * 2;
    				this.triangle_heg = (230 - xian) / 2;
    				const h =
    					this.pieR *
    					Math.cos((((percent / 100) * 360) / 2) * (Math.PI / 180));
    				this.width_val = this.pieR - h; //pirR就是半径
    				this.backCol = this.colorData[0];
    				this.percent_val = percent;
    				this.name_val = name_val;
    				for (let k = 0; k < this.resuleData.length; k++) {
    					if (name_val === this.resuleData[k].typeName) {
    						this.chart_color = this.resuleData[k].city;
    					}
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    	.flex {
    		display: flex;
    	}
    
    	.chartWidthMax {
    		width: 800px !important;
    		border: 1px solid #ededed;
    		height: 300px;
    		position: relative;
    	}
    	.chartWidthMaxLeft{
    		width: 470px;height: 290px;position: absolute;left: 10px;z-index: 99;
    	}
    	.chartCanvas{
    		width: 100%;height: 100%;position: relative;
    	}
    	.chartWidthMaxRight{
    		align-items: center;position: absolute;left: 507px;top:30px;z-index: 9;
    	}
    	.charts-wid {
    		width: 834px;
    		height: 530px;
    		align-items: center;
    		margin: 0 auto;
    	}
    
    	.circular {
    		width: 155px;
    		height: 155px;
    		background-color: #ffffff;
    		border-radius: 50%;
    		left: 204px;
    		top: 67px;
    		z-index: 999;
    		position: absolute;
    	}
    
    	.circularTop {
    		font-size: 32px;
    		color: #333333;
    		text-align: center;
    		padding-top: 40px;
    	}
    
    	.circularBot {
    		font-size: 20px;
    		color: #666666;
    		text-align: center;
    	}
    
    	.sharts-sector {
    		height: 230px;
    		opacity: 0.1;
    		position: absolute;
    		z-index: 9;
    	}
    
    	.sharts-sector-wid {
    		width: 100%;
    		height: 100%;
    		position: relative;
    	}
    
    	.triangle_one,
    	.triangle_two {
    		width: 0;
    		height: 0;
    		border-color: transparent #ffffff;
    		border-style: solid;
    		position: absolute;
    		right: 0;
    		top: 0;
    	}
    
    	.triangle_two {
    		border-color: #ffffff transparent;
    		top: auto;
    		bottom: 0;
    	}
    
    	.charts-height {
    		height: 230px;
    		align-items: center;
    	}
    
    	.charts-height>.flex {
    		width: 100%;
    		align-items: center;
    	}
    
    	.charts-color {
    		width: 145px;
    		height: 100%;
    	}
    	.chartHeightRight{
    		margin-left: 10px;
    	}
    	.chartHeightRightOne{
    		width: 60px;
    	}
    	.chartHeightRightTwo{
    		font-weight: bold;
    	}
    </style>

子组件

<template>
      <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
    </template>
    <script>
    import * as echarts from "echarts";
    export default {
      name: "chartNine",
      props: {
        data: {
          type: Array,
          default() {
            return [];
          }
        },
    	colorData: {
    	  type: Array,
    	  default() {
    	    return [];
    	  }
    	},
        startAngle: {
          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.setOption();
            this.$emit("loadedChart", this.charts);
          });
        },
        setOption() {
          const option = this.getOption();
          this.charts.setOption(option, true);
        },
        getOption() {
          const option = {
            tooltip: {
              trigger: "item",
              show: false //是否显示提示框
            },
            color: this.colorData,
            legend: {
              orient: "vertical",
              icon: "circle",
              left: "0",
              top: "middle",
              show: true, 
              formatter: function(name) {
                //该函数用于设置图例显示后的百分比
                var list = option.series[0].data;
                var total = 0;
                var value;
                list.forEach(item => {
                  total += item.value;
                  if (item.name === name) {
                    value = item.value;
                  }
                });
                var p = ((value / total) * 100).toFixed(2);
                return `{a|${name}}   {b|${p}%}`;
              },
              textStyle: {
                rich: {
                  a: {
                    align: "left",
                    width: 60
                  },
                  b: {
                    align: "left",
                    fontWeight: "bold",
                    width: 30
                  }
                }
              }
            },
            series: [
              {
                name: "标题",
                type: "pie",
                radius: ["55%", "80%"], //圆环的大小 
                center: ["60%", "50%"], //圆环的位置
                startAngle: this.startAngle, //起始角度
                data: this.data,
                label: {
                  normal: {
                    show: false
                  }
                }
              }
            ]
          };
          return option;
        }
      },
      mounted() {
        this.initCharts();
      },
      beforeDestroy() {
        this.charts && this.charts.dispose();
        this.charts = null;
      },
      watch: {
        data: {
          handler() {
            this.setOption();
          }
        },
        startAngle: {
          handler() {
            this.setOption();
          }
        },
        colorData: {
          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/77447c24eb0c423ab8d368d7faf78393.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20220829/1c673872734f4617b315fcb253db8fc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2]: /images/20220829/b878f57c98774782801e4f6310bf79ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 3]: /images/20220829/4f79893eb7e544799686c4f1fea2fcb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 4]: /images/20220829/3c1b11277ae548dfa5d40c8f3025a08c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 5]: /images/20220829/8abec023e984447682bdd5035119ab57.png