ORDDB 系统全景视图echarts shadow配置项内容和展示

系统全景视图，包括CPU负载，数据库活动时间，业务进程数，表空间变化量，数据都是通过ORACLE随机函数生成，参考了需要共享的作品

      //图表基本信息定义
var overviewChartID = 'overview-chart';


//图表定位
var chartGridTop = 30;
var chartGridHeight = 100;

//时间轴
//SELECT WMSYS.WM_CONCAT('"'||TO_CHAR(TRUNC(SYSDATE, 'MM') + ROWNUM - 1, 'YYYY-MM-DD')||'"') DBTIME FROM DUAL CONNECT BY ROWNUM <= 30;
var overviewDate = ["00:00", "00:05", "00:10", "00:15", "00:20", "00:25", "00:30", "00:35", "00:40", "00:45", "00:50", "00:55", "01:00", "01:05", "01:10", "01:15", "01:20", "01:25", "01:30", "01:35", "01:40", "01:45", "01:50", "01:55", "02:00", "02:05", "02:10", "02:15", "02:20", "02:25", "02:30", "02:35", "02:40", "02:45", "02:50", "02:55", "03:00", "03:05", "03:10", "03:15", "03:20", "03:25", "03:30", "03:35", "03:40", "03:45", "03:50", "03:55", "04:00", "04:05", "04:10", "04:15", "04:20", "04:25", "04:30", "04:35", "04:40", "04:45", "04:50", "04:55", "05:00", "05:05", "05:10", "05:15", "05:20", "05:25", "05:30", "05:35", "05:40", "05:45", "05:50", "05:55", "06:00", "06:05", "06:10", "06:15", "06:20", "06:25", "06:30", "06:35", "06:40", "06:45", "06:50", "06:55", "07:00", "07:05", "07:10", "07:15", "07:20", "07:25", "07:30", "07:35", "07:40", "07:45", "07:50", "07:55", "08:00", "08:05", "08:10", "08:15", "08:20", "08:25", "08:30", "08:35", "08:40", "08:45", "08:50", "08:55", "09:00", "09:05", "09:10", "09:15", "09:20", "09:25", "09:30", "09:35", "09:40", "09:45", "09:50", "09:55", "10:00", "10:05", "10:10", "10:15", "10:20", "10:25", "10:30", "10:35", "10:40", "10:45", "10:50", "10:55", "11:00", "11:05", "11:10", "11:15", "11:20", "11:25", "11:30", "11:35", "11:40", "11:45", "11:50", "11:55", "12:00", "12:05", "12:10", "12:15", "12:20", "12:25", "12:30", "12:35", "12:40", "12:45", "12:50", "12:55", "13:00", "13:05", "13:10", "13:15", "13:20", "13:25", "13:30", "13:35", "13:40", "13:45", "13:50", "13:55", "14:00", "14:05", "14:10", "14:15", "14:20", "14:25", "14:30", "14:35", "14:40", "14:45", "14:50", "14:55", "15:00", "15:05", "15:10", "15:15", "15:20", "15:25", "15:30", "15:35", "15:40", "15:45", "15:50", "15:55", "16:00", "16:05", "16:10", "16:15", "16:20", "16:25", "16:30", "16:35", "16:40", "16:45", "16:50", "16:55", "17:00", "17:05", "17:10", "17:15", "17:20", "17:25", "17:30", "17:35", "17:40", "17:45", "17:50", "17:55", "18:00", "18:05", "18:10", "18:15", "18:20", "18:25", "18:30", "18:35", "18:40", "18:45", "18:50", "18:55", "19:00", "19:05", "19:10", "19:15", "19:20", "19:25", "19:30", "19:35", "19:40", "19:45", "19:50", "19:55", "20:00", "20:05", "20:10", "20:15", "20:20", "20:25", "20:30", "20:35", "20:40", "20:45", "20:50", "20:55", "21:00", "21:05", "21:10", "21:15", "21:20", "21:25", "21:30", "21:35", "21:40", "21:45", "21:50", "21:55", "22:00", "22:05", "22:10", "22:15", "22:20", "22:25", "22:30", "22:35", "22:40", "22:45", "22:50", "22:55", "23:00", "23:05", "23:10", "23:15", "23:20", "23:25", "23:30", "23:35", "23:40", "23:45", "23:50", "23:55"];

