let option = { color:[‘#FFD700‘,‘#00CED1‘,‘#32CD32‘,‘#1E90FF‘], //环形颜色 tooltip: { trigger: ‘item‘, formatter: ‘{a} <br/>{b}: {c} ({d}%)‘ }, graphic: [{ type: ‘text‘, top: ‘48%‘, left: ‘center‘, style: { text: ‘2888‘, fontSize: ‘0.6rem cursive‘, textAlign: ‘center‘, fill: ‘#13a7d1‘, } }, { type: ‘text‘, top: ‘42%‘, left: ‘center‘, style: { text: "总计(人)", fill: "#999", fontSize: ‘0.22rem cursive‘, } }], series: [ { name: ‘访问来源‘, type: ‘pie‘, radius: [‘40%‘, ‘60%‘], label: { formatter: ‘ {b|{b}:}{c|{c}}‘, backgroundColor: ‘#eee‘, //borderColor: ‘#aaa‘, borderWidth: 1, borderRadius: 20, // shadowBlur:3, // shadowOffsetX: 2, // shadowOffsetY: 2, // shadowColor: ‘#999‘, padding: [10, 30], rich: { b: { fontSize: ‘0.22rem cursive‘, color: ‘#676767‘, }, c: { fontSize: ‘0.22rem cursive‘, color: ‘#30B6A2‘, } } }, data: [ { value: 335, name: ‘A1‘ }, { value: 310, name: ‘A2‘ }, { value: 234, name: ‘A3‘ }, { value: 135, name: ‘A4‘ }, ] } ] };
第二种
const totalLabel="总计"; const totalValue="123"; let option = { devicePixelRatio: window.devicePixelRatio, legend: { show: false }, series: [ { type: "pie", radius: [10, 10], silent: true, label: { normal: { show: true, position: "center", formatter: () => { return `{a|${totalLabel}}\n{p|}\n{b|${totalValue}}{pre|人}`; }, rich: { a: { fontSize: 24, color: "rgba(0,0,0,0.45)" }, p: { width: "100%", height: "24" }, b: { fontSize: 48, color: "rgba(0,0,0,0.85)" }, pre: { fontSize: 24, color: "rgba(0,0,0,0.45)" } } }, emphasis: { show: false } }, data: [{ value: 0, name: "", selected: true }] }, { type: "pie", radius: ["35%", "60%"], label: { formatter: `{b}\n {c}`, fontSize: 22, color: "rgba(0,0,0,.65)" }, data: [ { value: 335, name: ‘A1‘ }, { value: 310, name: ‘A2‘ }, { value: 234, name: ‘A3‘ }, { value: 135, name: ‘A4‘ }, ] } ], color: ["#1890FF", "#13C2C2", "#2FC25B", "#FACC14", "#F04864"] };
原文地址:https://www.cnblogs.com/kkvt/p/12275068.html
时间: 2024-10-20 11:15:01