echarts 关系图

发布网友 发布时间：2022-04-23 01:35

我来回答

共3个回答

懂视网 时间：2022-04-22 18:36

本篇文章给大家带来的内容是关于echarts环形图点击旋转并高亮的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度，从而根据startAngle这个属性来设定图形的开始渲染的角度，使点击某个扇形时圆环旋转使之始终对准某个点。

期间考虑到某扇形区域太小点击不到，来设置最小扇形区域。

const myChartContainer = document.getElementById( 'chart' );
const myChart = echarts.init( myChartContainer );
let minAngle = 30;// 最小扇形区域为30
for ( let i = 0; i < obj.data.length; i++ ) { //某项数据为0时，最小扇形区域为0
 if ( obj.data[ i ].value === 0 ) {
 minAngle = 0;
 break;
 }
}
const pieValue = obj.data.map( v => { 
 return v.value;
} )
const sum = pieValue.reduce( ( prev, cur ) => {//数据值的总和
 return prev + cur;
}, 0 );
const sum2 = pieValue.reduce( ( prev, cur ) => {
 if ( cur < sum / 12 && cur > 0 ) {//某个值大于0小于总和的1/12即30时，按30计算和
 return prev + sum / 12;
 }
 return prev + cur;
}, 0 );
let initPieValue = pieValue[ 0 ];// 初始值
if ( initPieValue < sum / 12 && initPieValue > 0 ) {
 initPieValue = sum / 12;
}
const option = {
tooltip: {
 show: false,
 trigger: 'item',
 formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
 show: false,
 orient: 'vertical',
 x: 'left'
},
color: [ '#44bbf8', '#93e588', '#ffd87b', '#f88071' ],
series: [
{
 name: '',
 type: 'pie',
 radius: [ '45%', '79%' ],
 clockWise: false,
 startAngle: 167 - ( initPieValue / sum2 * 360 / 2 ),
 minAngle: minAngle,
 avoidLabelOverlap: false,
itemStyle: {
 emphasis: {
 radius: [ '46%', '100%' ]
 }
},
label: {
 normal: {
 show: false,
 position: 'center'
 },
 emphasis: {
 show: false,
 textStyle: {
 fontSize: '30',
 fontWeight: 'bold'
 }
 }
},
labelLine: {
 normal: {
 show: false
 }
},
 data: obj.data
 }
 ]
};
myChart.setOption( option );
if ( minAngle === 30 ) { //最小扇形区域30时
myChart.dispatchAction( { type: 'highlight', seriesIndex: 0, dataIndex: 0 } );
}
let preDataIndex = 0;
myChart.on( 'click', ( v ) => {
 if ( v.dataIndex === preDataIndex ) {
 myChart.dispatchAction( {
 type: 'highlight',
 seriesIndex: 0,
 dataIndex: v.dataIndex
 } );
 return;
}
const sum1 = pieValue.reduce( ( prev, cur, index ) => {
 if ( index < v.dataIndex ) {
 if ( cur < sum / 12 && cur > 0 ) {
 return prev + sum / 12; // 饼图的扇形最小角度设置为30，占圆的1/12
 }
 return prev + cur;
 }
 return prev;
}, 0 );
let curPieValue = pieValue[ v.dataIndex ];
if ( curPieValue < sum / 12 && curPieValue > 0 ) {
 curPieValue = sum / 12;
}
option.series[ 0 ].startAngle = 167 - ( sum1 / sum2 * 360 + curPieValue / sum2 * 360 / 2 );// 开始渲染图形的角度
myChart.setOption( option );
preDataIndex = v.dataIndex;
window.setTimeout( () => {
 myChart.dispatchAction( {
 type: 'highlight',
 seriesIndex: 0,
 dataIndex: v.dataIndex
 } );
}, 400 );
this.mrkName = v.data.name;
this.mrkValue = v.data.value;
} );

热心网友 时间：2022-04-22 15:44

使用_buildLinkShapes(nodes, links)函数，针对定义的全部线段数据，设置线段的权重（粗细）、样式和高亮样式。
1、zrender定义线段数据：

{source : 1, target : 0, weight : 1,
onclick:function(params){
alert(params.target.style.text);
},
itemStyle:{
normal:{
lineWidth:10,
text:'丽萨-乔布斯',
textColor:'#030303',
textFont:'bold 15px verdana',
textPosition:'inside'
}
}}

onclick是点击事件。onclick:function(params){alert(params.target.shape);
lineWidth是线段宽度。
text是标注的文字。
textPosition 采用的zrender中的文字位置。

定义线段事件和样式全部代码：

function _buildLinkShapes(nodes, links) {
var l = links.length;
for (var i = 0; i < l; i++) {
var link = links[i];
//var source = nodes[link.source];
// var target = nodes[link.target];
var weight = link.weight || 1;
linkWeights.push(weight);
var shape = {
id : zr.newShapeId(self.type),
shape : 'line',
hoverable : false,
style : {
xStart : 0,
yStart : 0,
xEnd : 0,
yEnd : 0
},
clickable : true,
highlightStyle : {}
};
zrUtil.merge(shape.style, linkStyle);
zrUtil.merge(shape.highlightStyle, linkEmphasisStyle);
//优先级 ItemStyle > linkStyle
if (typeof(link.itemStyle) !== 'undefined') {
if(link.itemStyle.normal){
zrUtil.merge(shape.style, link.itemStyle.normal, {
overwrite : true
});
}
if(link.itemStyle.emphasis){
zrUtil.merge(
shape.highlightStyle,
link.itemStyle.emphasis,
{ overwrite : true }
);
}
}
//zhao
if (typeof (link.onclick) !== 'undefined') {
if (link.onclick) {
shape.onclick = link.onclick;
}
}
linkShapes.push(shape);
self.shapeList.push(shape);
zr.addShape(shape);
}
var narr = new NDArray(linkWeights);
var max = narr.max();
if (max !== 0) {
linkWeights = narr.mul(1/max, narr).toArray();
}
}

热心网友 时间：2022-04-22 17:19

{
source : "及时雨\n宋江",
target : "铁扇子\n宋清",
value : "兄弟",
symbol : [ 'arrow', 'arrow' ]
},
在links中添加 symbol属性就可以了