echarts 旭日图sunburst

一时失言乱红尘 2021-07-24 19:51 769阅读 0赞

1、配置数据
     	第一层为最内层的环,第二层为第一层对应的children所构成的环
    	[
    		{
    		 	value:n,   
    		 		数值,根据同层所有数值的占比,构成百分比圆环,不写为内部第一层children的数值和
    		 		若设置的值大于内部第一层的数值,即表示有未显示的内容,具体表示图会压缩同层其他环占比
    		 	name:'显示内容',
    		 	children:[
    			 {
    			 	value:n,
    				name:'显示内容'
    			 }
    			]
    		},
    		{
    			value:n,
    			name:''
    		}
    	]
    
    2、配置series
     series:[
    	{
    	    type:'sunburst',
    	    center:['50%','50%'],
    	    radius = [0, '75%'],  内半径,外半径
            sort:function(nodeA, nodeB) {  对数值进行排序后再展示
              return -nodeA.getValue() + nodeB.getValue()
            },
            highlightPolicy:'ancestor',  高亮是圆环显示形式
            	'descendant'，则会高亮该扇形块和后代元素，其他元素将被淡化
            	'ancestor'，则会高亮该扇形块和祖先元素；
                'self' 则只高亮自身；
                'none' 则不会淡化其他元素。
                
           levels:[  设置各个层级圆环样式
    		{
    			第一层表示,点击后中间空白圆圈的样式,即返回圆圈
    			itemStyle:{}
    		},
    		{
    			第二层设置最内层圆环的样式
    			label:{},
    			itemStyle:{},
    			emphasis:{}, 高亮样式
    			highlight:{}, 鼠标悬停后相关扇形块的配置项
    			downplay:{ 从本层开始,未悬停区域的颜色
    				label:{},
    				itemStyle:{}
    			}
    		}
    	   ]
    
    	}
     ]

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]  
点击后:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]  
代码示例:

<template>
      <div id="app">
        
        <div class='map'>
    
        </div>
        <div class='map2'>
    
        </div>
    
        <div>
          <button @click="add">修改</button>
          <button @click="highLight">高亮</button>
        </div>
    
        
      </div>
    </template>
    
    <script>
    import echarts from 'echarts';
    import axios from 'axios';
    
    export default { 
      name: 'App',
      data()
      { 
        return{ 
          myMap:'',
          pieData:[{ name:'淘宝',value:'11231'},{ name:'京东',value:'22673'},{ name:'唯品会',value:'6123'},{ name:'1号店',value:'8989'},{ name:'聚美优品',value:'6700'}]
        }
      },
      methods:{ 
        add()
        { 
          this.pieData.push({ name:'苏宁',value:'9999'})
          var option={ 
            series:[
              { 
                data:this.pieData
              }
            ]
          }
          this.myMap.setOption(option);
    
        },
        highLight()
        { 
          this.myMap.dispatchAction({ 
            type: 'highlight',
            // seriesIndex:0,
            dataIndex: 2,
          })
        }
      },
      mounted:async function(){ 
    
    
        var myMap=echarts.init(document.querySelector('.map'));
        this.myMap=myMap;
        
        var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
        var yData1=[88,92,63,77,94,80,72,86];
        var yData2=[80,90,60,70,90,70,62,76];
        // var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
        
        var radaData=[{ name: '华为手机1',value: [80, 90, 80, 82, 90]},{ name: '中兴手机1',value: [70, 82, 75, 70, 78]}]
        var dataMax = [
          { 
            name: '易用性',
            max: 100
          },
          { 
            name: '功能',
            max: 100
          },
          { 
            name: '拍照',
            max: 100
          },
          { 
            name: '跑分',
            max: 100
          },
          { 
            name: '续航',
            max: 100
          }
        ]
    
    
    
        var option = { 
          legen:{ 
            show:true,
    
          },
          series:[{ 
            type:'sunburst',
            sort:function(nodeA, nodeB) { 
              return -nodeA.getValue() + nodeB.getValue()
            },
            highlightPolicy:'ancestor',
            data:
                [{ 
                  name: 'parent1',
                  value: 10,          // 可以不写父元素的 value，则为第一层子元素之和；
                                      // 如果写了，并且大于子元素之和，可以用来表示还有其他子元素未显示
                  children: [
                    { 
                        value: 5,
                        name: 'child1',
                        children: [{ 
                            value: 8,  //根据第一层节点的value数值,来进行占比绘制,若第一层无value,则根据第一层子节点的value进行占比
                            name: 'grandchild1',
                        }]
                    }, 
                    { 
                        value: 3,
                        name: 'child2',
                    }
                  ],
                  itemStyle: { 
                      // parent1 的图形样式，不会被后代继承
                  },
                  label: { 
                      // parent1 的标签样式，不会被后代继承
                  }
              }, { 
                  name: 'parent2',
                  value: 8,
                  children:[{ 
                    value:8,
                    name:'p2child'
                  }]
            }],
          levels:[{   //第一层表示,点击后中间空白圆圈的样式,即返回圆圈
            itemStyle:{ 
              color:'orange'
            },
            emphasis:{ 
              itemStyle:{ 
                // color:'blue'
              }
            }
          },
          { 
            itemStyle:{ 
              color:'purple'
            },
            downplay:{   //从本层开始,未悬停区域的颜色
              itemStyle:{ 
                color:'green'
              }
            }
          },
          { 
            downplay:{ 
              itemStyle:{ 
                color:'black'
              }
            }
          }
          
          ]
        }]
    
    
        };
    
        myMap.setOption(option);
    
      }
    }
    </script>
    
    <style>
    .map{ 
      height:400px;
      width: 100%;
      /* width:700px; */
    }
    
    .map2{ 
      height:400px;
      width: 100%;
      /* width:700px; */
    }
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/72be68bbda704c33b40edaf54ce3d8a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/2d9f6efb4ddd4efdb2b3e17f18953ecd.png