echarts 饼状图展示位置 legend

我不是女神ヾ 2023-10-01 15:41 13阅读 0赞

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqU6K-6OTI5_size_20_color_FFFFFF_t_70_g_se_x_16][]

1、标题设置

title: {
                text: '学生生源地来源分布图',
                subtext: '模拟数据',
                // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'top',
                // itemGap设置主副标题纵向间隔，单位px，默认为10，
                itemGap: 30,
                backgroundColor: '#EEE',
                // 主标题文本样式设置
                textStyle: {
                  fontSize: 26,
                  fontWeight: 'bolder',
                  color: '#000080'
                },
                // 副标题文本样式设置
                subtextStyle: {
                  fontSize: 18,
                  color: '#8B2323'
                }
              },

2、图例设置

legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'vertical',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'left',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'center',
                itemWidth: 24,   // 设置图例图形的宽
                itemHeight: 18,  // 设置图例图形的高
                textStyle: {
                  color: '#666'  // 图例文字颜色
                },
                // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                itemGap: 30,
                backgroundColor: '#eee',  // 设置整个图例区域背景颜色
                data: ['北京','上海','广州','深圳','郑州']
              },

3、值域设置

series: [
                {
                  name: '生源地',
                  type: 'pie',
                  // radius: '50%',  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
                  radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
                  center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
                  data: [
                      {value:335, name:'北京'},
                      {value:310, name:'上海'},
                      {value:234, name:'广州'},
                      {value:135, name:'深圳'},
                      {value:148, name:'郑州'}
                  ],
                  // itemStyle 设置饼状图扇形区域样式
                  itemStyle: {
                    // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                    // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(30, 144, 255，0.5)'
                    }
                  },
                  // 设置值域的那指向线
                  labelLine: {
                    normal: {
                      show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                    }
                  },
                  // 设置值域的标签
                  label: {
                    normal: {
                      position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                      // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                      // {a}指series.name  {b}指series.data的name
                      // {c}指series.data的value  {d}%指这一部分占总数的百分比
                      formatter: '{c}'
                    }
                  }
                }
              ],

4、提示框设置

tooltip: {
                // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
                trigger: 'item',
                showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                hideDelay: 20,   // 隐藏延迟，单位ms
                backgroundColor: 'rgba(255,0,0,0.7)',  // 提示框背景颜色
                textStyle: {
                  fontSize: '16px',
                  color: '#000'  // 设置文本颜色 默认#FFF
                },
                // formatter设置提示框显示内容
                // {a}指series.name  {b}指series.data的name
                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                formatter: '{a} <br/>{b} : {c}个 ({d}%)'
              },

图中设置

/* 饼状图 */
    				var chartDomCake = document.getElementById('main-cake');
    				var myChartCake = echarts.init(chartDomCake);
    				var optionCake;
    				var dataCake=[
    				        { value: 2562, name: '25岁以下',percentage:'15.86%' },
    				        { value: 6000, name: '26-35岁',percentage:'37.15%' },
    				        { value: 2589, name: '36-45岁',percentage:'16.03%' },
    				        { value: 4000, name: '45岁以上',percentage:'24.77%' },
    				        { value: 1000, name: '其他',percentage:'6.19%' }
    				      ]
    				optionCake = {
    				  title: {
    				    text: '',
    				    subtext: '',
    				    left: 'center'
    				  },
    				  tooltip: {
    					  trigger: 'item',
    					  formatter: "{b} : {c} 人  ({d}%)"   //鼠标放上去 展示内容
    				  },
    				  legend: {
    					orient: 'vertical',
    					left: '60%',  //图例距离左的距离
    					top:'18%',
    					// y: 'center',  //图例上下居中
    					itemGap: 20,
    					formatter:function(name){
    						let target,percentage;
    						for(let i=0;i<dataCake.length;i++){
    							if(dataCake[i].name===name){
    								target=dataCake[i].value
    								percentage=dataCake[i].percentage
    							}
    						}
    						let arr=[name+' '," "+target+"人 "," "+percentage]
    						return arr.join(" ")
    	
    					},
    				  },
    				  color: ['#e3935d', '#eecb5f', '#61a5e8',
    						  '#e16757', '#9570e4'],//五个数据，五个颜色
    				  series: [
    				    {
    				      name: '年龄分布',
    				      type: 'pie',
    				      radius: '55%',
    					  center: ['35%', '35%'], //性设置图的上下左右的位置
    				      data:dataCake,
    					  // 设置值域的标签
    						label: {
    						  normal: {
    							position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
    							// formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
    							// {a}指series.name  {b}指series.data的name
    							// {c}指series.data的value  {d}%指这一部分占总数的百分比
    							formatter: '{b}'
    						  }
    						},
    				      emphasis: {
    				        itemStyle: {
    				          shadowBlur: 10,
    				          shadowOffsetX: 0,
    				          shadowColor: 'rgba(0, 0, 0, 0.5)'
    				        }
    				      }
    				    }
    				  ]
    				};
    				
    				optionCake && myChartCake.setOption(optionCake);

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqU6K-6OTI5_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9280627bc046fcadd824e2f5af1469.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bqU6K-6OTI5,size_20,color_FFFFFF,t_70,g_se,x_16