echart series 那些事儿[第一篇]
function(chartOption){
chartOption = $nps$.deepCopyTo({}, chartOption);
var resultData = this.__portal.componentItemMap.root.chartDataList[0] || {};
// 數據模型
seriesData = [
{
name: 'EDS認證請求',
type: 'pie',
radius: ['80%', '90%'],
avoidLabelOverlap: false,
itemStyle:{
color:'#5099FF'
},
label: {
normal: {
show: false,
position: '',
itemStyle:{
fontSize: '20px'
}
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false,
position: 'right',
}
},
data: [
{value: 712190, name: 'EDS認證請求'},
{value: 0, name: '',itemStyle:{color:'#fff'}},
]
},
{
name: '獲取挑戰字',
type: 'pie',
itemStyle:{
color:'#36C2BA'
},
radius: ['60%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: '',
itemStyle:{
fontSize: '20px'
}
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 700762, name: '直接訪問'},
{value: 11428, name: '',itemStyle:{color:'#fff'}},
]
},
{
name: '獲取訪問令牌',
type: 'pie',
radius: ['42%', '52%'],
avoidLabelOverlap: false,
itemStyle:{
color:'#8AD757'
},
label: {
normal: {
show: false,
position: '',
itemStyle:{
fontSize: '20px'
}
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data: [
{value: 712190, name: '直接訪問'},
{value: 0, name: '',itemStyle:{color:'#fff'}},
]
},
{
name: '賬號ACS認證',
type: 'pie',
itemStyle:{
color:'#D5E666'
},
radius: ['22%', '32%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: '',
itemStyle:{
fontSize: '20px'
}
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data: [
{value: 700762, name: '直接訪問'},
{value: 11428, name: '',itemStyle:{color:'#fff'}},
]
},
{
name: 'Luancher登錄',
type: 'pie',
radius: ['2%', '12%'],
itemStyle:{
color:'#837EE4'
},
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: '',
itemStyle:{
fontSize: '30px'
}
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data: [
{value: 712190, name: '直接訪問'},
{value: 0, name: '',itemStyle:{color:'#fff'}},
]
}
];
// 裝在數據
for (var i = 0; i < seriesData.length; i++) {
var dataItem = seriesData[i];
switch(dataItem.name) {
case 'EDS認證請求':
dataItem.data[0].value = resultData['EDS認證請求總數'];
dataItem.data[0].name = 'EDS認證請求';
dataItem.data[1].value = 0;
break;
case '獲取挑戰字':
dataItem.data[0].value = resultData['獲取挑戰字總數'];
dataItem.data[0].name = '獲取挑戰字';
dataItem.data[1].value = resultData['EDS認證請求總數'] - resultData['獲取挑戰字總數'];
break;
case '獲取訪問令牌':
dataItem.data[0].value = resultData['獲取訪問令牌總數'];
dataItem.data[0].name = '獲取訪問令牌';
dataItem.data[1].value = resultData['EDS認證請求總數'] - resultData['獲取訪問令牌總數'];
break;
case '賬號ACS認證':
dataItem.data[0].value = resultData['賬號ACS認證總數'];
dataItem.data[0].name = '賬號ACS認證';
dataItem.data[1].value = resultData['EDS認證請求總數'] - resultData['賬號ACS認證總數'];
break;
case 'Luancher登錄':
dataItem.data[0].value = resultData['Luancher總數'];
dataItem.data[0].name = 'Luancher登錄';
dataItem.data[1].value = resultData['EDS認證請求總數'] - resultData['Luancher總數'];
break;
}
};
// chartOption.tooltip.formatter = function (option) {
// // body...
// debugger
// }
chartOption.series = seriesData;
// 下面盒子總數
this.__portal.componentItemMap['box_reqCount'].update(
{
results : [
{
"name": "用戶數",
"value": resultData['不重復用戶數']
},
{
"name": "總成功率",
"value": resultData['總成功率'],
"rate": "%"
}
]
}
)
return chartOption;
}
總結
以上是生活随笔為你收集整理的echart series 那些事儿[第一篇]的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Hibernate创建hqll时报错
- 下一篇: MySQL的高可用性