image.png

按需引入

  1. import * as echarts from 'echarts/core';
  2. import { GridComponent } from 'echarts/components';
  3. import { BarChart, LinesChart } from 'echarts/charts';
  4. import { CanvasRenderer } from 'echarts/renderers';
  6. echarts.use([GridComponent, BarChart, LinesChart, CanvasRenderer]);
  8. var chartDom = document.getElementById('main');
  9. var myChart = echarts.init(chartDom);
  10. var option;
  11. // option && myChart.setOption(option);

options

  1. const option = {
  2.   backgroundColor: '#222',
  3.   stack: true,
  4.   grid: { bottom: 0, top: 0, left: 0, right: 0 },
  5.   xAxis: {
  6.     data: [],
  7.     silent: true,
  8.     splitLine: { show: false },
  9.     axisLine: { show: false }
  10.   },
  11.   yAxis: {
  12.     silent: true,
  13.     splitLine: { show: false },
  14.     axisLine: { show: false },
  15.     axisTick: { show: false },
  16.     axisLabel: { show: false }
  17.   },
  18.   series: [
  19.     {
  20.       type: 'bar',
  21.       data: [
  22.         200, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 0, 37, 37, 37, 35, 35, 35,
  23.         37, 37, 37, 22, 23, 24, 25, 26, 25, 24, 23, 22, 0, 33, 33, 33, 31, 31,
  24.         31, 33, 33, 33, 19, 19, 19, 21, 37, 21, 19, 19, 19, 53, 53, 53, 51, 51,
  25.         51, 53, 53, 53, 35, 35, 35, 35, 35, 35, 35, 19, 18.5, 18, 17.5, 17,
  26.         16.5, 16, 16, 16, 16, 16, 33, 33, 33, 35, 35, 35, 33, 33, 33, 0, 43, 43,
  27.         43, 43, 43, 43, 43, 10, 10, 10, 10, 10, 6, 6, 6, 0, 38, 39, 40, 41, 42,
  28.         41, 40, 39, 38, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 0, 38, 39, 40,
  29.         41, 42, 43, 43, 43, 43, 43
  30.       ],
  31.       itemStyle: { normal: { color: 'rgb(38, 41, 57)' } }
  32.     },
  33.     {
  34.       type: 'bar',
  35.       data: [
  36.         180, 25, 25, 25, 27, 43, 27, 25, 25, 25, 0, 39, 2, 2, 4, 22, 6, 4, 2, 2,
  37.         0, 2, 1, 24, 24, 24, 20, 20, 20, 0, 73, 40, 40, 40, 42, 41, 40, 37, 36,
  38.         35, 0, 60.3, 61, 59.599999999999994, 44.5, 61, 63.5, 63.599999999999994,
  39.         63.7, 29.700000000000003, 29.599999999999994, 29.5, 31, 30.5,
  40.         29.599999999999994, 27, 26.299999999999997, 0, 4, 4, 4, 6, 6, 6, 4, 4,
  41.         4, 0, 60.5, 62, 63.5, 65, 66, 67, 68, 69, 53, 54, 65, 64, 65, 66, 69,
  42.         68, 67, 99, 55, 6, 6, 6, 8, 24, 8, 6, 6, 6, 0, 89, 93, 93, 93, 99, 57,
  43.         56, 55, 3, 2, 3, 6, 7, 8, 44, 44, 44, 28, 29, 30, 33, 34, 35, 34, 79,
  44.         41, 0, 32, 33, 34, 35, 36, 37, 37, 37, 37, 37, 51, 51, 51, 53, 53, 53,
  45.         51, 51, 51, 0
  46.       ],
  47.       itemStyle: { normal: { color: 'rgb(28, 31, 47)' } }
  48.     },
  49.     {
  50.       coordinateSystem: 'cartesian2d',
  51.       type: 'lines',
  52.       zlevel: 2,
  53.       symbolSize: 3,
  54.       effect: {
  55.         show: true,
  56.         period: 1,
  57.         trailLength: 0.01,
  58.         symbolSize: 5,
  59.         symbol: 'pin',
  60.         loop: true
  61.       },
  62.       lineStyle: {
  63.         normal: { color: '#BF3EFF', opacity: 0.6, curveness: 0.1, width: 0.01 }
  64.       },
  65.       data: [
  66.         {
  67.           coords: [
  68.             [40, 166],
  69.             [40, 210]
  70.           ]
  71.         },
  72.         {
  73.           coords: [
  74.             [41, 165],
  75.             [65, 165]
  76.           ]
  77.         },
  78.         {
  79.           coords: [
  80.             [39, 165],
  81.             [15, 165]
  82.           ]
  83.         },
  84.         {
  85.           coords: [
  86.             [40, 164],
  87.             [40, 115]
  88.           ]
  89.         },
  90.         {
  91.           coords: [
  92.             [40, 164],
  93.             [55, 192]
  94.           ]
  95.         },
  96.         {
  97.           coords: [
  98.             [40, 164],
  99.             [56, 175]
  100.           ],
  101.           lineStyle: { normal: { color: '#FFFFFF' } }
  102.         },
  103.         {
  104.           coords: [
  105.             [40, 164],
  106.             [46, 197]
  107.           ],
  108.           lineStyle: { normal: { color: '#FFFFFF' } }
  109.         },
  110.         {
  111.           coords: [
  112.             [41, 190],
  113.             [47, 215]
  114.           ],
  115.           lineStyle: { normal: { color: '#00FF33' } }
  116.         },
  117.         {
  118.           coords: [
  119.             [48, 190],
  120.             [57, 205]
  121.           ],
  122.           lineStyle: { normal: { color: '#00FF33' } }
  123.         },
  124.         {
  125.           coords: [
  126.             [52, 180],
  127.             [62, 185]
  128.           ],
  129.           lineStyle: { normal: { color: '#00FF33' } }
  130.         },
  131.         {
  132.           coords: [
  133.             [55, 170],
  134.             [68, 171]
  135.           ],
  136.           lineStyle: { normal: { color: '#00FF33' } }
  137.         },
  138.         {
  139.           coords: [
  140.             [39, 166],
  141.             [24, 190]
  142.           ]
  143.         },
  144.         {
  145.           coords: [
  146.             [40, 164],
  147.             [24, 175]
  148.           ],
  149.           lineStyle: { normal: { color: '#FFFFFF' } }
  150.         },
  151.         {
  152.           coords: [
  153.             [40, 164],
  154.             [31, 195]
  155.           ],
  156.           lineStyle: { normal: { color: '#FFFFFF' } }
  157.         },
  158.         {
  159.           coords: [
  160.             [25, 168],
  161.             [13, 176]
  162.           ],
  163.           lineStyle: { normal: { color: '#00FF33' } }
  164.         },
  165.         {
  166.           coords: [
  167.             [29, 175],
  168.             [18, 195]
  169.           ],
  170.           lineStyle: { normal: { color: '#00FF33' } }
  171.         },
  172.         {
  173.           coords: [
  174.             [33, 179],
  175.             [24, 210]
  176.           ],
  177.           lineStyle: { normal: { color: '#00FF33' } }
  178.         },
  179.         {
  180.           coords: [
  181.             [36, 185],
  182.             [35, 210]
  183.           ],
  184.           lineStyle: { normal: { color: '#00FF33' } }
  185.         },
  186.         {
  187.           coords: [
  188.             [40, 164],
  189.             [26, 137]
  190.           ]
  191.         },
  192.         {
  193.           coords: [
  194.             [40, 164],
  195.             [34, 135]
  196.           ],
  197.           lineStyle: { normal: { color: '#FFFFFF' } }
  198.         },
  199.         {
  200.           coords: [
  201.             [40, 164],
  202.             [25, 153]
  203.           ],
  204.           lineStyle: { normal: { color: '#FFFFFF' } }
  205.         },
  206.         {
  207.           coords: [
  208.             [39, 144],
  209.             [36, 120]
  210.           ],
  211.           lineStyle: { normal: { color: '#00FF33' } }
  212.         },
  213.         {
  214.           coords: [
  215.             [34, 144],
  216.             [22, 123]
  217.           ],
  218.           lineStyle: { normal: { color: '#00FF33' } }
  219.         },
  220.         {
  221.           coords: [
  222.             [30, 151],
  223.             [21, 143]
  224.           ],
  225.           lineStyle: { normal: { color: '#00FF33' } }
  226.         },
  227.         {
  228.           coords: [
  229.             [30, 159],
  230.             [18, 157]
  231.           ],
  232.           lineStyle: { normal: { color: '#00FF33' } }
  233.         },
  234.         {
  235.           coords: [
  236.             [40, 164],
  237.             [55, 135]
  238.           ]
  239.         },
  240.         {
  241.           coords: [
  242.             [40, 164],
  243.             [55, 152]
  244.           ],
  245.           lineStyle: { normal: { color: '#FFFFFF' } }
  246.         },
  247.         {
  248.           coords: [
  249.             [40, 164],
  250.             [46, 135]
  251.           ],
  252.           lineStyle: { normal: { color: '#FFFFFF' } }
  253.         },
  254.         {
  255.           coords: [
  256.             [52, 160],
  257.             [65, 153]
  258.           ],
  259.           lineStyle: { normal: { color: '#00FF33' } }
  260.         },
  261.         {
  262.           coords: [
  263.             [52, 150],
  264.             [62, 133]
  265.           ],
  266.           lineStyle: { normal: { color: '#00FF33' } }
  267.         },
  268.         {
  269.           coords: [
  270.             [47, 144],
  271.             [53, 123]
  272.           ],
  273.           lineStyle: { normal: { color: '#00FF33' } }
  274.         },
  275.         {
  276.           coords: [
  277.             [43, 134],
  278.             [45, 113]
  279.           ],
  280.           lineStyle: { normal: { color: '#00FF33' } }
  281.         }
  282.       ],
  283.       animationDelay: 1100
  284.     },
  285.     {
  286.       coordinateSystem: 'cartesian2d',
  287.       type: 'lines',
  288.       zlevel: -2,
  289.       effect: {
  290.         show: true,
  291.         period: 1,
  292.         trailLength: 0.01,
  293.         symbolSize: 12,
  294.         symbol: 'circle',
  295.         loop: true
  296.       },
  297.       lineStyle: { normal: { color: '#ccc', opacity: 0, curveness: 0 } },
  298.       data: [
  299.         {
  300.           coords: [
  301.             [40, 25],
  302.             [40, 165]
  303.           ]
  304.         }
  305.       ],
  306.       animationDelay: 1100
  307.     },
  308.     {
  309.       coordinateSystem: 'cartesian2d',
  310.       type: 'lines',
  311.       zlevel: -2,
  312.       effect: {
  313.         show: true,
  314.         period: 1,
  315.         trailLength: 0.01,
  316.         symbolSize: 12,
  317.         symbol: 'circle',
  318.         loop: true
  319.       },
  320.       lineStyle: { normal: { color: '#ccc', opacity: 0, curveness: 0 } },
  321.       data: [
  322.         {
  323.           coords: [
  324.             [110, 25],
  325.             [110, 165]
  326.           ]
  327.         }
  328.       ],
  329.       animationDelay: 1100
  330.     },
  331.     {
  332.       coordinateSystem: 'cartesian2d',
  333.       type: 'lines',
  334.       zlevel: 2,
  335.       symbolSize: 3,
  336.       effect: {
  337.         show: true,
  338.         period: 1,
  339.         trailLength: 0.01,
  340.         symbolSize: 5,
  341.         symbol: 'pin',
  342.         loop: true
  343.       },
  344.       lineStyle: {
  345.         normal: { color: '#ccc', opacity: 0.02, width: 0.01, curveness: 0.1 }
  346.       },
  347.       data: [
  348.         {
  349.           coords: [
  350.             [110, 166],
  351.             [110, 210]
  352.           ]
  353.         },
  354.         {
  355.           coords: [
  356.             [111, 165],
  357.             [135, 165]
  358.           ]
  359.         },
  360.         {
  361.           coords: [
  362.             [109, 165],
  363.             [85, 165]
  364.           ]
  365.         },
  366.         {
  367.           coords: [
  368.             [110, 164],
  369.             [110, 115]
  370.           ]
  371.         },
  372.         {
  373.           coords: [
  374.             [110, 164],
  375.             [125, 192]
  376.           ]
  377.         },
  378.         {
  379.           coords: [
  380.             [110, 164],
  381.             [126, 175]
  382.           ],
  383.           lineStyle: { normal: { color: '#DD2222' } }
  384.         },
  385.         {
  386.           coords: [
  387.             [110, 164],
  388.             [116, 197]
  389.           ],
  390.           lineStyle: { normal: { color: '#DD2222' } }
  391.         },
  392.         {
  393.           coords: [
  394.             [111, 190],
  395.             [117, 215]
  396.           ],
  397.           lineStyle: { normal: { color: '#FFFF00' } }
  398.         },
  399.         {
  400.           coords: [
  401.             [118, 190],
  402.             [127, 205]
  403.           ],
  404.           lineStyle: { normal: { color: '#FFFF00' } }
  405.         },
  406.         {
  407.           coords: [
  408.             [122, 180],
  409.             [132, 185]
  410.           ],
  411.           lineStyle: { normal: { color: '#FFFF00' } }
  412.         },
  413.         {
  414.           coords: [
  415.             [125, 170],
  416.             [138, 171]
  417.           ],
  418.           lineStyle: { normal: { color: '#FFFF00' } }
  419.         },
  420.         {
  421.           coords: [
  422.             [109, 166],
  423.             [94, 190]
  424.           ]
  425.         },
  426.         {
  427.           coords: [
  428.             [110, 164],
  429.             [94, 175]
  430.           ],
  431.           lineStyle: { normal: { color: '#DD2222' } }
  432.         },
  433.         {
  434.           coords: [
  435.             [110, 164],
  436.             [101, 195]
  437.           ],
  438.           lineStyle: { normal: { color: '#DD2222' } }
  439.         },
  440.         {
  441.           coords: [
  442.             [95, 168],
  443.             [83, 176]
  444.           ],
  445.           lineStyle: { normal: { color: '#FFFF00' } }
  446.         },
  447.         {
  448.           coords: [
  449.             [99, 175],
  450.             [88, 195]
  451.           ],
  452.           lineStyle: { normal: { color: '#FFFF00' } }
  453.         },
  454.         {
  455.           coords: [
  456.             [103, 179],
  457.             [94, 210]
  458.           ],
  459.           lineStyle: { normal: { color: '#FFFF00' } }
  460.         },
  461.         {
  462.           coords: [
  463.             [106, 185],
  464.             [105, 210]
  465.           ],
  466.           lineStyle: { normal: { color: '#FFFF00' } }
  467.         },
  468.         {
  469.           coords: [
  470.             [110, 164],
  471.             [96, 137]
  472.           ]
  473.         },
  474.         {
  475.           coords: [
  476.             [110, 164],
  477.             [104, 135]
  478.           ],
  479.           lineStyle: { normal: { color: '#DD2222' } }
  480.         },
  481.         {
  482.           coords: [
  483.             [110, 164],
  484.             [95, 153]
  485.           ],
  486.           lineStyle: { normal: { color: '#DD2222' } }
  487.         },
  488.         {
  489.           coords: [
  490.             [109, 144],
  491.             [106, 120]
  492.           ],
  493.           lineStyle: { normal: { color: '#FFFF00' } }
  494.         },
  495.         {
  496.           coords: [
  497.             [104, 144],
  498.             [92, 123]
  499.           ],
  500.           lineStyle: { normal: { color: '#FFFF00' } }
  501.         },
  502.         {
  503.           coords: [
  504.             [100, 151],
  505.             [91, 143]
  506.           ],
  507.           lineStyle: { normal: { color: '#FFFF00' } }
  508.         },
  509.         {
  510.           coords: [
  511.             [100, 159],
  512.             [88, 157]
  513.           ],
  514.           lineStyle: { normal: { color: '#FFFF00' } }
  515.         },
  516.         {
  517.           coords: [
  518.             [110, 164],
  519.             [125, 135]
  520.           ]
  521.         },
  522.         {
  523.           coords: [
  524.             [110, 164],
  525.             [125, 152]
  526.           ],
  527.           lineStyle: { normal: { color: '#DD2222' } }
  528.         },
  529.         {
  530.           coords: [
  531.             [110, 164],
  532.             [116, 135]
  533.           ],
  534.           lineStyle: { normal: { color: '#DD2222' } }
  535.         },
  536.         {
  537.           coords: [
  538.             [122, 160],
  539.             [135, 153]
  540.           ],
  541.           lineStyle: { normal: { color: '#FFFF00' } }
  542.         },
  543.         {
  544.           coords: [
  545.             [122, 150],
  546.             [132, 133]
  547.           ],
  548.           lineStyle: { normal: { color: '#FFFF00' } }
  549.         },
  550.         {
  551.           coords: [
  552.             [117, 144],
  553.             [123, 123]
  554.           ],
  555.           lineStyle: { normal: { color: '#FFFF00' } }
  556.         },
  557.         {
  558.           coords: [
  559.             [113, 134],
  560.             [115, 113]
  561.           ],
  562.           lineStyle: { normal: { color: '#FFFF00' } }
  563.         }
  564.       ],
  565.       animationDelay: 1100
  566.     }
  567.   ],
  568.   animationEasing: 'elasticOut'
  569. };

