fuyuhang
/
Project_yhfu
огледало од http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_componentsBorder_Vue"></title>
    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
    <script
      include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
      src="../../dist/mapboxgl/include-mapboxgl.js"
    ></script>
    <style>
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
      }

      #main {
        margin: 0 auto;
        width: 100%;
        height: 100%;
      }
      .all-borders {
        width: 98%;
        margin: 0 auto;
        position: absolute;
        left: 1%;
        bottom: 0px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap-reverse;
        align-content: flex-start;
      }
      .common-border {
        margin-bottom: 10px;
        width: 300px;
        height: 230px;
        z-index: 1000;
      }

      .select-group {
        display: flex;
        align-items: center;
        position: absolute;
        width: 240px;
        left: 40px;
        top: 40px;
      }
      .select-group span {
        color: #fff;
        font-size: 15px;
        margin-right: 10px;
      }
      .select-border {
        width: 110px;
      }
      .sm-component-select-selection {
        background: #262626;
        color: #fff;
      }
      .sm-component-select-dropdown-content ul::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: rgba(245, 245, 245, 0);
      }
      .sm-component-select-dropdown-content ul::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: gray;
      }
      .sm-component-select-dropdown {
        background: #262626;
      }
      .sm-component-select-dropdown-menu-item {
        color: #909399;
      }
      .sm-component-select-dropdown-menu-item-active {
        background: #dddcdc !important;
        color: #4f4f4f !important;
      }
      .sm-component-select-dropdown-menu-item-selected,
      .sm-component-select-dropdown-menu-item-selected:hover {
        background: #dddcdc !important;
        color: #4f4f4f !important;
      }
    </style>
  </head>

  <body>
    <div id="main">
      <!-- WebMap组件 -->
      <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="801571284" ref="map"></sm-web-map>
      <div class="all-borders">
        <!-- Border组件 -->
        <sm-border :type="borderType" class="common-border">
          <sm-chart icon-class="" :options="barChartOptions"></sm-chart>
        </sm-border>
        <!-- Border组件 -->
        <sm-border :type="borderType" class="common-border">
          <sm-chart icon-class="" :options="lineChartOptions"></sm-chart>
        </sm-border>
        <!-- Border组件 -->
        <sm-border :type="borderType" class="common-border">
          <sm-chart icon-class="" :options="scatterChartOptions"></sm-chart>
        </sm-border>
        <!-- Border组件 -->
        <sm-border :type="borderType" class="common-border">
          <sm-chart icon-class="" :options="radarChartOptions"></sm-chart>
        </sm-border>
        <!-- Border组件 -->
        <sm-border :type="borderType" class="common-border">
          <sm-chart icon-class="" :options="pieChartOptions"></sm-chart>
        </sm-border>
        <!-- Border组件 -->
        <sm-border :type="borderType" class="common-border">
          <sm-chart icon-class="" :options="gaugeChartOptions"></sm-chart>
        </sm-border>
      </div>

      <!-- 切换{{resources.text_opt_border}}类型 -->
      <div class="select-group">
        <span>{{ resources.text_sel_border }}:</span>
        <sm-select class="select-border" v-model="borderType">
          <sm-select-option value="border1">{{ resources.text_opt_border }}1</sm-select-option>
          <sm-select-option value="border2">{{ resources.text_opt_border }}2</sm-select-option>
          <sm-select-option value="border3">{{ resources.text_opt_border }}3</sm-select-option>
          <sm-select-option value="border4">{{ resources.text_opt_border }}4</sm-select-option>
          <sm-select-option value="border5">{{ resources.text_opt_border }}5</sm-select-option>
          <sm-select-option value="border6">{{ resources.text_opt_border }}6</sm-select-option>
          <sm-select-option value="border7">{{ resources.text_opt_border }}7</sm-select-option>
          <sm-select-option value="border8">{{ resources.text_opt_border }}8</sm-select-option>
          <sm-select-option value="border9">{{ resources.text_opt_border }}9</sm-select-option>
          <sm-select-option value="border10">{{ resources.text_opt_border }}10</sm-select-option>
          <sm-select-option value="border11">{{ resources.text_opt_border }}11</sm-select-option>
          <sm-select-option value="border12">{{ resources.text_opt_border }}12</sm-select-option>
          <sm-select-option value="border13">{{ resources.text_opt_border }}13</sm-select-option>
        </sm-select>
      </div>
    </div>

    <script>
      new Vue({
        el: '#main',
        data() {
          var chartXAxis = {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
              rotate: 0,
              fontFamily: 'MicrosoftYaHei'
            },
            show: true,
            name: '',
            nameGap: 2,
            nameLocation: 'end',
            type: 'category'
          };
          var chartYAxis = {
            name: '',
            axisLine: {
              lineStyle: {}
            },
            axisLabel: {
              rotate: 0,
              fontFamily: 'MicrosoftYaHei'
            },
            show: true,
            splitArea: {
              show: false
            },
            nameGap: 5,
            nameLocation: 'end',
            type: 'value',
            nameTextStyle: {
              padding: [0, 0, 5, 0]
            }
          };
          var chartGrid = {
            left: 50,
            right: 50,
            top: 35,
            bottom: 35
          };
          return {
            borderType: 'border7',
            // 和echarts一样的配置
            barChartOptions: {
              xAxis: chartXAxis,
              yAxis: chartYAxis,
              grid: chartGrid,
              series: [
                {
                  data: ['500', '800', '3000', '3617', '3400', '4200', '1842'],
                  name: 'Y2',
                  type: 'bar'
                },
                {
                  data: ['100', '520', '2000', '3340', '3900', '3300', '2500'],
                  name: 'Y1',
                  type: 'bar'
                },
                {
                  data: ['1', '1', '0', '0', '0', '1', '0'],
                  name: 'Y3',
                  emphasis: {
                    itemStyle: {}
                  },
                  type: 'bar'
                }
              ]
            },
            lineChartOptions: {
              xAxis: chartXAxis,
              yAxis: chartYAxis,
              grid: chartGrid,
              series: [
                {
                  data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
                  name: 'Y1',
                  emphasis: {
                    itemStyle: {}
                  },
                  type: 'line',
                  smooth: false
                },
                {
                  data: ['3400', '3617', '4200', '1842', '3000', '800', '500'],
                  name: 'Y2',
                  emphasis: {
                    itemStyle: {}
                  },
                  type: 'line',
                  smooth: false
                }
              ],
            },
            scatterChartOptions: {
              xAxis: chartXAxis,
              yAxis: chartYAxis,
              grid: chartGrid,
              series: [
                {
                  data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
                  name: 'Y1',
                  emphasis: {
                    itemStyle: {}
                  },
                  type: 'scatter'
                },
                {
                  data: ['3400', '3617', '4200', '1842', '3000', '800', '500'],
                  name: 'Y2',
                  emphasis: {
                    itemStyle: {}
                  },
                  type: 'scatter'
                }
              ]
            },
            radarChartOptions: {
              radar: {
                indicator: [
                  {
                    max: '500',
                    name: 'Mon'
                  },
                  {
                    max: '800',
                    name: 'Tue'
                  },
                  {
                    max: '3000',
                    name: 'Wed'
                  },
                  {
                    max: '3617',
                    name: 'Thu'
                  },
                  {
                    max: '3400',
                    name: 'Fri'
                  },
                  {
                    max: '4200',
                    name: 'Sat'
                  },
                  {
                    max: '1842',
                    name: 'Sun'
                  }
                ],
                shape: 'circle',
                splitArea: {
                  show: false
                },
                axisLine: {
                  lineStyle: {}
                },
                name: {
                  textStyle: {}
                },
                splitLine: {
                  lineStyle: {}
                },
                splitNumber: 5,
                radius: '70%'
              },
              grid: {
                top: 35,
                left: 50,
                bottom: 25
              },
              legend: {
                data: ['Y1'],
                textStyle: {},
                show: false,
                top: 'auto',
                bottom: 'auto'
              },
              series: [
                {
                  barWidth: '80%',
                  data: [
                    {
                      name: 'Y1',
                      value: ['100', '520', '2000', '3340', '3900', '3300', '2500']
                    }
                  ],
                  name: '示范数据',
                  emphasis: {
                    itemStyle: {}
                  },
                  type: 'radar'
                }
              ],
              tooltip: {
                axisPointer: {
                  shadowStyle: {},
                  type: 'shadow'
                },
                trigger: 'axis',
                textStyle: {
                  align: 'left'
                }
              },
              textStyle: {
                fontFamily: 'Microsoft YaHei Light'
              },
              title: {
                padding: [5, 0, 0, 20],
                x: 'left',
                text: '',
                textStyle: {
                  fontFamily: 'Microsoft YaHei Light',
                  fontWeight: '100'
                }
              }
            },
            pieChartOptions: {
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                x: 'left',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                show: true,
                top: 'auto',
                bottom: 'auto'
              },
              series: [
                {
                  name: '示范数据',
                  type: 'pie',
                  radius: '80%',
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  data: [
                    {
                      value: 500,
                      name: 'Mon'
                    },
                    {
                      value: 800,
                      name: 'Tue'
                    },
                    {
                      value: 3000,
                      name: 'Wed'
                    },
                    {
                      value: 3617,
                      name: 'Thu'
                    },
                    {
                      value: 3400,
                      name: 'Fri'
                    },
                    {
                      value: 4200,
                      name: 'Sat'
                    },
                    {
                      value: 1842,
                      name: 'Sun'
                    }
                  ]
                }
              ]
            },
            gaugeChartOptions: {
              tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
              },
              series: [
                {
                  name: '业务指标',
                  type: 'gauge',
                  radius: '100%',
                  pointer: {
                    width: 5
                  },
                  axisLine: {
                    lineStyle: {
                      // 属性lineStyle控制线条样式
                      width: 12
                    }
                  },
                  splitLine: {
                    // 分隔线
                    length: 6 // 属性length控制线长
                  },
                  axisTick: {
                    // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: {
                      // 属性lineStyle控制线条样式
                      color: 'auto'
                    }
                  },
                  detail: {
                    formatter: '{value}%',
                    fontSize: 20
                  },
                  data: [{ value: 50 }]
                }
              ]
            }
          };
        },
        mounted() {
          //{{resources.text_opt_border}}最好配上透明主题， body设置一个底色
          SuperMap.Components.setTheme({
            textColor: '#eee',
            background: 'rgba(0,0,0,0)',
            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad', '#96dee8']
          });
          document.getElementsByTagName('body')[0].style.background = 'rgba(0, 0, 0, 0.9)';
        }
      });
    </script>
  </body>
</html>