API tools faq
paste
Advertisement
clabnet

Motor power chart html

clabnet
Dec 19th, 2022
1,029
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 20.79 KB | Help | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><html lang="en" style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/dataTool.min.js"></script><script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script><script type="text/javascript">var dom = document.getElementById('container');
  2.  
  3.     var themeData = {
  4.     "color": [
  5.         "#4ea397",
  6.         "#22c3aa",
  7.         "#7bd9a5",
  8.         "#d0648a",
  9.         "#f58db2",
  10.         "#f2b3c9"
  11.     ],
  12.     "backgroundColor": "rgba(255,255,255,0)",
  13.     "textStyle": {},
  14.     "title": {
  15.         "textStyle": {
  16.             "color": "#666666"
  17.         },
  18.         "subtextStyle": {
  19.             "color": "#999999"
  20.         }
  21.     },
  22.     "line": {
  23.         "itemStyle": {
  24.             "borderWidth": "2"
  25.         },
  26.         "lineStyle": {
  27.             "width": "3"
  28.         },
  29.         "symbolSize": "8",
  30.         "symbol": "emptyCircle",
  31.         "smooth": false
  32.     },
  33.     "radar": {
  34.         "itemStyle": {
  35.             "borderWidth": "2"
  36.         },
  37.         "lineStyle": {
  38.             "width": "3"
  39.         },
  40.         "symbolSize": "8",
  41.         "symbol": "emptyCircle",
  42.         "smooth": false
  43.     },
  44.     "bar": {
  45.         "itemStyle": {
  46.             "barBorderWidth": 0,
  47.             "barBorderColor": "#ccc"
  48.         }
  49.     },
  50.     "pie": {
  51.         "itemStyle": {
  52.             "borderWidth": 0,
  53.             "borderColor": "#ccc"
  54.         }
  55.     },
  56.     "scatter": {
  57.         "itemStyle": {
  58.             "borderWidth": 0,
  59.             "borderColor": "#ccc"
  60.         }
  61.     },
  62.     "boxplot": {
  63.         "itemStyle": {
  64.             "borderWidth": 0,
  65.             "borderColor": "#ccc"
  66.         }
  67.     },
  68.     "parallel": {
  69.         "itemStyle": {
  70.             "borderWidth": 0,
  71.             "borderColor": "#ccc"
  72.         }
  73.     },
  74.     "sankey": {
  75.         "itemStyle": {
  76.             "borderWidth": 0,
  77.             "borderColor": "#ccc"
  78.         }
  79.     },
  80.     "funnel": {
  81.         "itemStyle": {
  82.             "borderWidth": 0,
  83.             "borderColor": "#ccc"
  84.         }
  85.     },
  86.     "gauge": {
  87.         "itemStyle": {
  88.             "borderWidth": 0,
  89.             "borderColor": "#ccc"
  90.         }
  91.     },
  92.     "candlestick": {
  93.         "itemStyle": {
  94.             "color": "#d0648a",
  95.             "color0": "transparent",
  96.             "borderColor": "#d0648a",
  97.             "borderColor0": "#22c3aa",
  98.             "borderWidth": "1"
  99.         }
  100.     },
  101.     "graph": {
  102.         "itemStyle": {
  103.             "borderWidth": 0,
  104.             "borderColor": "#ccc"
  105.         },
  106.         "lineStyle": {
  107.             "width": "1",
  108.             "color": "#cccccc"
  109.         },
  110.         "symbolSize": "8",
  111.         "symbol": "emptyCircle",
  112.         "smooth": false,
  113.         "color": [
  114.             "#4ea397",
  115.             "#22c3aa",
  116.             "#7bd9a5",
  117.             "#d0648a",
  118.             "#f58db2",
  119.             "#f2b3c9"
  120.         ],
  121.         "label": {
  122.             "color": "#ffffff"
  123.         }
  124.     },
  125.     "map": {
  126.         "itemStyle": {
  127.             "areaColor": "#eeeeee",
  128.             "borderColor": "#999999",
  129.             "borderWidth": 0.5
  130.         },
  131.         "label": {
  132.             "color": "#28544e"
  133.         },
  134.         "emphasis": {
  135.             "itemStyle": {
  136.                 "areaColor": "rgba(34,195,170,0.25)",
  137.                 "borderColor": "#22c3aa",
  138.                 "borderWidth": 1
  139.             },
  140.             "label": {
  141.                 "color": "#349e8e"
  142.             }
  143.         }
  144.     },
  145.     "geo": {
  146.         "itemStyle": {
  147.             "areaColor": "#eeeeee",
  148.             "borderColor": "#999999",
  149.             "borderWidth": 0.5
  150.         },
  151.         "label": {
  152.             "color": "#28544e"
  153.         },
  154.         "emphasis": {
  155.             "itemStyle": {
  156.                 "areaColor": "rgba(34,195,170,0.25)",
  157.                 "borderColor": "#22c3aa",
  158.                 "borderWidth": 1
  159.             },
  160.             "label": {
  161.                 "color": "#349e8e"
  162.             }
  163.         }
  164.     },
  165.     "categoryAxis": {
  166.         "axisLine": {
  167.             "show": true,
  168.             "lineStyle": {
  169.                 "color": "#cccccc"
  170.             }
  171.         },
  172.         "axisTick": {
  173.             "show": false,
  174.             "lineStyle": {
  175.                 "color": "#333"
  176.             }
  177.         },
  178.         "axisLabel": {
  179.             "show": true,
  180.             "color": "#999999"
  181.         },
  182.         "splitLine": {
  183.             "show": true,
  184.             "lineStyle": {
  185.                 "color": [
  186.                     "#eeeeee"
  187.                 ]
  188.             }
  189.         },
  190.         "splitArea": {
  191.             "show": false,
  192.             "areaStyle": {
  193.                 "color": [
  194.                     "rgba(250,250,250,0.05)",
  195.                     "rgba(200,200,200,0.02)"
  196.                 ]
  197.             }
  198.         }
  199.     },
  200.     "valueAxis": {
  201.         "axisLine": {
  202.             "show": true,
  203.             "lineStyle": {
  204.                 "color": "#cccccc"
  205.             }
  206.         },
  207.         "axisTick": {
  208.             "show": false,
  209.             "lineStyle": {
  210.                 "color": "#333"
  211.             }
  212.         },
  213.         "axisLabel": {
  214.             "show": true,
  215.             "color": "#999999"
  216.         },
  217.         "splitLine": {
  218.             "show": true,
  219.             "lineStyle": {
  220.                 "color": [
  221.                     "#eeeeee"
  222.                 ]
  223.             }
  224.         },
  225.         "splitArea": {
  226.             "show": false,
  227.             "areaStyle": {
  228.                 "color": [
  229.                     "rgba(250,250,250,0.05)",
  230.                     "rgba(200,200,200,0.02)"
  231.                 ]
  232.             }
  233.         }
  234.     },
  235.     "logAxis": {
  236.         "axisLine": {
  237.             "show": true,
  238.             "lineStyle": {
  239.                 "color": "#cccccc"
  240.             }
  241.         },
  242.         "axisTick": {
  243.             "show": false,
  244.             "lineStyle": {
  245.                 "color": "#333"
  246.             }
  247.         },
  248.         "axisLabel": {
  249.             "show": true,
  250.             "color": "#999999"
  251.         },
  252.         "splitLine": {
  253.             "show": true,
  254.             "lineStyle": {
  255.                 "color": [
  256.                     "#eeeeee"
  257.                 ]
  258.             }
  259.         },
  260.         "splitArea": {
  261.             "show": false,
  262.             "areaStyle": {
  263.                 "color": [
  264.                     "rgba(250,250,250,0.05)",
  265.                     "rgba(200,200,200,0.02)"
  266.                 ]
  267.             }
  268.         }
  269.     },
  270.     "timeAxis": {
  271.         "axisLine": {
  272.             "show": true,
  273.             "lineStyle": {
  274.                 "color": "#cccccc"
  275.             }
  276.         },
  277.         "axisTick": {
  278.             "show": false,
  279.             "lineStyle": {
  280.                 "color": "#333"
  281.             }
  282.         },
  283.         "axisLabel": {
  284.             "show": true,
  285.             "color": "#999999"
  286.         },
  287.         "splitLine": {
  288.             "show": true,
  289.             "lineStyle": {
  290.                 "color": [
  291.                     "#eeeeee"
  292.                 ]
  293.             }
  294.         },
  295.         "splitArea": {
  296.             "show": false,
  297.             "areaStyle": {
  298.                 "color": [
  299.                     "rgba(250,250,250,0.05)",
  300.                     "rgba(200,200,200,0.02)"
  301.                 ]
  302.             }
  303.         }
  304.     },
  305.     "toolbox": {
  306.         "iconStyle": {
  307.             "borderColor": "#999999"
  308.         },
  309.         "emphasis": {
  310.             "iconStyle": {
  311.                 "borderColor": "#666666"
  312.             }
  313.         }
  314.     },
  315.     "legend": {
  316.         "textStyle": {
  317.             "color": "#999999"
  318.         }
  319.     },
  320.     "tooltip": {
  321.         "axisPointer": {
  322.             "lineStyle": {
  323.                 "color": "#cccccc",
  324.                 "width": 1
  325.             },
  326.             "crossStyle": {
  327.                 "color": "#cccccc",
  328.                 "width": 1
  329.             }
  330.         }
  331.     },
  332.     "timeline": {
  333.         "lineStyle": {
  334.             "color": "#4ea397",
  335.             "width": 1
  336.         },
  337.         "itemStyle": {
  338.             "color": "#4ea397",
  339.             "borderWidth": 1
  340.         },
  341.         "controlStyle": {
  342.             "color": "#4ea397",
  343.             "borderColor": "#4ea397",
  344.             "borderWidth": 0.5
  345.         },
  346.         "checkpointStyle": {
  347.             "color": "#4ea397",
  348.             "borderColor": "#3cebd2"
  349.         },
  350.         "label": {
  351.             "color": "#4ea397"
  352.         },
  353.         "emphasis": {
  354.             "itemStyle": {
  355.                 "color": "#4ea397"
  356.             },
  357.             "controlStyle": {
  358.                 "color": "#4ea397",
  359.                 "borderColor": "#4ea397",
  360.                 "borderWidth": 0.5
  361.             },
  362.             "label": {
  363.                 "color": "#4ea397"
  364.             }
  365.         }
  366.     },
  367.     "visualMap": {
  368.         "color": [
  369.             "#d0648a",
  370.             "#22c3aa",
  371.             "#adfff1"
  372.         ]
  373.     },
  374.     "dataZoom": {
  375.         "backgroundColor": "rgba(255,255,255,0)",
  376.         "dataBackgroundColor": "rgba(222,222,222,1)",
  377.         "fillerColor": "rgba(114,230,212,0.25)",
  378.         "handleColor": "#cccccc",
  379.         "handleSize": "100%",
  380.         "textStyle": {
  381.             "color": "#999999"
  382.         }
  383.     },
  384.     "markPoint": {
  385.         "label": {
  386.             "color": "#ffffff"
  387.         },
  388.         "emphasis": {
  389.             "label": {
  390.                 "color": "#ffffff"
  391.             }
  392.         }
  393.     }
  394. };
  395.     echarts.registerTheme('pomini', themeData);
  396.  
  397.     var myChart = echarts.init(dom, 'pomini', {
  398.       renderer: 'canvas',
  399.       useDirtyRect: false
  400.     });
  401.  
  402.     var app = {};
  403.    
  404.     var option;
  405.     option = {
  406.     title: {
  407.         top: 5,
  408.         text: "Motor Power",
  409.         subtext: "1LE5683-3AC73-4."
  410.     },
  411.     xAxis: {
  412.         type: "value",
  413.         nameLocation: "middle",
  414.         nameGap: 50,
  415.         name: "Speed [rpm]"
  416.     },
  417.     yAxis: {
  418.         type: "value",
  419.         nameLocation: "middle",
  420.         nameGap: 50,
  421.         name: "Power [kW]",
  422.         max: 240
  423.     },
  424.     tooltip: {
  425.         trigger: "axis",
  426.         axisPointer: {
  427.             type: "cross"
  428.         }
  429.     },
  430.     toolbox: {
  431.         show: true,
  432.         feature: {
  433.             dataView: {
  434.                 readOnly: true
  435.             }
  436.         }
  437.     },
  438.     legend: {
  439.         top: 5,
  440.         data: [
  441.             "Power Rated",
  442.             "Power Rated 85%"
  443.         ]
  444.     },
  445.     series: [
  446.         {
  447.             type: "line",
  448.             name: "verticalLine",
  449.             markLine: {
  450.                 symbol: [
  451.                     "none"
  452.                 ],
  453.                 label: {
  454.                     show: true
  455.                 },
  456.                 data: [
  457.                     {
  458.                         xAxis: 2621.52,
  459.                         label: {
  460.                             formatter: "Cut Off Speed \n {c} rpm"
  461.                         }
  462.                     },
  463.                     {
  464.                         xAxis: 1993,
  465.                         label: {
  466.                             formatter: "Max Inverter Frequency \n {c} rpm"
  467.                         }
  468.                     },
  469.                     {
  470.                         xAxis: 993,
  471.                         label: {
  472.                             formatter: "Speed Derated Line \n {c} rpm"
  473.                         }
  474.                     }
  475.                 ]
  476.             }
  477.         },
  478.         {
  479.             type: "line",
  480.             data: [
  481.                 [
  482.                     0,
  483.                     0
  484.                 ],
  485.                 [
  486.                     50,
  487.                     10.070493454179255
  488.                 ],
  489.                 [
  490.                     100,
  491.                     20.14098690835851
  492.                 ],
  493.                 [
  494.                     150,
  495.                     30.211480362537763
  496.                 ],
  497.                 [
  498.                     200,
  499.                     40.28197381671702
  500.                 ],
  501.                 [
  502.                     250,
  503.                     50.35246727089627
  504.                 ],
  505.                 [
  506.                     300,
  507.                     60.42296072507553
  508.                 ],
  509.                 [
  510.                     350,
  511.                     70.49345417925478
  512.                 ],
  513.                 [
  514.                     400,
  515.                     80.56394763343404
  516.                 ],
  517.                 [
  518.                     450,
  519.                     90.6344410876133
  520.                 ],
  521.                 [
  522.                     500,
  523.                     100.70493454179254
  524.                 ],
  525.                 [
  526.                     550,
  527.                     110.7754279959718
  528.                 ],
  529.                 [
  530.                     600,
  531.                     120.84592145015105
  532.                 ],
  533.                 [
  534.                     650,
  535.                     130.9164149043303
  536.                 ],
  537.                 [
  538.                     700,
  539.                     140.98690835850957
  540.                 ],
  541.                 [
  542.                     750,
  543.                     151.05740181268882
  544.                 ],
  545.                 [
  546.                     800,
  547.                     161.12789526686808
  548.                 ],
  549.                 [
  550.                     850,
  551.                     171.19838872104734
  552.                 ],
  553.                 [
  554.                     900,
  555.                     181.2688821752266
  556.                 ],
  557.                 [
  558.                     950,
  559.                     191.33937562940585
  560.                 ],
  561.                 [
  562.                     993,
  563.                     200
  564.                 ],
  565.                 [
  566.                     1000,
  567.                     200
  568.                 ],
  569.                 [
  570.                     1050,
  571.                     200
  572.                 ],
  573.                 [
  574.                     1100,
  575.                     200
  576.                 ],
  577.                 [
  578.                     1150,
  579.                     200
  580.                 ],
  581.                 [
  582.                     1200,
  583.                     200
  584.                 ],
  585.                 [
  586.                     1250,
  587.                     200
  588.                 ],
  589.                 [
  590.                     1300,
  591.                     200
  592.                 ],
  593.                 [
  594.                     1350,
  595.                     200
  596.                 ],
  597.                 [
  598.                     1400,
  599.                     200
  600.                 ],
  601.                 [
  602.                     1450,
  603.                     200
  604.                 ],
  605.                 [
  606.                     1500,
  607.                     200
  608.                 ],
  609.                 [
  610.                     1550,
  611.                     200
  612.                 ],
  613.                 [
  614.                     1600,
  615.                     200
  616.                 ],
  617.                 [
  618.                     1650,
  619.                     200
  620.                 ],
  621.                 [
  622.                     1700,
  623.                     200
  624.                 ],
  625.                 [
  626.                     1750,
  627.                     200
  628.                 ],
  629.                 [
  630.                     1800,
  631.                     200
  632.                 ],
  633.                 [
  634.                     1850,
  635.                     200
  636.                 ],
  637.                 [
  638.                     1900,
  639.                     200
  640.                 ],
  641.                 [
  642.                     1950,
  643.                     200
  644.                 ],
  645.                 [
  646.                     2000,
  647.                     200
  648.                 ]
  649.             ],
  650.             name: "Power Rated",
  651.             symbol: "none",
  652.             markPoint: {
  653.                 label: {
  654.                     formatter: "{c}kW"
  655.                 },
  656.                 data: [
  657.                     {
  658.                         type: "max"
  659.                     }
  660.                 ],
  661.                 symbol: "arrow",
  662.                 symbolSize: 80,
  663.                 symbolRotate: 180,
  664.                 itemStyle: {
  665.                     color: "#748a83"
  666.                 }
  667.             },
  668.             areaStyle: {
  669.                 color: "#acd8cb"
  670.             },
  671.             lineStyle: {
  672.                 color: "#acd8cb"
  673.             },
  674.             itemStyle: {
  675.                 color: "#acd8cb"
  676.             }
  677.         },
  678.         {
  679.             type: "line",
  680.             data: [
  681.                 [
  682.                     0,
  683.                     0
  684.                 ],
  685.                 [
  686.                     50,
  687.                     8.559919436052366
  688.                 ],
  689.                 [
  690.                     100,
  691.                     17.119838872104733
  692.                 ],
  693.                 [
  694.                     150,
  695.                     25.679758308157098
  696.                 ],
  697.                 [
  698.                     200,
  699.                     34.239677744209466
  700.                 ],
  701.                 [
  702.                     250,
  703.                     42.79959718026183
  704.                 ],
  705.                 [
  706.                     300,
  707.                     51.359516616314195
  708.                 ],
  709.                 [
  710.                     350,
  711.                     59.919436052366564
  712.                 ],
  713.                 [
  714.                     400,
  715.                     68.47935548841893
  716.                 ],
  717.                 [
  718.                     450,
  719.                     77.0392749244713
  720.                 ],
  721.                 [
  722.                     500,
  723.                     85.59919436052365
  724.                 ],
  725.                 [
  726.                     550,
  727.                     94.15911379657602
  728.                 ],
  729.                 [
  730.                     600,
  731.                     102.71903323262839
  732.                 ],
  733.                 [
  734.                     650,
  735.                     111.27895266868076
  736.                 ],
  737.                 [
  738.                     700,
  739.                     119.83887210473313
  740.                 ],
  741.                 [
  742.                     750,
  743.                     128.3987915407855
  744.                 ],
  745.                 [
  746.                     800,
  747.                     136.95871097683786
  748.                 ],
  749.                 [
  750.                     850,
  751.                     145.51863041289025
  752.                 ],
  753.                 [
  754.                     900,
  755.                     154.0785498489426
  756.                 ],
  757.                 [
  758.                     950,
  759.                     162.63846928499498
  760.                 ],
  761.                 [
  762.                     993,
  763.                     170
  764.                 ],
  765.                 [
  766.                     1000,
  767.                     170
  768.                 ],
  769.                 [
  770.                     1050,
  771.                     170
  772.                 ],
  773.                 [
  774.                     1100,
  775.                     170
  776.                 ],
  777.                 [
  778.                     1150,
  779.                     170
  780.                 ],
  781.                 [
  782.                     1200,
  783.                     170
  784.                 ],
  785.                 [
  786.                     1250,
  787.                     170
  788.                 ],
  789.                 [
  790.                     1300,
  791.                     170
  792.                 ],
  793.                 [
  794.                     1350,
  795.                     170
  796.                 ],
  797.                 [
  798.                     1400,
  799.                     170
  800.                 ],
  801.                 [
  802.                     1450,
  803.                     170
  804.                 ],
  805.                 [
  806.                     1500,
  807.                     170
  808.                 ],
  809.                 [
  810.                     1550,
  811.                     170
  812.                 ],
  813.                 [
  814.                     1600,
  815.                     170
  816.                 ],
  817.                 [
  818.                     1650,
  819.                     170
  820.                 ],
  821.                 [
  822.                     1700,
  823.                     170
  824.                 ],
  825.                 [
  826.                     1750,
  827.                     170
  828.                 ],
  829.                 [
  830.                     1800,
  831.                     170
  832.                 ],
  833.                 [
  834.                     1850,
  835.                     170
  836.                 ],
  837.                 [
  838.                     1900,
  839.                     170
  840.                 ],
  841.                 [
  842.                     1950,
  843.                     170
  844.                 ],
  845.                 [
  846.                     2000,
  847.                     170
  848.                 ]
  849.             ],
  850.             name: "Power Rated 85%",
  851.             symbol: "none",
  852.             areaStyle: {
  853.                 color: "#5ebca6"
  854.             },
  855.             lineStyle: {
  856.                 color: "#5ebca6"
  857.             },
  858.             itemStyle: {
  859.                 color: "#5ebca6"
  860.             }
  861.         }
  862.     ]
  863. };
  864.     if (option && typeof option === 'object') {
  865.      myChart.setOption(option);
  866.     }
  867.  
  868.     window.addEventListener('resize', myChart.resize);</script></body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!