项目一

多维度展示数据（参考SaaS车辆生命线的应用）。
image.png

  1. <!DOCTYPE html>
  2. <html style="height: 100%">
  3. <head>
  4.   <meta charset="utf-8">
  5. </head>
  7. <body style="height: 100%; margin: 0">
  8.   <div id="container" style="height: 100%"></div>
  9.   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  10.   <script type="text/javascript">
  11.     var dom = document.getElementById("container");
  12.     var myChart = echarts.init(dom);
  13.     var app = {};
  14.     var option;
  15.     var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
  16.       '7a', '8a', '9a', '10a', '11a',
  17.       '12p', '1p', '2p', '3p', '4p', '5p',
  18.       '6p', '7p', '8p', '9p', '10p', '11p'
  19.     ];
  20.     var days = ['Saturday', 'Friday', 'Thursday',
  21.       'Wednesday', 'Tuesday', 'Monday', 'Sunday'
  22.     ];
  23.     var data = [
  24.       [0, 0, 5],
  25.       [0, 1, 1],
  26.       [0, 2, 0],
  27.       [0, 3, 0],
  28.       [0, 4, 0],
  29.       [0, 5, 0],
  30.       [0, 6, 0],
  31.       [0, 7, 0],
  32.       [0, 8, 0],
  33.       [0, 9, 0],
  34.       [0, 10, 0],
  35.       [0, 11, 2],
  36.       [0, 12, 4],
  37.       [0, 13, 1],
  38.       [0, 14, 1],
  39.       [0, 15, 3],
  40.       [0, 16, 4],
  41.       [0, 17, 6],
  42.       [0, 18, 4],
  43.       [0, 19, 4],
  44.       [0, 20, 3],
  45.       [0, 21, 3],
  46.       [0, 22, 2],
  47.       [0, 23, 5],
  48.       [1, 0, 7],
  49.       [1, 1, 0],
  50.       [1, 2, 0],
  51.       [1, 3, 0],
  52.       [1, 4, 0],
  53.       [1, 5, 0],
  54.       [1, 6, 0],
  55.       [1, 7, 0],
  56.       [1, 8, 0],
  57.       [1, 9, 0],
  58.       [1, 10, 5],
  59.       [1, 11, 2],
  60.       [1, 12, 2],
  61.       [1, 13, 6],
  62.       [1, 14, 9],
  63.       [1, 15, 11],
  64.       [1, 16, 6],
  65.       [1, 17, 7],
  66.       [1, 18, 8],
  67.       [1, 19, 12],
  68.       [1, 20, 5],
  69.       [1, 21, 5],
  70.       [1, 22, 7],
  71.       [1, 23, 2],
  72.       [2, 0, 1],
  73.       [2, 1, 1],
  74.       [2, 2, 0],
  75.       [2, 3, 0],
  76.       [2, 4, 0],
  77.       [2, 5, 0],
  78.       [2, 6, 0],
  79.       [2, 7, 0],
  80.       [2, 8, 0],
  81.       [2, 9, 0],
  82.       [2, 10, 3],
  83.       [2, 11, 2],
  84.       [2, 12, 1],
  85.       [2, 13, 9],
  86.       [2, 14, 8],
  87.       [2, 15, 10],
  88.       [2, 16, 6],
  89.       [2, 17, 5],
  90.       [2, 18, 5],
  91.       [2, 19, 5],
  92.       [2, 20, 7],
  93.       [2, 21, 4],
  94.       [2, 22, 2],
  95.       [2, 23, 4],
  96.       [3, 0, 7],
  97.       [3, 1, 3],
  98.       [3, 2, 0],
  99.       [3, 3, 0],
  100.       [3, 4, 0],
  101.       [3, 5, 0],
  102.       [3, 6, 0],
  103.       [3, 7, 0],
  104.       [3, 8, 1],
  105.       [3, 9, 0],
  106.       [3, 10, 5],
  107.       [3, 11, 4],
  108.       [3, 12, 7],
  109.       [3, 13, 14],
  110.       [3, 14, 13],
  111.       [3, 15, 12],
  112.       [3, 16, 9],
  113.       [3, 17, 5],
  114.       [3, 18, 5],
  115.       [3, 19, 10],
  116.       [3, 20, 6],
  117.       [3, 21, 4],
  118.       [3, 22, 4],
  119.       [3, 23, 1],
  120.       [4, 0, 1],
  121.       [4, 1, 3],
  122.       [4, 2, 0],
  123.       [4, 3, 0],
  124.       [4, 4, 0],
  125.       [4, 5, 1],
  126.       [4, 6, 0],
  127.       [4, 7, 0],
  128.       [4, 8, 0],
  129.       [4, 9, 2],
  130.       [4, 10, 4],
  131.       [4, 11, 4],
  132.       [4, 12, 2],
  133.       [4, 13, 4],
  134.       [4, 14, 4],
  135.       [4, 15, 14],
  136.       [4, 16, 12],
  137.       [4, 17, 1],
  138.       [4, 18, 8],
  139.       [4, 19, 5],
  140.       [4, 20, 3],
  141.       [4, 21, 7],
  142.       [4, 22, 3],
  143.       [4, 23, 0],
  144.       [5, 0, 2],
  145.       [5, 1, 1],
  146.       [5, 2, 0],
  147.       [5, 3, 3],
  148.       [5, 4, 0],
  149.       [5, 5, 0],
  150.       [5, 6, 0],
  151.       [5, 7, 0],
  152.       [5, 8, 2],
  153.       [5, 9, 0],
  154.       [5, 10, 4],
  155.       [5, 11, 1],
  156.       [5, 12, 5],
  157.       [5, 13, 10],
  158.       [5, 14, 5],
  159.       [5, 15, 7],
  160.       [5, 16, 11],
  161.       [5, 17, 6],
  162.       [5, 18, 0],
  163.       [5, 19, 5],
  164.       [5, 20, 3],
  165.       [5, 21, 4],
  166.       [5, 22, 2],
  167.       [5, 23, 0],
  168.       [6, 0, 1],
  169.       [6, 1, 0],
  170.       [6, 2, 0],
  171.       [6, 3, 0],
  172.       [6, 4, 0],
  173.       [6, 5, 0],
  174.       [6, 6, 0],
  175.       [6, 7, 0],
  176.       [6, 8, 0],
  177.       [6, 9, 0],
  178.       [6, 10, 1],
  179.       [6, 11, 0],
  180.       [6, 12, 2],
  181.       [6, 13, 1],
  182.       [6, 14, 3],
  183.       [6, 15, 4],
  184.       [6, 16, 0],
  185.       [6, 17, 0],
  186.       [6, 18, 0],
  187.       [6, 19, 0],
  188.       [6, 20, 1],
  189.       [6, 21, 2],
  190.       [6, 22, 2],
  191.       [6, 23, 6]
  192.     ];
  194.     option = {
  195.       tooltip: {
  196.         position: 'top'
  197.       },
  198.       title: [],
  199.       singleAxis: [],
  200.       series: []
  201.     };
  203.     days.forEach(function(day, idx) {
  204.       option.title.push({
  205.         textBaseline: 'middle',
  206.         top: (idx + 0.5) * 100 / 7 + '%',
  207.         text: day
  208.       });
  209.       option.singleAxis.push({
  210.         left: 150,
  211.         type: 'category',
  212.         boundaryGap: false,
  213.         data: hours,
  214.         top: (idx * 100 / 7 + 5) + '%',
  215.         height: (100 / 7 - 10) + '%',
  216.         axisLabel: {
  217.           interval: 2
  218.         }
  219.       });
  220.       option.series.push({
  221.         singleAxisIndex: idx,
  222.         coordinateSystem: 'singleAxis',
  223.         type: 'scatter',
  224.         data: [],
  225.         symbolSize: function(dataItem) {
  226.           return dataItem[1] * 4;
  227.         }
  228.       });
  229.     });
  231.     data.forEach(function(dataItem) {
  232.       option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
  233.     });
  235.     if (option && typeof option === 'object') {
  236.       myChart.setOption(option);
  237.     }
  238.   </script>
  239. </body>
  241. </html>