//表格数据
//SELECT WMSYS.WM_CONCAT(TRUNC(DBMS_RANDOM.VALUE(5, 60), 2)) DBTIME FROM DUAL CONNECT BY ROWNUM <= 30;
var orddbhost1 = [59.55, 60.43, 57.46, 48.87, 66.33, 57.38, 42.1, 59.17, 42.36, 47.38, 59.09, 56.93, 40.51, 49.98, 49.49, 42.98, 50.66, 66.24, 62.87, 48.13, 43.53, 47.1, 53.37, 56.59, 59.31, 59.88, 62.58, 60.05, 47.61, 45.74, 53.88, 54.67, 54.39, 45.76, 42.95, 65.34, 54.12, 47.35, 58.83, 48.88, 44.71, 65.08, 51.64, 56.81, 46.16, 58.28, 42.08, 41.98, 62.02, 67.37, 50.72, 59.75, 51.67, 54.2, 46.03, 48.87, 50.32, 50.04, 68.93, 43.94, 63.13, 55.98, 43.84, 56.76, 53.14, 62.04, 52.28, 54.63, 57.34, 68.33, 51.86, 55.37, 61.32, 44.51, 64.95, 49.7, 65.38, 55.45, 58.58, 51.34, 57.26, 43.3, 49.81, 59.29, 59.94, 59.92, 63.54, 64.71, 55.81, 41.88, 69.29, 47.25, 63.34, 62.68, 65.64, 57.86, 57.12, 63.92, 41.45, 63.5, 56.61, 53.95, 57.35, 53.35, 41.88, 45.68, 69.45, 47.06, 69.66, 64.61, 60.21, 67.58, 53.34, 48.74, 63.23, 53.08, 45.9, 67.39, 51.47, 68.96, 63.92, 51.57, 61.89, 50.69, 61.01, 47.51, 43.23, 48.44, 68.44, 66.4, 43.21, 52, 69.41, 45.93, 64.69, 59.14, 48.98, 49.27, 66.35, 59.6, 54.53, 53.75, 62.3, 69.16, 50.63, 62.52, 60.33, 69.25, 60.07, 47.12, 56.82, 51.04, 45.5, 63.34, 44.19, 47.62, 61.46, 60.59, 61.79, 40.32, 42.08, 42.67, 59.06, 69.07, 40.55, 54.9, 56.73, 62.33, 58.02, 59.59, 42.68, 60.44, 51.14, 43.78, 68.12, 44.56, 44.1, 52.22, 49.94, 51.08, 54.63, 60.05, 59.49, 43.94, 59.75, 47.41, 59.63, 60.88, 66.53, 56.49, 59.47, 51.07, 51.94, 55.42, 58.68, 55.09, 68.66, 49.03, 61.49, 68.65, 52.11, 63.02, 59.7, 41.22, 50.9, 54.94, 55.6, 49.6, 45.57, 54.14, 58.71, 46.1, 50.64, 51.29, 44.27, 61.84, 50.08, 48.7, 59.96, 67.08, 41.4, 46.2, 43.41, 69.96, 45.01, 61.37, 45.54, 49.81, 52.81, 59.61, 43.21, 56.22, 45.25, 69.64, 52.31, 65.54, 44.99, 45.09, 53.55, 65.33, 61.55, 48.34, 66.99, 47.17, 67.78, 63.74, 42.92, 62.02, 64.12, 48.64, 52.18, 40.06, 55.23, 64.91, 68.62, 57.13, 54.4, 65.24, 51.03, 63.72, 44.56, 58.82, 65.82, 50.83, 53.79, 41.03, 41.65, 55.64, 56.39, 57.82, 57.17, 41.63, 57.04, 56.95, 44.26, 69.19, 69.95, 46.33, 61.99, 69.14, 40.02, 57.72, 49.88, 68.05, 54.53, 41.83, 43.35, 59.65];
var orddbhost2 = [23.31, 24.15, 26.17, 21.53, 20.46, 26.43, 21.11, 26.87, 28.29, 28.78, 22.97, 26.77, 23.39, 27.92, 24.67, 27.37, 21.45, 21.65, 20.63, 24.56, 27.79, 20.11, 21.74, 23.71, 20.65, 27.16, 25.73, 28.39, 22.96, 25.52, 28.65, 26.34, 28.55, 23.58, 23.99, 20.56, 21.13, 26.35, 29.74, 20.82, 24.97, 21.19, 22.81, 29.62, 29.68, 22.02, 20.07, 20.19, 29.4, 25.76, 28.99, 26.34, 21.75, 21.32, 24.66, 23.96, 21.32, 21.9, 29.93, 23.43, 21.95, 29.76, 23.21, 26.85, 22.36, 26.97, 27.34, 24.52, 24.28, 24.41, 28.2, 26.42, 22.84, 23.45, 24.18, 27.47, 22.14, 21.81, 23.9, 20.05, 22.92, 24.73, 24.74, 24.72, 26.84, 23.31, 20.3, 29.88, 25.49, 23.92, 24, 23.08, 26.11, 22.96, 27.67, 27.33, 28.16, 20.16, 24.15, 23.96, 26.44, 28.27, 26.61, 22.24, 29.21, 23.18, 23.81, 23.9, 23.14, 28.56, 24.01, 24.24, 26.63, 24.67, 28.15, 28.8, 23.07, 23.52, 26.73, 27.85, 20.89, 21.34, 27.61, 20.4, 27.37, 25.88, 23.76, 21, 23.61, 28.34, 21.43, 28.58, 20.09, 20.52, 22.3, 22.14, 27.91, 28.56, 28.62, 29.99, 21.87, 24.32, 24.12, 22.12, 28.6, 22.15, 21.89, 29.19, 26.48, 24.4, 25.19, 29.06, 21.51, 21.76, 24.36, 23.81, 24.15, 20.38, 23.24, 22.83, 21.52, 25.25, 22.48, 23.23, 29.08, 26.32, 26.39, 24.55, 23.23, 26.77, 28.79, 24.95, 27.84, 20.86, 29.98, 29.5, 23.5, 29.5, 29.59, 23.86, 20.28, 28.96, 20.06, 25.12, 20.1, 25.8, 22.4, 24.24, 20.91, 25.54, 24.97, 29.44, 23.81, 21.11, 23.22, 20.96, 20.64, 20.52, 26.68, 21.83, 28.93, 20.68, 24.14, 24.33, 25.26, 25.17, 28.56, 25.01, 21.26, 23.96, 27.68, 24.44, 29.34, 23.31, 27.95, 21.63, 21.06, 24.89, 27.48, 20, 21.86, 21.36, 23.99, 27.05, 27.89, 22.02, 25.91, 28.48, 21.38, 26.66, 21.33, 22.44, 20.19, 23.74, 28.19, 25.55, 24.14, 28.62, 20.14, 21.36, 29.76, 20.08, 28.69, 20.25, 28.86, 22.92, 21.07, 24.88, 26, 20.7, 20.96, 22.51, 21.88, 20.67, 28.89, 26.82, 22.71, 20.06, 22.82, 26.65, 21.84, 29.9, 27.45, 21.45, 27.7, 25.87, 20, 23.48, 21.93, 28.09, 22.99, 20.83, 24.98, 26.17, 20.25, 20.72, 24.29, 25.06, 21.93, 23.89, 22.73, 26.88, 21, 23.26, 27.34, 20.23, 29.27, 22.9];

