当前位置：首页 > news >正文

Echarts环形图引线设置

news 2024/11/5 10:04:47

直接上图吧
在这里插入图片描述
直接上代码吧

let labelArr = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
let valueArr = [{ value: 335, name: '直接访问' },{ value: 310, name: '邮件营销' },{ value: 234, name: '联盟广告' },{ value: 135, name: '视频广告' },{ value: 154, name: '搜索引擎' }
];
let colorArr = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#6e7074','#c4ccd3'
]; //注册组件;
option = {title: {text: '图例显示值',x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）y: '20px', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）textAlign: 'center' //水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center},graphic: [//为环形图中间添加文字{type: 'text',left: 'center',top: '50%',style: {text: '总量',textAlign: 'center',fill: '#666666',fontSize: '30'}},{type: 'text',left: 'center',top: '55%',style: {text: '340',textAlign: 'center',fill: '#91c7ae',fontSize: '38'}}],tooltip: {backgroundColor: '#FFFFFF',borderWidth: '1',borderColor: '#E5E5E5',padding: 10,extraCssText: 'box-shadow: 0 0 7px 0 rgba(0,0,0,0.10);',textStyle: {color: '#333333',fontSize: '12px'},formatter: function (params) {let name = params.name;return (name +'<br/>' +'<span style="color:#3894FF;font-size: 14px;" >' +params.value +'</span>&emsp;' +'件' +'(' +params.percent +'%)');}},legend: {orient: 'vertical',icon: 'circle',top: '50px',left: '20px',itemWidth: 9,itemHeight: 9,formatter: function (name) {let value = 0;for (let i = 0; i < valueArr.length; i++) {if (valueArr[i].name === name) {value = valueArr[i].value;}}return name + '(' + value + ')';},textStyle: {color: '#666666',fontSize: '14'}},series: [{name: '访问来源',type: 'pie',radius: ['30%', '50%'],avoidLabelOverlap: true,label: {formatter: '{a|{b}}\n {b|{c} 件} \n  {per|{d}%}  ',borderColor: '#8C8D8E',borderWidth: 1,borderRadius: 4,rich: {a: {color: 'red',fontSize: '80%',lineHeight: 22,align: 'center',padding: [2, 4]},b: {fontSize: '100%',align: 'center',fontWeight: 'bold',lineHeight: 22},per: {fontSize: '80%',color: '#666666',align: 'center',padding: [2, 4],borderRadius: 4}}},labelLine: {length: 35,length2: 20,maxSurfaceAngle: 80},center: ['50%', '55%'],data: valueArr,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},{name: '内边框',type: 'pie',clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大center: ['50%', '55%'],radius: ['26%', '27%'],label: {normal: {show: false}},data: [{value: 9,name: '',itemStyle: {normal: {borderWidth: 2,borderColor: '#61bad3'}}}]}],color: colorArr
};