/** * 自定义极坐标和饼图 * @param dataSource 数据源默认极坐标系，格式为[{value:[number,number,number],name:string} * @param unit 单位 */ let { dataSource = [{value:[10,30],name:"法律与监管",ys:2825,bz:100,yc:200,color:'#d74e67'},{value:[5,150,2675],name:"b",color:'#0092ff'},{value:[5,210,2495],name:"c",color:'#eba954'},{value:[6,270,2265],name:"d",color:'#21b6b9'},{value:[7,330,1945],name:"e",color:'#60a900'},{value:[8,30,2825],name:"f",color:'#01949b'}], centerData = { value: [0, 0,10], name:'测试中\n\t文本', ys:2825, bz:100, yc:200, offsetX:-27, offsetY:-18 }, unit = '', }={}; const radiusList = ['0%','30%','45%','65%','95%']; const picColors = [ [{ offset: 0.05, color: 'rgba(44, 80, 135,1)', }, { offset: 0.5, color: 'rgba(44, 80, 135,0.8)', }, { offset: 0.95, color: 'rgba(44, 80, 135,0.7)', }], [ { offset: 0.05, color: 'rgba(44, 80, 135,0.5)', }, { offset: 0.5, color: 'rgba(44, 80, 135,0.4)', }, { offset: 0.95, color: 'rgba(44, 80, 135,0.3)', }], [ { offset: 0.05, color: 'rgba(44, 80, 135,0.3)', }, { offset: 0.5, color: 'rgba(44, 80, 135,0.2)', }, { offset: 0.95, color: 'rgba(44, 80, 135,0.1)', }], [{ offset: 0.05, color: 'rgba(44, 80, 135,0.1)', }, { offset: 0.5, color: 'rgba(44, 80, 135,0.1)', }, { offset: 0.95, color: 'rgba(44, 80, 135,0.05)', }], ]; option = { backgroundColor: '#0A2E5D', tooltip:{ padding: 15, backgroundColor: 'rgba(10,26,52,0.7)', // 提示框浮层的背景颜色。 borderRadius: 15, textStyle: { // 提示框浮层的文本样式。 }, extraCssText: 'box-shadow: 0 2px 25px #5cc0fd inset', formatter: function (params) { let result = []; console.log(params) result.push(`

${params.name}

`); result.push(`

测试：${params.data.ys}${unit}

`); result.push(`

测试1：${params.data.bz}${unit}

`); result.push(`

测试2：${params.data.yc}${unit}

`); return result.join(' '); } }, polar: { radius: '95%' }, angleAxis: { min:0, max:360, show:false, }, radiusAxis: { show:false, }, series: [ { name: centerData.name, coordinateSystem: 'polar', type: 'custom', z: 10, renderItem: function (params, api) { const values = [api.value(0), api.value(1)]; const coord = api.coord(values); return { type: 'text', style: { ...api.style(), x: coord[0] + (centerData&¢erData.offsetX||0), y: coord[1] + (centerData&¢erData.offsetY||0), }, }; }, label:{ show:true, position: 'center', fontSize: 18, color: '#D7F9FE', fontWeight: 'bold', formatter:(params)=>{ return params.name } }, data: [{ ...centerData }] }, ] } for(let i=0;i{ return `{bg|●} ${params.data.name}` }, rich:{ bg:{ color:dataSource[i].color, fontSize:18, } } }, data: [dataSource[i]] }) }

自定义极坐标和饼环