Echarts 饼图内饼图和外环图联动效果

心已赠人 2022-02-25 17:20 1270阅读 0赞

// 饼图容器样式定义  
<style>  
\#echartsPieRing\{  
    height: 500px;  
    width: 800px;  
\}  
</style>

label: \{  
                    normal: \{  
                        position: 'inner'  
                    \}  
                \},  
                labelLine: \{  
                    normal: \{  
                        show: false  
                    \}  
                \},  
                data:\[  
                    \{value:535, name:'张',type:1,parentId:0\},  
                    \{value:679, name:'王',type:2,parentId:0\},  
                    \{value:1548, name:'李',type:3,parentId:0\}  
                \]  
            \},  
            \{  
                name:'访问来源',  
                type:'pie',  
                radius: \['40%', '55%'\],  
                label: \{  
                    show:false  
                \},  
                data:\[  
                    \{value:335, name:'张一',parentId:1\},  
                    \{value:200, name:'张二',parentId:1\},  
                    \{value:310, name:'王一',parentId:2\},  
                    \{value:234, name:'王二',parentId:2\},  
                    \{value:135, name:'王三',parentId:2\},  
                    \{value:1048, name:'李一',parentId:3\},  
                    \{value:251, name:'李二',parentId:3\},  
                    \{value:147, name:'李三',parentId:3\},  
                    \{value:102, name:'李四',parentId:3\}  
                \]  
            \}  
        \]  
    \};

export default \{  
        data() \{  
            return \{

\}  
        \},  
        // props()\{  
        //   jsonData  
        // \},  
        //在HTML DOM加载后马上执行，例如赋值  
        // computed()\{

// \},  
        created()\{  
      
        \},  
        mounted() \{  
            // let this\_ = this;  
            myChart = echarts.init(document.getElementById('echartsPieRing'));  
            myChart.setOption(option);  
            //保留原始数据  
            var owner = this;  
            myChart.on('legendselectchanged',function(obj)\{  
                var parendData = option.series\[0\].data;  
                var childData = option.series\[1\].data;  
                var legendsStatus = obj.selected;  
                var clickLegendName = obj.name;  
                var legendSelectStatus = legendsStatus\[clickLegendName\];  
                var targetObject = parendData.find(item=>item.name == clickLegendName);  
               if( targetObject != undefined )\{  
                    //当前点击的图例是里圈的  
                     owner.renderIn(legendSelectStatus,parendData,childData,targetObject);  
                \}else\{  
                    //当前点击的图例是外圈的  
                     targetObject = childData.find(item=>item.name == clickLegendName);  
                     owner.renderOut(parendData,childData,targetObject,legendsStatus);  
                \}  
            \});  
        \},  
        // 需要触发条件，比如按钮点击触发  
        methods: \{  
            /\*\*  
             \* 点击里圈图例的渲染方式:如果里圈的被选中那么儿子肯定别选中，反之也是  
             \* @legendSelectStatus :当前选图例的状态  
             \* @inArrayData         ：内圈的数据  
             \* @outArrayData        ：外圈的数据  
             \* @targetObject        ：当前点击的图例对应的数据对象  
             \*/  
            renderIn:function(legendSelectStatus,inArrayData,outArrayData,targetObject)\{  
                var parentId = targetObject.type;  
                let owner = this;  
                outArrayData.forEach(function(value)\{  
                    if(value.parentId == parentId)\{  
                        owner.renderLegendStatus(legendSelectStatus,value.name);  
                    \}  
                \});  
            \},  
            /\*\*  
             \* 点击外圈的渲染方式  
             \* 1、判断是否有其他子节点  
             \* 2、  
             \* @inArrayData   ： 内圈的数据  
             \* @outArrayData ：外圈的数据  
             \* @targetObject ：当前选中的图例的对象  
             \* @legendsStatus ：所有图例的状态  
             \*/  
            renderOut:function(inArrayData,outArrayData,targetObject,legendsStatus)\{  
                //获取兄弟节点  
                var broterNode = outArrayData.filter( item=>item.parentId == targetObject.parentId );  
                var flages = false;  
                broterNode.forEach(function(value)\{  
                    var n = value.name;  
                    if(legendsStatus\[n\])\{  
                        flages = true;  
                    \}  
                \});  
                let fatherNode = inArrayData.find( item=>item.type == targetObject.parentId );  
                this.renderLegendStatus(flages,fatherNode.name);  
                this.resetInData(inArrayData,outArrayData,targetObject,legendsStatus);  
            \},  
            /\*\*  
             \* 外圈点击之后重新计算内圈的数据\[内圈的数据时利用外圈显示的数据重新计算的\]  
             \* @inArrayData   ： 内圈的数据  
             \* @outArrayData ：外圈的数据  
             \* @targetObject ：当前选中的图例的对象  
             \* @legendsStatus ：所有图例的状态  
             \*/  
            resetInData : function(inArrayData,outArrayData,targetObject,legendsStatus)\{  
                var legendName = targetObject.name;  
                var legendType = targetObject.type;  
                // var newArrayInData = \[\];  
                inArrayData.forEach(function(value)\{  
                    // var newObje = value;  
                    var counts = 0;  
                    outArrayData.forEach(function(values)\{  
                        if(value.type == values.parentId && legendsStatus\[values.name\]==true)\{  
                            counts += values.value;  
                        \}  
                    \});  
                    value.value = counts;  
                    // newObje.value = counts;  
                    // newArrayInData.push(newObje);  
                \});  
                // console.info(newArrayInData);  
                option.series\[0\].data = inArrayData;  
                myChart.setOption(option);  
            \},  
            /\*\*  
             \* 修改图例的状态  
             \* @status : 图例状态  
             \* @legendName : 图例名称  
             \*/  
            renderLegendStatus:function(status,legendName)\{  
                if(status)\{  
                    myChart.dispatchAction(\{  
                        type : 'legendSelect',  
                        name : legendName  
                    \});  
                \}else\{  
                    myChart.dispatchAction(\{  
                        type : 'legendUnSelect',  
                        name : legendName  
                    \});  
                \}  
            \},  
            /\*\*  
             \* @legendShow ：是否显示图例  
             \* @legendrange ：图例排列方向【水平：horizontal 垂直：vertical】  
             \* @legendHorizontalPosition ：图例水平位置  
             \* @legendVerticalPosition  ：图例垂直位置  
             \* @data ：传入的json数据  
             \*/  
           initEchartsRender:function(legendShow,legendrange,legendHorizontalPosition,legendVerticalPosition,data)\{  
               //初始化图例样式  
               if(legendShow)\{  
                   option.legend.orient = legendrange;  
                   option.legend.left = legendHorizontalPosition;  
                   option.legend.top = legendVerticalPosition;  
                    
                   var legendData = data.map(function(item)\{return item.name\});  
                   console.info(legendData);  
                   option.legend.data = legendData;  
               \}else\{  
                   option.legend.show = false;  
               \}  
               option.series = \[  
                   \{  
                       data:data  
                   \}  
               \];  
               option.series = \[\{  
                   radius: \['20%','70%'\]  
               \}\];  
               myChart.setOption(option);  
           \}  
        \},  
        // 监控数据变化，从而引起调用  
        watch: \{  
            // tt:function()\{  
            //     myChart.on('legendselectchanged',function(obj)\{  
            //       console.info(obj);  
            //     \});  
            // \}  
        \}  
    \}  
</script>