test.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <link href="https://fonts.googleapis.com/css?family=Lobster+Two:700i" rel="stylesheet">
  5. <script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
  6. <script src='../dist/echarts-liquidfill.js'></script>
  7. </head>
  8. <body>
  9. <style>
  10. html, body {
  11. width: 100%;
  12. height: 100%;
  13. margin: 0;
  14. background: #F1F7FF;
  15. }
  16. #main {
  17. padding: 20px;
  18. }
  19. h1 {
  20. margin: 20px;
  21. font-size: 20px;
  22. font-weight: bold;
  23. text-align: center;
  24. color: #D94854;
  25. }
  26. .chart {
  27. width: 30%;
  28. margin: 20px auto;
  29. height: 300px;
  30. border: 1px solid #D94854;
  31. }
  32. p {
  33. text-align: center;
  34. }
  35. </style>
  36. <h1>ECharts LiquidFill Example</h1>
  37. <p>This is an example showing liquidFill chart that fills the container.</p>
  38. <div id='main'>
  39. <div class="chart" id="chart"></div>
  40. </div>
  41. <script>
  42. var options = {
  43. series: [{
  44. type: 'liquidFill',
  45. waveAnimation: false,
  46. animation: false,
  47. data: [{
  48. value: 0.7
  49. }]
  50. }]
  51. };
  52. var chart = echarts.init(document.getElementById('chart'));
  53. chart.setOption(options);
  54. window.onresize = function () {
  55. chart.resize();
  56. };
  57. </script>
  58. <script>
  59. var _hmt = _hmt || [];
  60. (function() {
  61. var hm = document.createElement('script');
  62. hm.src = '//hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f';
  63. var s = document.getElementsByTagName('script')[0];
  64. s.parentNode.insertBefore(hm, s);
  65. })();
  66. </script>
  67. </body>
  68. </html>