components_chart_vue.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8" />
  8. <title data-i18n="resources.title_componentsChart_Vue"></title>
  9. <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  10. <script include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  11. <style>
  12. #main {
  13. margin: 0 auto;
  14. width: 100%;
  15. height: 100%;
  16. }
  17. .sm-component-chart .sm-component-collapse-card__content {
  18. height: 300px;
  19. }
  20. </style>
  21. </head>
  22. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  23. <div id="main">
  24. <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284"></sm-web-map>
  25. <sm-chart
  26. icon-class=""
  27. :style="chartStyle"
  28. :options="echartOptions"
  29. :dataset="dataset"
  30. :dataset-options="datasetOptions"
  31. background="rgba(255, 255, 255, 0.5)"
  32. ></sm-chart>
  33. <sm-chart
  34. icon-class=""
  35. :style="chartStyle1"
  36. :options="echartOptions1"
  37. :dataset="dataset"
  38. :dataset-options="datasetOptions1"
  39. background="rgba(255, 255, 255, 0.5)"
  40. ></sm-chart>
  41. <sm-chart
  42. icon-class=""
  43. :style="chartStyle2"
  44. :options="echartOptions2"
  45. :dataset="dataset"
  46. :dataset-options="datasetOptions2"
  47. background="rgba(255, 255, 255, 0.5)"
  48. ></sm-chart>
  49. </div>
  50. <script>
  51. new Vue({
  52. el: '#main',
  53. data() {
  54. return {
  55. chartStyle: {
  56. position: "absolute",
  57. bottom: "10px",
  58. right: "10px"
  59. },
  60. chartStyle1: {
  61. position: "absolute",
  62. bottom: "10px",
  63. right: "420px"
  64. },
  65. chartStyle2: {
  66. position: "absolute",
  67. bottom: "10px",
  68. right: "830px"
  69. },
  70. dataset: new SuperMap.Components.commontypes.iPortalDataParameter({
  71. url: "https://iportal.supermap.io/iportal/web/datas/676516522",
  72. maxFeatures: 20
  73. }),
  74. // echarts中涉及到超图数据series和坐标轴的字段的配置
  75. datasetOptions: [
  76. {
  77. seriesType: "bar", //图表类型
  78. isStastic: true, //是否统计, 默认不统计
  79. isStack: true, //是否堆叠, 默认不堆叠
  80. xField: "机场", //x坐标轴数据字段
  81. yField: "2016起降架次(架次)" //统计的数据,legned默认名字
  82. },
  83. {
  84. seriesType: "bar",
  85. isStastic: true,
  86. isStack: true,
  87. xField: "机场",
  88. yField: "2017起降架次(架次)",
  89. }
  90. ],
  91. datasetOptions1: [
  92. {
  93. seriesType: "line", //图表类型
  94. isStastic: true, //是否统计, 默认不统计
  95. isStack: true, //是否堆叠, 默认不堆叠
  96. xField: "机场", //x坐标轴数据字段
  97. yField: "2016旅客吞吐量(人次)" //统计的数据,legned默认名字
  98. },
  99. {
  100. seriesType: "line",
  101. isStastic: true,
  102. isStack: true,
  103. xField: "机场",
  104. yField: "2017旅客吞吐量(人次)"
  105. }
  106. ],
  107. datasetOptions2: [
  108. {
  109. seriesType: "scatter", //图表类型
  110. isStastic: true, //是否统计, 默认不统计
  111. isStack: false, //是否堆叠, 默认不堆叠
  112. xField: "机场", //x坐标轴数据字段
  113. yField: "同比增速%" //统计的数据,legned默认名字
  114. }
  115. ],
  116. // 和echarts一样的配置
  117. echartOptions: {
  118. legend: {data: ['2016起降架次(架次)', '2017起降架次(架次)']}, //与yField数据一致
  119. tooltip: {formatter: "{b0}: {c0}"},
  120. grid:{
  121. top: 30,
  122. bottom: 60,
  123. left: 60,
  124. right: 30
  125. }
  126. },
  127. echartOptions1: {
  128. legend: {data: ['2016旅客吞吐量(人次)', '2017旅客吞吐量(人次)']}, //与yField数据一致
  129. tooltip: {formatter: "{b0}: {c0}"},
  130. grid:{
  131. top: 30,
  132. bottom: 60,
  133. left: 60,
  134. right: 30
  135. }
  136. },
  137. echartOptions2: {
  138. legend: {data: ['同比增速%']},//与yField数据一致
  139. tooltip: {formatter: "{b0}: {c0}"},
  140. }
  141. };
  142. }
  143. })
  144. </script>
  145. </body>
  146. </html>