components_pie_chart_vue.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  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(pie)"></title>
  9. <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  10. <!-- <script include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script> -->
  11. <script include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  12. <style>
  13. #main {
  14. margin: 0 auto;
  15. width: 100%;
  16. height: 100%;
  17. }
  18. .sm-component-chart .sm-component-collapse-card__content {
  19. height: 300px;
  20. }
  21. </style>
  22. </head>
  23. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  24. <div id="main">
  25. <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284"> </sm-web-map>
  26. <sm-chart icon-class="" :style="chartStyle" :dataset="dataset" :dataset-options="datasetOptions"></sm-chart>
  27. </div>
  28. <script>
  29. new Vue({
  30. el: "#main",
  31. data() {
  32. return {
  33. chartStyle: {
  34. position: "absolute",
  35. bottom: "10px",
  36. right: "10px"
  37. },
  38. dataset: new SuperMap.Components.commontypes.iPortalDataParameter({
  39. url: "https://iportal.supermap.io/iportal/web/datas/676516522",
  40. maxFeatures: 20
  41. }),
  42. datasetOptions: [
  43. {
  44. seriesType: "pie", //图表类型
  45. isStastic: true, //是否统计, 默认不统计
  46. xField: "机场", //x坐标轴数据字段
  47. yField: "同比增速%" //统计的数据,legned默认名字
  48. }
  49. ]
  50. };
  51. }
  52. });
  53. </script>
  54. </body>
  55. </html>