效果:
设置数据:
var option3 = { title: { text: '天气情况统计', subtext: '虚构数据', left: 'center' }, tooltip: {/*鼠标经过视图，显示数据*/ trigger: 'item', formatter: '{b} : {c} ({d}%)' }, legend: { // orient: 'vertical', // top: 'middle', bottom: 10, left: 'center', data: ['西凉', '益州', '兖州', '荆州', '幽州']/*显示条*/ }, series: [{ type: 'pie', radius: '65%', center: ['50%', '50%'], selectedMode: 'single', data: [{ value: 1548, name: '幽州', label: { normal: { formatter: [ '{title|{b}}{abg|}', '{weatherHead|天气}{valueHead|天数}{rateHead|占比}', '{hr|}'// '{Sunny|晴朗}{value|202}{rate|55.3%}',// '{Cloudy|小雨}{value|142}{rate|38.9%}',// '{Showers|小雪}{value|21}{rate|5.8%}' ],/*join('\n')换行*/ backgroundColor: '#eee', borderColor: '#777', borderWidth: 1, borderRadius: 4, rich: {// 设置样式 title: { color: '#e0e', align: 'center' }, abg: { backgroundColor: '#333', width: '100%', align: 'right', height: 25, borderRadius: [4, 4, 0, 0] }, Sunny: { height: 30, align: 'left' }, Cloudy: { height: 30, align: 'left' }, Showers: { height: 30, align: 'left' }, weatherHead: { color: '#333', height: 24, align: 'left' }, hr: { borderColor: '#777', width: '100%', borderWidth: 0.5, height: 0 }, value: { width: 20, padding: [0, 20, 0, 30], align: 'left' }, valueHead: { color: '#333', width: 20, padding: [0, 20, 0, 30], align: 'center' }, rate: { width: 40, align: 'right', padding: [0, 10, 0, 0] }, rateHead: { color: '#333', width: 40, align: 'center', padding: [0, 10, 0, 0] } } } } }, { value: 535, name: '荆州', label: {/*显示数据,比例*/ normal: { show: true, // position: 'inner', formatter: '{b}, {c} \n {d}%' } } }, { value: 510, name: '兖州', label: { normal: { show: true, // position: 'inner', formatter: '{b}, {c} \n {d}%' } } }, { value: 634, name: '益州', label: { normal: { show: true, // position: 'inner', formatter: '{b}, {c} \n {d}%' } } }, { value: 735, name: '西凉', label: { normal: { show: true, // position: 'inner', formatter: '{b}, {c} \n {d}%' } } } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; var data =[ { weather: '大雨', data: 20, rate: '20%' }, { weather: '小朗', data: 30, rate: '30%' }, { weather: '大雪', data: 40, rate: '40%' }, { weather: '小雪', data: 10, rate: '10%' }, { weather: '多云', data: 10, rate: '10%' }, { weather: '阴天', data: 50, rate: '10%' } ] /*动态加入详情数据*/ function getData() { var arr = [] for(let item in data) {/*按模版插入数据*/ arr.push(('{'+('Sunny|'+data[item].weather)+'}')+('{'+'value|'+data[item].data+'}')+('{'+'rate|'+data[item].rate+'}')) } var format=this.option3.series[0].data[0].label.normal.formatter for(let item of arr){ format.push(item)/*push数据到formt*/ } /*换行显示*/ this.option3.series[0].data[0].label.normal.formatter = this.option3.series[0].data[0].label.normal.formatter.join('\n') } this.getData()