xtchart.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ECahrt 示例</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <!--标准mui.css-->
  10. <link rel="stylesheet" href="../../css/mui.min.css">
  11. <!--App自定义的css-->
  12. <link rel="stylesheet" type="text/css" href="../../css/app.css" />
  13. <style>
  14. .chart {
  15. height: 200px;
  16. margin: 0px;
  17. padding: 0px;
  18. }
  19. h5 {
  20. margin-top: 30px;
  21. font-weight: bold;
  22. }
  23. h5:first-child {
  24. margin-top: 15px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <header class="mui-bar mui-bar-nav">
  30. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  31. <h1 class="mui-title">血糖监测</h1>
  32. <a id="xtAdd" class="mui-icon mui-pull-right" style="font-size: 16px;padding-top: 14px;" data-url="xtjc.html">新增</a>
  33. </header>
  34. <div class="mui-content">
  35. <div class="mui-content-padded">
  36. <h5>总计</h5>
  37. <div class="chart" id="pieChart"></div>
  38. <h5>走势图</h5>
  39. <div class="chart" id="lineChart"></div>
  40. </div>
  41. </div>
  42. <script src="../../js/mui.min.js"></script>
  43. <script src="../../libs/echarts-all.js"></script>
  44. <script>
  45. document.getElementById("xtAdd").addEventListener('tap', function() {
  46. var url = this.getAttribute('data-url');
  47. mui.openWindow({
  48. url: url
  49. });
  50. });
  51. var getOption = function(chartType) {
  52. var chartOption = chartType == 'pie' ? {
  53. calculable: false,
  54. series: [{
  55. name: '访问来源',
  56. type: 'pie',
  57. radius: '65%',
  58. center: ['50%', '50%'],
  59. data: [{
  60. value: 335,
  61. name: '偏高(20%)'
  62. }, {
  63. value: 200,
  64. name: '偏低(13%)'
  65. }, {
  66. value: 1548,
  67. name: '正常(67%)'
  68. }]
  69. }]
  70. } : {
  71. legend: {
  72. data: ['血糖走势']
  73. },
  74. grid: {
  75. x: 35,
  76. y: 30,
  77. },
  78. toolbox: {
  79. show: false,
  80. feature: {
  81. mark: {
  82. show: true
  83. },
  84. dataView: {
  85. show: true,
  86. readOnly: false
  87. },
  88. magicType: {
  89. show: true,
  90. type: ['line', 'bar']
  91. },
  92. restore: {
  93. show: true
  94. },
  95. saveAsImage: {
  96. show: true
  97. }
  98. }
  99. },
  100. calculable: false,
  101. xAxis: [{
  102. type: 'category',
  103. data: ['9-28', '10-3', '10-10', '10-17', '10-24', '11-1', '11-8', '11-15', '11-23', '11-30', '12-6', '12-13']
  104. }],
  105. yAxis: [{
  106. type: 'value',
  107. splitArea: {
  108. show: true
  109. }
  110. }],
  111. series: [{
  112. name: '血糖走势',
  113. type: chartType,
  114. data: [43.0, 34.9, 47.0, 33.2, 45.6, 56.7, 55.6, 62.2, 32.6, 40.0, 36.4, 53.3]
  115. }]
  116. };
  117. return chartOption;
  118. };
  119. var byId = function(id) {
  120. return document.getElementById(id);
  121. };
  122. var lineChart = echarts.init(byId('lineChart'));
  123. lineChart.setOption(getOption('line'));
  124. var pieChart = echarts.init(byId('pieChart'));
  125. pieChart.setOption(getOption('pie'));
  126. byId("echarts").addEventListener('tap', function() {
  127. var url = this.getAttribute('data-url');
  128. plus.runtime.openURL(url);
  129. }, false);
  130. </script>
  131. </body>
  132. </html>