var orddbtime1 = [36.59, 35.56, 32.84, 26.37, 35.94, 26.25, 24.11, 23.56, 26.25, 39.09, 35.21, 29.45, 27.71, 33.4, 35.77, 27.45, 37.06, 30.96, 39.5, 30.13, 20.83, 33.74, 30.85, 29.61, 28.64, 33.94, 34.51, 32.72, 33.77, 39.45, 20.32, 25.79, 36.25, 33.94, 36.8, 26.87, 38.13, 35.56, 24.66, 37.61, 30.39, 38.05, 28.91, 27.68, 37.62, 30.43, 26.87, 37.07, 22.77, 26.09, 28.83, 30.52, 34.96, 33.08, 22.71, 25.24, 29.51, 27.36, 39.1, 29.72, 25.71, 24.43, 29.35, 22.51, 33.04, 32.01, 36.32, 25.85, 28.96, 20.43, 25.06, 27.46, 29.02, 28.41, 37.81, 38.46, 24.17, 37.73, 26.69, 31.42, 20.04, 23.35, 23.25, 28.73, 32.54, 23.04, 31.03, 25.77, 21.31, 35.9, 36.59, 23.85, 20, 34.01, 20.12, 23.44, 30.07, 25.24, 33.54, 26.59, 30.87, 31.94, 24.54, 31.8, 34.51, 26.65, 28.98, 39.14, 30.82, 29.41, 36.66, 29.56, 30.71, 22.35, 38.45, 38.25, 27.48, 20.38, 28.28, 34.35, 27.92, 32.92, 29.7, 28.97, 34.45, 25.19, 30.9, 39.09, 33.66, 31.36, 25.05, 35.05, 29.68, 31.23, 23.22, 34.55, 30, 32.23, 27.88, 23.36, 32.45, 27.69, 35.33, 32.02, 38.26, 35.05, 22.1, 27.48, 34.4, 28.41, 37.79, 37.99, 38.16, 23.24, 35.56, 25.33, 37.14, 35.44, 30.89, 28.17, 38.01, 34.04, 34.2, 20.5, 20.65, 39.88, 24.12, 20.72, 34.59, 26.34, 21.62, 39.94, 28.08, 23.62, 26.38, 26.18, 27.98, 31.81, 36.46, 28.86, 33.61, 28.7, 37.09, 31.82, 34.6, 20.62, 20.38, 26.82, 26.68, 34.12, 22.73, 28.01, 26.28, 22.08, 23.87, 33.1, 27.58, 39.45, 32.74, 32.85, 21.4, 23.73, 27.43, 22.49, 32.03, 24.18, 24.18, 26.15, 35.06, 32.02, 34.19, 30.75, 24.14, 27.99, 20, 32.62, 34.67, 34.58, 27.33, 27.33, 34.01, 26.85, 28.73, 20.88, 28.42, 25.49, 33.05, 35.67, 23.07, 39.13, 39.04, 29.38, 35.54, 23.89, 31.35, 25.64, 32.88, 21.28, 37.98, 29.67, 32.65, 34.58, 37.58, 30.83, 22.12, 22.74, 20.63, 20.95, 36.67, 31.2, 20.44, 21.6, 26.31, 21.48, 33.73, 29.82, 29.22, 20.48, 38.16, 35.11, 23.31, 23.22, 35.53, 30.6, 35.92, 25.54, 36.4, 37.03, 29.27, 37.98, 22.29, 27.32, 29.16, 24.91, 38.17, 36.13, 29.59, 29.36, 21.83, 25.1, 36.69, 33.49, 37.27, 29.39, 20.61, 32.77, 39.21, 24.76];
var orddbtime2 = [22.18, 24.76, 20.37, 28.09, 22.25, 26.75, 20.14, 24.28, 20.06, 26.99, 23.93, 25.69, 20.36, 21.46, 24.13, 22.92, 28.05, 29.3, 28.86, 27.95, 25.42, 27.78, 27.46, 22.95, 26.99, 27.71, 22.25, 21.96, 28, 27.37, 27.68, 20.15, 27.53, 28.57, 26.61, 26.89, 25.75, 21.28, 27.95, 24.64, 29.45, 23.01, 23.76, 25.16, 26.14, 25.05, 25.47, 26.4, 26.05, 27.5, 22.65, 25.73, 24.17, 27.07, 25.34, 29.17, 22.47, 22.63, 20.06, 20.25, 24.13, 27.82, 24.43, 27.59, 25.57, 20.54, 22.59, 26.11, 22.75, 22.09, 27.56, 27.5, 22.32, 22.63, 23.11, 21.57, 22.84, 22.93, 29.36, 23.04, 25.22, 24.9, 27.69, 22.17, 24.44, 23.03, 29.33, 20.01, 21.21, 26.67, 27.14, 29.88, 29.11, 22.39, 22.24, 25.02, 23.56, 26.35, 21.27, 28.89, 27.14, 23.04, 23.91, 28.38, 20.13, 25.77, 27.3, 27.02, 20, 24.7, 22.22, 27.7, 27.53, 27.76, 22.43, 28.58, 20.85, 23.76, 27.61, 26.78, 27.22, 29.73, 25.99, 21.86, 24.48, 29.81, 22.53, 25.89, 28.98, 24.39, 20.47, 29.99, 25.97, 23.27, 21.43, 25.35, 20.68, 25, 29.19, 24.45, 27.73, 21.55, 27.71, 28.75, 24.44, 29.57, 28.46, 29.97, 26.15, 29.86, 21.8, 20.79, 26.09, 27.27, 20.76, 21.63, 22.85, 26.44, 24.27, 29.12, 20.16, 27.77, 27.01, 25.98, 27.98, 23.65, 23.06, 28.22, 22.76, 21.63, 23.03, 28.59, 25.32, 25.33, 25.53, 21.66, 29.31, 24.46, 21.84, 20.64, 29.67, 24.33, 26.68, 25.08, 21.66, 21.23, 21.62, 28.83, 29.72, 25.71, 24.48, 20.84, 22.78, 26.21, 20.44, 25.72, 25.21, 20.77, 26.97, 27.2, 21.21, 21.5, 28.57, 21.48, 25.19, 27.34, 22.45, 25.41, 21.73, 22.61, 22.27, 22.53, 20.78, 20.96, 24.2, 21.83, 29.01, 28.63, 24.82, 27.7, 29.37, 27.54, 29.06, 25.55, 27.84, 23.47, 24.32, 20.54, 26.1, 22.5, 28.87, 20.52, 25.96, 20.41, 22.12, 24.87, 21.68, 29.13, 20.49, 23.4, 23.84, 23.89, 21.37, 20.5, 26.67, 28.69, 22.68, 21.8, 24.84, 25.26, 23.43, 24.58, 28.32, 26.04, 22.76, 29.05, 24.97, 22.89, 22.03, 21.3, 29.85, 21.32, 25.93, 27.7, 23.02, 24.39, 27.4, 22.46, 20.1, 24.7, 25.24, 22.86, 22.53, 26.19, 28.21, 26.04, 26.23, 21.75, 27.35, 22.69, 28.73, 27.75, 25.13, 24.43, 28.54, 21.63, 29.58, 20.94];

