ssh_visualization/songhua-ui/src/views/index/index.vue

<template>
  <div class="body">
    <div class="header">
      <h1 class="header_title">松花湖景区通</h1>
      <span class="time">2024年4月23日 星期二 上午 9:51:54</span>
    </div>
    <div class="container">
      <div class="left">
        <div class="Visitorsflowrate">
          <div class="all_title">
            <h3 class="PartTitle">景区人流量排行榜TOP5</h3>
            <div class="selectDate" data-objname="ticketType">
              <span class="_selectData">2020年04月</span>
              <a class="icon_more" @click="moreMeunSmalLeft_1 = !moreMeunSmalLeft_1;"> &gt; </a>
              <div class="_moreMenu" v-if="moreMeunSmalLeft_1">
                <ul >
                  <li class="change" @click="clickTimeFindData('景区人流量排行榜TOP5',index)" v-for="(item,index) in dateList" :key="item.date" :data-date="item.date">{{ item.label }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="ticketType">
            <div class="ticketLeft">
              <h4 class="tableTitle">景区名</h4>
              <ul>
                <li>
                  <em>1</em>
                  <span>成人票</span>
                </li>
                <li>
                  <em>2</em>
                  <span>儿童票</span>
                </li>
                <li>
                  <em>3</em>
                  <span>大门票+船票</span>
                </li>
                <li>
                  <em>4</em>
                  <span>免费票</span>
                </li>
                <li>
                  <em>5</em>
                  <span>亲子套票</span>
                </li>
              </ul>
            </div>
            <div class="ticketRight">
              <h4 class="tableTitle">平台占比</h4>
              <div class="chart">
                <div id="chartRankOneMb" style="width:200px;height:240px;"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="TouristData">
          <div class="all_title">
            <h3 class="PartTitle">景区近一个月游客排行榜TOP5</h3>
            <div class="selectDate" data-objname="ticketType">
              <span class="_selectData">2020年04月</span>
              <a class="icon_more" @click="moreMeunSmalLeft_2 = !moreMeunSmalLeft_2;"> &gt; </a>
              <div class="_moreMenu" v-if="moreMeunSmalLeft_2">
                <ul >
                  <li class="change" @click="clickTimeFindData('景区近一个月游客排行榜TOP5',index)" v-for="(item,index) in dateList" :key="item.date" :data-date="item.date">{{ item.label }}</li>
                </ul>
            </div>
            </div>
          </div>
          <div class="Tourischart">
            <div id="chartRankOneMonth" style="width: 500px;height:300px;"></div>
          </div>
        </div>
        <div class="SalesTrend">
          <div class="all_title">
            <h3 class="PartTitle">景区近一年销售趋势排行榜TOP5</h3>
            <div class="selectDate" data-objname="ticketType">
              <span class="_selectData">2020年04月</span>
              <a class="icon_more" @click="moreMeunSmalLeft_3 = !moreMeunSmalLeft_3;"> &gt; </a>
              <div class="_moreMenu" v-if="moreMeunSmalLeft_3">
                <ul >
                  <li class="change" @click="clickTimeFindData('景区近一年销售趋势排行榜TOP5',index)" v-for="(item,index) in dateList" :key="item.date" :data-date="item.date">{{ item.label }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="Saleschart">
            <div id="chartRankOneSale" style="width: 500px;height:220px;"></div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="regionData">
          <!--通知公告选项卡开始-->
          <div class="region_tab2">
            <div class="div_tab2">
              <a @click="tabClick(1)" v-bind:class="regionInShowOne?'df_on':''">游船视图</a>
              <a @click="tabClick(2)" v-bind:class="regionInShowTwo?'df_on':''">游客视图</a>
            </div>
            <div class="regionIn_tab2 one" v-show="regionInShowOne">
              <div class="borp">
                <div class="selectDate">
                  <div class="_moreMenu" style="display: block;top: 34px;width: 120px;margin-right: -20px">
                    <ul id="myList">
<!--                      <li class="change">游船1</li>-->
<!--                      <li>游船2</li>-->
<!--                      <li>游船3</li>-->
<!--                      <li>游船4</li>-->
<!--                      <li>游船5</li>-->
                    </ul>
                  </div>
                </div>
                <!--游船视图页面-->
                    <div id="map" style="margin-top: 50px; width: 740px; height: 620px"></div>
<!--                <baidu-map style="margin-top: 50px" :mapStyle="{style : 'midnight'}" class="region_tab2"-->
<!--                           :center="{lng: 126.84031, lat: 43.658648}" :zoom="12" :scroll-wheel-zoom="true"-->
<!--                           @ready="handler">-->
<!--                </baidu-map>-->
              </div>
            </div>
            <div class="regionIn_tab2 two" v-show="regionInShowTwo">
              <div class="wholeCountry">
                <h4>当日平台总成交额 </h4>
                <div class="money">
                  <span>{{ getFirstDigit(0) }}</span>
                  <span>{{ getFirstDigit(1) }}</span>
                  <span>{{ getFirstDigit(2) }}</span>
                  <span>{{ getFirstDigit(3) }}</span>
                  <span>{{ getFirstDigit(4) }}</span>
                  <span>{{ getFirstDigit(5) }}</span>
                  <span>{{ getFirstDigit(6) }}</span>
                  <span>{{ getFirstDigit(7) }}</span>
                </div>
                <div class="_count">当日累计总游客数
                  <ins>{{ peopleNum }}</ins>
                  人
                </div>
              </div>
              <div class="map">
                <div id="mapByPerson" style="width: 740px;height: 426px"></div>
              </div>

            </div>
          </div>
          <!--通知公告结束-->
        </div>
        <div class="moddlebot">
          <div class="ProvinceData">
            <h3 class="PartTitle">客源地省份排名</h3>
            <div class="Saleschart">
              <div id="chartRankOneCity" style="width: 250px;height:200px;"></div>
            </div>
          </div>
          <div class="AgeData">
            <h3 class="PartTitle">游客年龄比例</h3>
            <div class="Saleschart">
              <div id="chartRankOneAge" style="width: 200px;height:200px;padding: 0"></div>
            </div>
          </div>
          <div class="GenderData">
            <h3 class="PartTitle">游客男女比例</h3>
            <div class="GenderChart">
              <div class="genderBili">
                <div class="man">
                  <i class="icon_man"></i>
                  <strong> 男士60%</strong>
                </div>
                <div class="woman">
                  <i class="icon_woman"></i>
                  <strong> 女士40%</strong>
                </div>
                <div class="_line">
                  <div class="_line_man" style="width:60%;"></div>
                  <div class="_line_woman" style="width:40%;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="OTA_ranking">
          <ul>
            <li>
              <img src="@/assets/images/piao.png"/>
              <em>今日售票数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
            <li>
              <img src="@/assets/images/piao.png"/>
              <em>今日退票数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
            <li>
              <img src="@/assets/images/people.png"/>
              <em>今日入园数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
            <li>
              <img src="@/assets/images/people.png"/>
              <em>今日出园数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
          </ul>
        </div>
        <div class="Forecast">
          <h3 class="PartTitle">停车场概况统计</h3>
          <div class="ForecastData">
            <div class="Forecastchart">
              <div id="chartRankOnePark" style="width: 250px;height:250px"></div>
            </div>
            <ul class="stopList">
              <li>
                <span>总车位数</span>
                <span>1600</span>
              </li>
              <li>
                <span>当日停车费营收</span>
                <span>600</span>
              </li>
              <li>
                <span>当月停车费营收</span>
                <span>1600</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="paymentCount">
          <h3 class="PartTitle">近一个月平台购票渠道和支付方式统计</h3>
          <div class="Saleschart">
            <div id="chartRankOnePay1" style="width: 250px;height:210px;display: inline-block"></div>
            <div id="chartRankOnePay2" style="width: 250px;height:210px;display: inline-block"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import * as echarts from 'echarts'
import {getMap} from "@/api/ship/diqiu";
import {getShipRoute} from "@/api/ship/shipMapping";


export default {
  name: "songhuaIndex",
  data() {
    return {
      moreMeunSmalLeft_1: false,
      moreMeunSmalLeft_2: false,
      moreMeunSmalLeft_3: false,
      regionInShowOne: false,
      regionInShowTwo: true,
      money: 15389740,
      peopleNum: 234856,
      dataSource: [],
      map:[],
      dateList: [
        { date: '2020-04', label: '2020年04月' },
        { date: '2020-03', label: '2020年03月' },
        { date: '2020-02', label: '2020年02月' },
        { date: '2020-01', label: '2020年01月' },
        { date: '2019-12', label: '2019年12月' }
      ]
    }
  },
  mounted() {
    //近一个月排行
    this.chartRankOneMonthGet([
      ['product', '本月', '上月'],
      ['动物园', 100, 150],
      ['五龙潭', 55, 85],
      ['三清观', 65, 88],
      ['植物园', 88, 15]
    ])
    //近一年销售
    this.chartRankOneSaleGet();
    //客源地省份
    this.chartRankOneCityGet();
    //游客年龄
    this.chartRankOneAgeGet();
    //支付方式与购买渠道
    this.chartRankOnePayGet();
    //停车场
    this.chartRankOneParkGet();
    //人流量排行
    this.chartRankOneMbsGet([60, 35, 20, 8, 5],[100, 100, 100, 100, 100])
    //地图
    this.getMapByPerson();
    let _this = this;
    setInterval(function () {
      _this.money += Math.round(Math.random() * 100);
      _this.peopleNum += Math.round(Math.random() * 100);
    }, 3000)
  },
  created() {
    // this.selectShipRoute()
    this.handler();
  },
  methods: {
    clickTimeFindData(str,i){
       if (str==='景区人流量排行榜TOP5'){
         if (i===0){
           this.chartRankOneMbsGet([60, 35, 20, 8, 5],[100, 100, 100, 100, 100])
         }
         if (i===1){
           this.chartRankOneMbsGet([55, 50, 40, 32, 22],[100, 100, 100, 100, 100])
         }
         if (i===2){
           this.chartRankOneMbsGet([77, 55, 44, 32, 11],[100, 100, 100, 100, 100])
         }
       }
       if (str==='景区近一年销售趋势排行榜TOP5'){

       }
      if (str==='景区近一个月游客排行榜TOP5'){
        if (i===0){
          this.chartRankOneMonthGet([
            ['product', '本月', '上月'],
            ['动物园', 450, 250],
            ['五龙潭', 350, 210],
            ['三清观', 120, 456],
            ['植物园', 88, 555]
          ])
        }
        if (i===1){
          this.chartRankOneMonthGet([
            ['product', '本月', '上月'],
            ['动物园', 123, 423],
            ['五龙潭', 43, 123],
            ['三清观', 444, 333],
            ['植物园', 444, 123]
          ])
        }
        if (i===2){
          this.chartRankOneMonthGet([
            ['product', '本月', '上月'],
            ['动物园', 345, 535],
            ['五龙潭', 234, 423],
            ['三清观', 222, 333],
            ['植物园', 333, 222]
          ])
        }
      }
    },
    //地图
    handler() {
      getShipRoute().then(res => {
        if (res.code == 200) {
          this.dataSource = res.data
          this.map = new BMap.Map('map'); // 创建Map实例
          this.map.centerAndZoom(new BMap.Point(126.607589,43.802168), 11); // 初始化地图,设置中心点坐标和地图级别
          this.map.enableScrollWheelZoom(true);
          let mapStyle ={
            style : 'midnight',
          };
          this.map.setMapStyle(mapStyle);
          let marker;
          let polyline;
          let opts;
          let ul;
          let dataList = this.dataSource
          for (let i = 0; i < dataList.length; i++) {
            let pointArray = [];
            for (let j = 0; j < dataList[i].polylinePath.length; j++) {
              pointArray.push(new BMap.Point(dataList[i].polylinePath[j].lng, dataList[i].polylinePath[j].lat))
            }
            polyline = new BMap.Polyline(pointArray, {strokeColor: dataList[i].color, strokeWeight: 5, strokeOpacity: 0.5});   //创建折线
            // 创建小船图标
            var myIcon = new BMap.Icon(require("@/assets/images/ship.png"), new BMap.Size(52, 26));
            marker = new BMap.Marker(new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat),{icon:myIcon}); // 创建点

            opts = {
              width: 100,     // 信息窗口宽度
              height: 80,     // 信息窗口高度
              title: "游船信息", // 信息窗口标题
            }
            // marker添加点击事件
            marker.addEventListener('mouseover', function () {
              this.map.openInfoWindow(new BMap.InfoWindow("游船名称:" + dataList[i].shipName + "</br>" + "游船型号:" + dataList[i].shipType + "</br>" + "驱动类型:" + dataList[i].propulsion + "</br>", opts), new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat));
            });
            marker.addEventListener('mouseout', function () {
              this.map.closeInfoWindow();
            });
            this.map.addOverlay(polyline);
            this.map.addOverlay(marker);

          }
          ul = document.getElementById('myList');
          // 循环数组中的每个项目
          dataList.forEach(function(item) {
            // 创建一个新的li元素
            var li = document.createElement('li');
            // 设置li元素的内容
            li.textContent = item.shipName;
            li.style.transform = 'translateX(22px)';
            // 将li元素添加到ul中
            ul.appendChild(li);
          });
        } else {
          this.$modal.msgError("查询失败");
        }
      })

    },
    // selectShipRoute() {
    //   getShipRoute().then(res => {
    //     if (res.code == 200) {
    //       this.dataSource = res.data
    //       console.log("this.dataSource", this.dataSource)
    //     } else {
    //       this.$modal.msgError("查询失败");
    //     }
    //   })
    // },
//https://echarts.apache.org/examples/zh/editor.html?c=line-stack
    chartRankOneMonthGet(source) {
      let option = {
        legend: {
          textStyle: {
            color: 'white'  // Set legend text color to white
          },
          right: '0'  // Align legend to the right
        },
        tooltip: {},
        dataset: {
          source: source
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fe6f66'
              }, {
                offset: 1,
                color: '#f09a62'
              }]),
            },
          },
        },
          {
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#4ac1d6'
                }, {
                  offset: 1,
                  color: '#50d496'
                }]),
              }

            },
          }]
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneMonth"));
      myChart.setOption(option);
    },
    chartRankOneAgeGet() {
      let option = {
        series: [
          {
            name: '人员比例',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold',
                formatter:'{b}:{c}\n {d}%',
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {name: '60岁以上', value: 16},
              {name: '40-60岁之间', value: 25},
              {name: '18岁之内', value: 18},
              {name: '18-40岁之间', value: 36}
            ]
          }
        ]
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneAge"));
      myChart.setOption(option);
    },
    //https://echarts.apache.org/examples/zh/editor.html?c=gauge-multi-title
    chartRankOneParkGet() {
      const gaugeData = [
        {
          value: 85,
          name: '已占用车位数',
          title: {
            offsetCenter: ['0%', '70%']
          },
          detail: {
            offsetCenter: ['0%', '105%']
          },

        }
      ];
      let option = {
        series: [
          {
            type: 'gauge',
            anchor: {
              show: true,
              showAbove: true,
              size: 18,
              itemStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.3, '#e3ce67'],
                  [0.7, '#2a86b6'],
                  [1, '#42c51d']
                ]
              }
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 8,
              length: '80%',
              offsetCenter: [0, '8%']
            },
            progress: {
              show: true,
              overlap: true,
              roundCap: true
            },

            data: gaugeData,
            title: {
              fontSize: 14
            },
            detail: {
              width: 40,
              height: 14,
              fontSize: 14,
              color: '#fff',
              backgroundColor: 'inherit',
              borderRadius: 3,
              formatter: '{value}%'
            }
          }
        ]
      };
      setInterval(function () {
        gaugeData[0].value = +(Math.random() * 100).toFixed(2);
        myChart.setOption({
          series: [
            {
              data: gaugeData
            }
          ]
        });
      }, 2000);
      let myChart = this.$echarts.init(document.getElementById("chartRankOnePark"));
      myChart.setOption(option);
    },
    chartRankOneSaleGet(xData,yData) {
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '景区1',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '景区2',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '景区3',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '景区4',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '景区5',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneSale"));
      myChart.setOption(option);
    },
    //https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category
    chartRankOneCityGet() {
      let option = {
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20,
                color: "rgba(255, 255, 255, 0.8)",
              },
              formatter: function (name) {
                return name + ": ";
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [
              "湖北省",
              "广东省",
              "江西省",
              "广西省",
              "湖南省",
            ],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            axisLabel: {
              textStyle: {
                fontSize: 13,
                color: "rgba(255, 255, 255, 0.8)",
                padding: [0, 0, 0, 10],
              },
              formatter: function (value) {
                return value
                  .toLocaleString()
                  .toString()
                  .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
              },
            },
            data: [60, 30, 10, 8, 5],
          },
        ],
        series: [
          {
            name: "车辆",
            type: "bar",
            zlevel: 1, //通过 zlevel 设置层级
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: function (params) {//柱状图设置不同颜色
                  // 给出颜色组
                  var colorList = ["#ee6767", "#92cc76", "#fac859", "#4a77dd", "#ba77fd"];
                  return colorList[params.dataIndex]
                },
              },
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c}%' // 显示数值和百分比
            },
            data: [60, 30, 10, 8, 5],
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 20,
            barGap: "-100%", //两条柱状图重合
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: "rgba(108, 254, 255, 0.3)",
                barBorderRadius: 10,
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneCity"));
      myChart.setOption(option);
    },
    //https://ppchart.com/#/今日各考场承载总考生数
    chartRankOnePayGet() {
      let result1 = this.chartRankOnePays([
        {
          value: 2154,
          name: "自助端",
        },
        {
          value: 3854,
          name: "微信端",
        },
        {
          value: 3515,
          name: "窗口端",
        },
        {
          value: 3515,
          name: "其他",
        }
      ],'购票渠道')
      let result2 = this.chartRankOnePays([
        {
          value: 1234,
          name: "微信",
        },
        {
          value: 2345,
          name: "现金",
        },
        {
          value: 3456,
          name: "支付宝",
        },
        {
          value: 1231,
          name: "银联",
        }
      ],'支付方式')
      let myChart1 = this.$echarts.init(document.getElementById("chartRankOnePay1"));
      let myChart2 = this.$echarts.init(document.getElementById("chartRankOnePay2"));
      myChart1.setOption(result1);
      myChart2.setOption(result2);
    },
    chartRankOnePays(data,title){
      let scale = 1;
      let echartData = data!=null?data:[];
      let rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 12 * scale,
          padding: [5, 4],
          align: "center",
        },
        total: {
          color: "#ffc72b",
          fontSize: 12 * scale,
          align: "center",
        },
        white: {
          color: "#fff",
          align: "center",
          fontSize: 12 * scale,
          padding: [21, 0],
        },
        blue: {
          color: "#49dff0",
          fontSize: 12 * scale,
          align: "center",
        },
        hr: {
          borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      return  {
        // backgroundColor: "#031f2d",
        tooltip: {},
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: title,
            textAlign: 'center',
            fill: 'white',
            width: 30,
            height: 30,
            fontSize: 14
          }
        },
        series: [
          {
            name: title,
            type: "pie",
            radius: ["32%", "40%"],
            hoverAnimation: false,
            color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
                  var total = 0;
                  var percent = 0;
                  echartData.forEach(function (value, index, array) {
                    total += value.value;
                  });
                  percent = ((params.value / total) * 100).toFixed(1);
                  return (
                    "{white|" +
                    params.name +
                    "}\n{hr|}\n{yellow|" +
                    params.value +
                    "}\n{blue|" +
                    percent +
                    "%}"
                  );
                },
                rich: rich,
              },
            },
            labelLine: {
              normal: {
                length: 30 * scale,
                length2: 0,
                lineStyle: {
                  color: "#0b5263",
                },
              },
            },
            data: echartData,
          },
        ],
      };
    },
    //https://blog.csdn.net/qq_43519782/article/details/118707267?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171393938516800186569476%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171393938516800186569476&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-9-118707267-null-null.142^v100^pc_search_result_base4&utm_term=%E6%A8%AA%E5%90%91%E6%9F%B1%E5%9B%BE%E9%87%8D%E5%90%88&spm=1018.2226.3001.4187
    chartRankOneMbsGet(data,maxdata) {
      let option = {
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "0%",
          containLabel: true,
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "shadow",
        //   },
        //   confine: true,
        //   textStyle: {
        //     fontSize: 12,
        //     color: "rgba(255, 255, 255, 0.8)",
        //   },
        //   formatter: function (params) {
        //     return (
        //       params[0].name +
        //       "<br/>" +
        //       "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(90deg, #388CFF 0% ,#6CFEFF 100%)'></span>" +
        //       params[0].seriesName +
        //       " : " +
        //       params[0].value
        //         .toLocaleString()
        //         .toString()
        //         .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
        //       " 辆/天"
        //     );
        //   },
        // },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: "rgba(255, 255, 255, 0.8)",
                backgroundColor: "#061731",
                width: 200,
                height: 30,
                align: 'center',
              },
              formatter: function (name) {
                return name + " ";
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [],
          },
        ],
        series: [
          {
            name: "车辆",
            type: "bar",
            zlevel: 1, //通过 zlevel 设置层级
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                // 渐变色
                // color: "rgba(108, 254, 255, 0.3)",

                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#388CFF",
                  },
                  {
                    offset: 1,
                    color: "#6CFEFF",
                  },
                ]),
              },
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c}%' // 显示数值和百分比
            },
            data: data,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 15,
            barGap: "-100%", //两条柱状图重合
            data: maxdata,
            itemStyle: {
              normal: {
                color: "rgba(108, 254, 255, 0.3)",
                barBorderRadius: 10,
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneMb"));
      myChart.setOption(option);
    },
    getMapByPerson() {
      let option = getMap();
      let myChart = this.$echarts.init(document.getElementById("mapByPerson"));
      myChart.setOption(option);
    },
    tabClick(state) {
      let that=this
      if (state == 1) {
        this.regionInShowOne = true;
        this.regionInShowTwo = false;
        setTimeout(that.aaa(),1000
        )
      } else {
        this.regionInShowOne = false;
        this.regionInShowTwo = true;
      }
    },
    getFirstDigit(num) {
      return Number(String(this.money).charAt(num));
    },
    aaa(){
      this.map.panTo(new BMap.Point(126.607581,43.802168)); // 初始化地图,设置中心点坐标和地图级别
    }
  },

}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/shh_body.scss";
@import "@/assets/styles/shh_index.scss";

</style>