summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-19 16:27:40 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-19 16:29:06 +0800
commit61e90aaf3bc9f239d34a8db25879c637011ca6cb (patch)
tree6755ce560df6a31973d0e2da5a3b0c67ae937a65
parent19a945de783b6158ec48f5c5ff5bbb9858db2890 (diff)
feat:Implement chart text display
Change-Id: I32ddc3cf17ce2afcf797deb63cf7a9b1440e75fe Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts228
1 files changed, 119 insertions, 109 deletions
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index a46c977c..9ac099af 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -121,124 +121,134 @@ export class HomeComponent implements OnInit {
VMAlarmChartInit: Object = {
height: 180,
option: {
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#FB93C2'
- }, {
- offset: 1, color: '#FB7788'
- }],
- globalCoord: false
- }, {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#A6BFE4'
- }, {
- offset: 1, color: '#7A8BAE'
- }],
- globalCoord: false
- }],
- series: [{
- name: "",
- radius: ['50%', '70%'],
- center: ['50%', '45%'],
- label: {
- normal: {
- show: false,
- },
- emphasis: {
- show: true,
- formatter: '{b}\n{c},{d}%',
- color: "#3C4F8C"
- }
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}\n{c},{d}%'
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#FB93C2' // 0% 处的颜色
+ }, {
+ offset: 1, color: '#FB7788' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }, {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#A6BFE4' // 0% 处的颜色
+ }, {
+ offset: 1, color: '#7A8BAE' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }],
+ series: [{
+ name: "告警信息",
+ radius: ['50%', '70%'],
+ center: ['50%', '45%'],
+ label: {
+ normal: {
+ show: false,
+ },
+ emphasis: {
+ show: true,
+ formatter: '{b}\n{c},{d}%',
+ color: "#3C4F8C"
+ }
+ },
+
+ }]
}
- }]
- }
- };
+ };
// alarm bar
alarmChartData: Object;
alarmChartInit: Object = {
height: 180,
option: {
- legend: {
- orient: 'vertical',
- left: '0px',
- bottom: '0px',
- itemWidth: 10,
- itemHeight: 10,
- textStyle: {
- color: "#3C4F8C"
- },
- data: ['Active', 'Fixed']
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#FB93C2'
- }, {
- offset: 1, color: '#FB7788'
- }],
- globalCoord: false
- }, {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#A6BFE4'
- }, {
- offset: 1, color: '#7A8BAE'
- }],
- globalCoord: false
- }],
- series: [{
- name: " ",
- radius: '55%',
- center: ['50%', '45%'],
- label: {
- normal: {
- show: false,
- },
- emphasis: {
- show: true,
- formatter: '{b}\n{c},{d}%',
- color: "#3C4F8C"
- }
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}\n{c},{d}%'
+ },
+ legend: {
+ orient: 'vertical',
+ left: '0px',
+ bottom: '0px',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ color: "#3C4F8C"
+ },
+ data: ['Active', 'Fixed']
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#FB93C2' // 0% 处的颜色
+ }, {
+ offset: 1, color: '#FB7788' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }, {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#A6BFE4' // 0% 处的颜色
+ }, {
+ offset: 1, color: '#7A8BAE' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }],
+ series: [{
+ name: "告警信息",
+ radius: '55%',
+ center: ['50%', '45%'],
+ label: {
+ normal: {
+ show: false,
+ },
+ emphasis: {
+ show: true,
+ formatter: '{b}\n{c},{d}%',
+ color: "#3C4F8C"
+ }
+ }
+ }]
}
- }]
+ };
+
+ getHomeAlarmData() {
+ this.myhttp.getHomeAlarmData()
+ .subscribe((data) => {
+ this.alarmChartData = {
+ series: [{
+ data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}]
+ }]
+ };
+ this.VMAlarmChartData = {
+ series: [{
+ data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}]
+ }]
+ };
+ })
}
- };
- getHomeAlarmData() {
- this.myhttp.getHomeAlarmData()
- .subscribe((data) => {
- this.alarmChartData = {
- series: [{
- data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
- }]
- };
- this.VMAlarmChartData = {
- series: [{
- data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
- }]
- };
- })
- }
// alarm line
alarmLineChartData: Object;