index.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title></title>
  8. <style type="text/css">
  9. html,
  10. body,
  11. .ui-echarts {
  12. padding: 0;
  13. margin: 0;
  14. overflow: hidden;
  15. background-color: transparent;
  16. width: 100%;
  17. height: 100%;
  18. }
  19. .ui-echarts {
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="ui-echarts" id="main" style="width: 100%;width: 100%;"></div>
  25. <script type="text/javascript" src="./uni.webview.1.5.4.js"></script>
  26. <script type="text/javascript" src="./echarts.min.js"></script>
  27. <!-- <script type="text/javascript" src="./ecStat.min.js"></script>
  28. <script type="text/javascript" src="./ecSimpleTransform.min.js"></script> -->
  29. <script type="text/javascript">
  30. let isReady = false;
  31. let uiChart = null;
  32. /**
  33. * 1: 准备就绪(webview)
  34. * 2: 初始化echarts
  35. * 3: 设置echarts option
  36. * 4: 导出图片
  37. * 5: 销毁echarts实例
  38. * */
  39. /**
  40. * 初始化图表配置
  41. * */
  42. function setOption (option) {
  43. if (!uiChart) {
  44. return;
  45. }
  46. uiChart.clear();
  47. uiChart.setOption(option);
  48. postMessage({ state: 3 });
  49. }
  50. /**
  51. * 初始化图表
  52. * */
  53. function initChart () {
  54. if (uiChart) {
  55. return;
  56. }
  57. uiChart = echarts.init(document.getElementById('main'));
  58. // echarts ready
  59. postMessage({ state: 2 });
  60. }
  61. /**
  62. * 销毁实例
  63. * */
  64. function clearChart() {
  65. if (uiChart) {
  66. return;
  67. }
  68. uiChart.clear();
  69. postMessage({ state: 5 });
  70. }
  71. /**
  72. * 导出图片
  73. * */
  74. function toImage () {
  75. const imageStr = uiChart.getDataURL({
  76. // [png|jpg|svg]注意:png, jpg 只有在 canvas 渲染器的时候可使用,svg 只有在使用 svg 渲染器的时候可用
  77. // type: 'png',
  78. // 导出的图片分辨率比例,默认为 1。
  79. pixelRatio: 2,
  80. backgroundColor: 'transparent',
  81. // 忽略组件的列表,例如要忽略 toolbox 就是 ['toolbox']
  82. // excludeComponents?: Array.<string>
  83. });
  84. postMessage({ state: 4, base64: imageStr });
  85. }
  86. /**
  87. * 推送消息
  88. * @onPostMessage
  89. * */
  90. function postMessage (data) {
  91. if (!isReady) {
  92. console.error('ui-echarts 未准备就绪');
  93. return;
  94. }
  95. uni.postMessage({ data: data });
  96. }
  97. document.addEventListener('UniAppJSBridgeReady', function() {
  98. isReady = true;
  99. // ready
  100. postMessage({ state: 1 });
  101. // init
  102. initChart();
  103. });
  104. </script>
  105. </body>
  106. </html>