var orddbproc1 = [599, 302, 753, 695, 673, 558, 779, 419, 687, 506, 525, 370, 756, 531, 308, 766, 355, 461, 472, 499, 406, 305, 396, 618, 313, 483, 784, 707, 350, 786, 735, 605, 623, 604, 592, 651, 387, 566, 307, 698, 356, 552, 333, 361, 787, 382, 357, 395, 789, 667, 421, 438, 533, 318, 521, 612, 486, 737, 603, 723, 545, 715, 725, 510, 311, 317, 721, 343, 797, 316, 665, 412, 713, 506, 560, 394, 387, 454, 714, 302, 351, 406, 346, 583, 305, 456, 418, 310, 541, 396, 575, 632, 481, 732, 409, 367, 570, 755, 404, 785, 398, 723, 508, 703, 373, 682, 533, 620, 472, 436, 615, 537, 343, 650, 507, 550, 371, 343, 520, 553, 414, 497, 675, 478, 748, 775, 479, 483, 462, 665, 379, 486, 377, 422, 706, 424, 788, 579, 404, 477, 592, 734, 548, 585, 746, 782, 382, 553, 776, 630, 620, 684, 453, 780, 464, 347, 698, 688, 387, 535, 547, 612, 306, 549, 559, 521, 662, 332, 430, 611, 727, 664, 777, 768, 338, 360, 480, 758, 732, 724, 605, 300, 368, 615, 645, 544, 533, 775, 311, 793, 660, 535, 392, 410, 726, 351, 456, 410, 617, 376, 594, 309, 417, 754, 599, 659, 745, 633, 738, 396, 772, 504, 689, 455, 351, 393, 357, 540, 525, 570, 515, 523, 567, 522, 722, 653, 716, 433, 379, 656, 437, 774, 767, 349, 678, 405, 660, 313, 448, 584, 640, 505, 480, 700, 448, 712, 629, 449, 650, 451, 622, 671, 634, 385, 599, 516, 663, 334, 387, 678, 516, 382, 607, 706, 446, 651, 609, 549, 468, 499, 677, 697, 745, 705, 470, 663, 436, 397, 672, 573, 305, 538, 305, 714, 742, 736, 490, 631];



