一、需求(图中的点去掉了)
外层的壳
createEchart1() { let chartDom = document.getElementById('echart1'); myChart1 = echarts.init(chartDom); let option; //let sum1={name: '总数', number: dataNum}; let color = [ "#fec101", "#b5b8cd ", "#ff6226","#f60000","#2cc78f","#2ca7f9"] option = { tooltip: { trigger: 'item', }, animation: true, graphic: { type: "text", left: "center", top: "center", style: { fill: "#666666", width: 30, height: 30, fontSize: 20 } }, series: [ { color:color, name: '服务数量', center: ['50%', '50%'], type: 'pie', minAngle: 10,//最小角度 startAngle:265, //起始角度 radius: ['45%', '60%'], avoidLabelOverlap: true, label:{ normal:{ fontSize: 18, //padding: [-30, -56, -10, -64], //padding: [-30, -76, -10, -80], //19 padding: [-30, -100, -10, -102], formatter: function (param) { let text = param.data.name; let value = param.data.value; if (text.length <= 6) { return text + ':' + value } else { return text.substring(0, 6) + '... :' + (value > 999 ? (value+"").substring(0, 3) + '...' : value); } }, rich: {} } }, labelLine: { normal: { show: true, length: 20, // 第一段线 长度 length2: 92, // 第二段线 长度 align: 'right', }, emphasis: { show: true } }, //data:serviceNumber, } ] } myChart1.setOption(option); window.addEventListener("resize", () => { myChart1.resize(); }); },
后端拿到数据后
myChart.setOption({ graphic: { style: { text: //dataNum是中间总数值 String(dataNum).replace( /(\d)(?=(?:\d{6})+$)/g, "$1." ) + //圆饼中心显示数据,这里是显示得总数 "\n\n" + "总数", textAlign: "center", } }, series: [{ data: service, //service是后台拿来的列表数据 }] })
标签:10,true,text,30,let,data,echarts From: https://www.cnblogs.com/YiGuZhiPeng/p/16895645.html