// 饼图容器样式定义
<style>
#echartsPieRing{
height: 500px;
width: 800px;
}
</style>
<template>
<div id='echartsPieRing'></div>
</template>
<script>
// window.onresize = function(){
// };
var echarts = require('echarts');
var myChart;
var legendData = ['张','王','李','张一','张二','王一','王二','王三','李一','李二','李三','李四'];
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:legendData
},
series: [
{
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
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>