apex图表使用饼图居中_echarts饼图标题居中以及调整主副标题的间距、字号
text:主標(biāo)題
subtext:副標(biāo)題
textStyle: {} //主標(biāo)題的屬性設(shè)置
subtextStyle: {} //副標(biāo)題的屬性
itemGap:主副標(biāo)題之間的間距
textAlign:整體(包括 text 和 subtext)的水平對齊
項目個數(shù)是后臺返回的,直接渲染
function initThisMonthProjectsParticipate() {
$.ajax({
url: urlpic + "currentMonthParticipateProject",
type: 'get',
data: {
deptId: '4676',
},
success: function (data) {
console.log(data.participateProjectTotal, 'data');
let total = data.participateProjectTotal;
let dataOption = data.eChartResponseModel;
let styleOption = {
title: {
show: true,
text: '本月參評項目',
subtext: total + '個',
itemGap: 8,
left: '48%',
top: '45%',
textStyle: {
color: '#B4E4FF',
fontSize: 8 * sceenRate,
},
subtextStyle: {
color: '#B4E4FF',
fontSize: 8 * sceenRate,
},
textAlign:'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} (ze8trgl8bvbq%)'//a 系列名稱,b 數(shù)據(jù)項名稱,c 數(shù)值,d 百分比
},
series: [{
name: '本月參評項目',
type: 'pie',
label: {
show: true,
alignTo: 'labelLine',
position: 'outside',
formatter: '{c}個{b}項目',
fontSize: 6 * sceenRate,
alignTo: 'edge'
},
}]
}
let id = 'participateChart'
let chart = initCharts(id, dataOption, styleOption)
chart.on('click', function () {
initSecondLevelPage()
})
},
})
}
與50位技術(shù)專家面對面20年技術(shù)見證,附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的apex图表使用饼图居中_echarts饼图标题居中以及调整主副标题的间距、字号的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: android模糊检索_【android
- 下一篇: python办公实用功能_【一点资讯】实