carInsightSystem/src/views/WeiboDetails/weiboContentTOPVolume/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-14 15:54:06
 * @LastEditTime: 2021-10-14 18:02:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
-->
<template>
  <div class="wct-outter" v-loading="load">
    <v-label-div title="微博内容TOP声量"> </v-label-div>
    <div class="wct-inner">
      <div class="wct-d1" v-for="(item,index) in list" :key="index">
        <v-echarts :opt="item.opt"></v-echarts>
        <div class="wct-d1-dd1">
          <span>排名：<span class="ss1">0{{index+1}}</span></span>
          <span>声量：<span class="ss1">{{item.value}}</span></span>
        </div>
      </div>
      <div class="wct-d1">
        <v-echarts :opt="opt2"></v-echarts>
        <div class="wct-d1-dd1">
          <span>排名：<span class="ss1">02</span></span>
          <span>声量：<span class="ss1">500</span></span>
        </div>
      </div>
      <div class="wct-d1">
        <v-echarts :opt="opt3"></v-echarts>
        <div class="wct-d1-dd1">
          <span>排名：<span class="ss1">03</span></span>
          <span>声量：<span class="ss1">450</span></span>
        </div>
      </div>
      <div class="wct-d1">
        <v-echarts :opt="opt4"></v-echarts>
        <div class="wct-d1-dd1">
          <span>排名：<span class="ss1">04</span></span>
          <span>声量：<span class="ss1">400</span></span>
        </div>
      </div>
      <div class="wct-d1">
        <v-echarts :opt="opt5"></v-echarts>
        <div class="wct-d1-dd1">
          <span>排名：<span class="ss1">05</span></span>
          <span>声量：<span class="ss1">350</span></span>
        </div>
      </div>
      <div class="wct-d1">
        <v-echarts :opt="opt6"></v-echarts>
        <div class="wct-d1-dd1">
          <span>排名：<span class="ss1">06</span></span>
          <span>声量：<span class="ss1">300</span></span>
        </div>
      </div>
      <div class="wct-d1">
        <v-echarts :opt="opt7"></v-echarts>
        <div class="wct-d1-dd1">
          <span>排名：<span class="ss1">07</span></span>
          <span>声量：<span class="ss1">250</span></span>
        </div>
      </div>
      <div class="wct-d1">
        <v-echarts :opt="opt8"></v-echarts>
        <div class="wct-d1-dd1">
          <span>排名：<span class="ss1">08</span></span>
          <span>声量：<span class="ss1">200</span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDirectWeiBo0528} from "@/api/WeiboDetails"
import {comparePig} from "@/utils/gol/dataTool"
import createOpt from "./opt"
export default {
    name: "weiboContentTOPVolume",
    data() {
        return {
            load: false, 
             form: {
                sBrand: "",
                token: "",
            },
            list: [],
            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#3373CC', '#63AECC', '#54BF93', '#CC9D12']
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.getBrand.brandname || this.brand;
        this.getData();
    },
    methods: {
        getData() {
            this.load = true;
            let obj = Object.assign({}, this.getCtime2, this.form);
            getDirectWeiBo0528(obj).then(res => {
                let data = res.data || [];
                let arr = [];
                data.sort(comparePig('value'));
                data.forEach((ele,index) => {
                    let obj = {
                        value: ele.value,
                        opt: createOpt(ele.key,this.colors[index],ele.value)
                    }
                    arr.push(obj)
                })
                this.list = arr;
                // this.opt1 = createOpt(data[0].key,'#306cc0',data[0].value);
                this.load = false;
            });
        }
    }
}
</script>

<style lang="less" scoped>
.wct-outter {
  width: 936px;
  height: 460px;
  border: 2px solid #0f2a4d;
  margin-left: 16px;
  overflow: hidden;
}
.wct-inner {
  width: 100%;
  margin-top: 16px;
  height: calc(100% - 48px);
  .wct-d1 {
    position: relative;
    width: 233px;
    height: 206px;
    display: inline-block;
    .wct-d1-dd1 {
      position: absolute;
      padding: 0px 16px;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      top: 140px;
      left: 0px;
      span {
        color: #d8d8d8;
        font-size: 12px;
        .ss1 {
          font-family: Bebas;
          font-size: 16px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>