//直角坐标系内绘图网格
function makeGrid(top, height, opt) {
    return echarts.util.merge({
        left: 90,
        right: 90,
        top: top,
        height: height
    }, opt || {}, true);
}

//X轴生成器
function makeXAxis(gridIndex, opt) {
    //避免X轴数据显示过于频繁
    axisLabelFlag = false;
    if (gridIndex % 2 === 0) {
        axisLabelFlag = true;
    }

    return echarts.util.merge({
        type: 'category',
        gridIndex: gridIndex,
        //统一时间轴数据
        data: overviewDate,
        axisLabel: {
            show: axisLabelFlag,
            /*          formatter: function(value) {
                          return echarts.format.formatTime('MM-dd', value);
                      }*/
        },
    }, opt || {}, true);
}

//Y轴生成器
function makeYAxis(gridIndex, opt) {
    return echarts.util.merge({
        type: 'value',
        nameLocation: 'middle',
        nameGap: '50',
        gridIndex: gridIndex,
        nameTextStyle: {
            color: '#333'
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true
        },
    }, opt || {}, true);
}

//数据生成器
function makeGridData(xAxisIndex, yAxisIndex, chartType, chartName, chartData, opt) {
    return echarts.util.merge({
        type: chartType,
        name: chartName,
        xAxisIndex: xAxisIndex,
        yAxisIndex: yAxisIndex,
        data: chartData,
    }, opt || {}, true);
}