绘制月亮

  1. function r(max) {
  2.   let m = max || 10
  3.   return Math.floor(Math.random() * m)
  4. }
  6. const moonAndStars = {
  7.   type: 'graph',
  8.   data: (function () {
  9.     let moonPosition = {
  10.       x: 190,
  11.       y: 0.5,
  12.     }
  13.     let moon = [
  14.       {
  15.         symbolSize: 70,
  16.         x: moonPosition.x,
  17.         y: moonPosition.y,
  18.       },
  19.       {
  20.         symbolSize: 60,
  21.         x: moonPosition.x - 1.5,
  22.         y: moonPosition.y - 1.5,
  23.         itemStyle: {
  24.           normal: {
  25.             color: 'rgb(51, 51, 51)',
  26.           },
  27.         },
  28.       },
  29.       {
  30.         symbolSize: 0,
  31.         x: 0,
  32.         y: 0,
  33.       },
  34.       {
  35.         symbolSize: 0,
  36.         x: 200,
  37.         y: 100,
  38.       },
  39.     ]
  40.     let num = 100
  41.     let stars = []
  42.     for (let i = 0; i < num; i++) {
  43.       stars.push({
  44.         symbolSize: r(3),
  45.         x: r(200),
  46.         y: r(50),
  47.       })
  48.     }
  49.     return moon.concat(stars)
  50.   })(),
  51.   itemStyle: {
  52.     normal: {
  53.       color: '#ccc',
  54.     },
  55.   },
  56.   silent: true,
  57.   z: -1,
  58. }