目录
图例的位置
图例区域样式
图例文字自定义编辑
图例形状
图例的位置
option = {legend: {orient: 'vertical',x:'right',// 图例在左（left）、右（right）、居中（center）、100pxy:'center',// 图例在上（top）、下（bottom）、居中（center、100px）、100pxpadding:[0,50,0,0], // 图例[距上右下左方距离},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]};
图例区域样式
option = {legend: {orient: 'vertical', //horizontalx:'center',// 图例在左（left）、右（right）、居中（center）、100pxy:'top',// 图例在上（top）、下（bottom）、居中（center、100px）、100pxpadding:[20,20,20,20], // 图例[距上右下左方距离backgroundColor: '#f00', borderColor: '#0f0', borderWidth: 4, itemGap: 10,textStyle: {color: '#fff'},selectedMode: false, //legend事件禁用},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]};
图例文字自定义
let data = [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]option = {legend: {top: '5%',left: 'center',formatter: function (name) {var target;for (var i = 0 ; i < data.length; i++) {target = data[i].value;}var arr = ["{b|" + name + "}", "{a|" + target + " " + "个}"];return arr.join("\n");},textStyle: {rich: {b: {fontSize: 14,align: "center",padding: [10, 10, 10, 10],},a: {fontSize: 14,verticalAlign: "top",align: "center",padding: [0, 10, 10, 10],},},},},series: [{type: 'pie',radius: '60%',labelLine: {show: false},data: data}]};
图例形状
let data = [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' },{ value: 735, name: 'apple' },{ value: 580, name: 'bnana' },]option = {legend: {orient: 'vertical',right: 20,y: 'center',// 自定义文字formatter: function(name) {let total = 0let targetfor (let i = 0; i < data.length; i++) {total += data[i].valueif (data[i].name === name) {target = data[i].value}}var arr = ['{a|' + name + '}','{b|' + ((target / total) * 100).toFixed(2) + '%}','{c|' + target + '}']return arr.join(' ')},textStyle: {// 添加padding: [8, 0, 0, 0],rich: {a: {fontSize: 12,width: 110},b: {fontSize: 12,width: 70,color: '#c1c1c1'},c: {fontSize: 12}}},// 自定义图例// 所有的图例变成圆点// icon:'circle', // 每个图例不一样data: [{ icon:'circle', name: 'Search Engine' },{ icon:'rect', name: 'Direct' },{ icon:'roundRect',name: 'Email' },{ icon:'triangle',name: 'Union Ads' },{ icon:'diamond', name: 'Video Ads' },{ icon:'pin', name: 'apple' },{ icon:'arrow', name: 'bnana' },],// 大小itemHeight: 20,itemWidth: 20,},series: [{name: 'Access From',type: 'pie',radius: '40%',center: ['30%', '50%'],data: data}]};