option = {
    animation: false,
    //标题组件，包含主标题和副标题
    title: {
        x: 'center',
        padding: 0,
    },
    tooltip: {
        //移动端展示方式
        trigger: 'axis',
        transitionDuration: 0,
        confine: true,
        bordeRadius: 4,
        borderWidth: 1,
        borderColor: '#333',
        backgroundColor: 'rgba(255,255,255,0.9)',
        textStyle: {
            fontSize: 12,
            color: '#333'
        },
        formatter: function(params) { //数据单位格式化  
            let relVal = params[0].name; //x轴名称  
            relVal += "<div style='width:160px'>"
            for (let i = 0, l = params.length; i < l; i++) {
                if (params[i].value) {
                    relVal += "<span  style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + params[i].color + ";'>" + '<span  style="display:block;padding-left:15px;margin-top:-4px">' + params[i].seriesName + ' : ' + params[i].value + '</span>' + "</span>" + '<br>';
                }
            }
            relVal += "</div>"
            return relVal;
        }
    },

    //坐标轴指示器（axisPointer）的全局公用设置
    axisPointer: {
        type: 'shadow',
        link: {
            xAxisIndex: 'all'
        }
    },
    //直角坐标系内绘图网格
    grid: [
        makeGrid(chartGridTop, chartGridHeight),
        makeGrid(chartGridTop + (chartGridHeight + 25), chartGridHeight),
        makeGrid(chartGridTop + (chartGridHeight + 25) * 2, chartGridHeight)
    ],
    xAxis: [
        makeXAxis(0),
        makeXAxis(1),
        makeXAxis(2)


    ],
    yAxis: [
        makeYAxis(0, {
            // name: '主机CPU',
            min: 20,
            max: 80
        }),
        makeYAxis(1, {
            // name: 'DBTIME',
            max: 80
        }),
        makeYAxis(2, {
            // name: '停开机数据量',
            max: 1000
        })




    ],

    //每个系列通过 type 决定自己的图表类型
    series: [
        makeGridData(0, 0, 'line', 'ORDDB1 CPU', orddbhost1),
        makeGridData(0, 0, 'line', 'ORDDB2 CPU', orddbhost2),

        makeGridData(1, 1, 'line', 'ORDDB1 DBTIME', orddbtime1, {
            stack: 'DBTIME'
        }),
        makeGridData(1, 1, 'bar', 'ORDDB2 DBTIME', orddbtime2, {
            stack: 'DBTIME'
        }),

        makeGridData(2, 2, 'line', 'ORDDB 进程数', orddbproc1, {}),

    ]
};