<template>
  <div class="container">
    <div class="tags-title">
      <i class="iconfont icon-xieshu"></i>24小时热词信息
    </div>
    <div class="content">
      <div v-for="(item, index) in data" :key="index" :style="{background:colors[index]}" class="tag-item">{{item}}</div>
      <div class="endpoint"></div>
    </div>
    <!-- <div
      id="myChart"
      :style="{marginTop: '-40px',width: '300px', height: '200px', fontFamily:'pingfang'}"
    ></div>-->
  </div>
</template>
<script>
require("echarts-wordcloud");
export default {
  props:["hotWord"],
  data() {
    return {
      colors: [
        // "#120f2c",
        // "#120f2c",
        // "#120f2c",
        // "#120f2c",
        // "#120f2c",
        // "#120f2c",
        // "#120f2c",
        
        "#11b8cc",
        "#2e9f5e",
        "#72b10f",
        "#c5bc24",
        "#cc6d11",
        "#6c5bd1",
        "#a236d9",
        "#ce2287",
        "#e36060",
        "#ba1d1a"
      ],
      data: []
    };
  },
  watch:{
    hotWord:{
      handler: function (val, oldVal) {
        if (val) {
          this.data = val
        }
      }
    }
  },
  mounted() {
    //this.drawLine();
    this.data=this.hotWord
  },
  methods: {
    // drawLine() {
    //   let myChart = this.$echarts.init(document.getElementById("myChart"));
    //   let _this = this;
    //   let option = {
    //     title: {
    //       text: "24小时交易热词",
    //       link: "javascript:void",
    //       fontFamily: "pingFang",
    //       show: false
    //     },
    //     tooltip: {
    //       show: true
    //     },
    //     series: [
    //       {
    //         name: "麦子热点统计",
    //         type: "wordCloud",
    //         shape: "circle",
    //         left: "center",
    //         top: "center",
    //         width: "70%",
    //         height: "80%",
    //         right: null,
    //         bottom: null,
    //         sizeRange: [16,16],
    //         rotationRange: [0, 0],
    //         rotationStep: 45,
    //         gridSize: 4,
    //         drawOutOfBound: false,
    //         textStyle: {
    //           normal: {
    //             fontFamily: "pingfang",
    //             fontWeight: "300",
    //             color: function() {
    //               if (_this.colors.length > 0) {
    //                 let color = _this.colors[0];
    //                 _this.colors.splice(0, 1);
    //                 return color;
    //               } else {
    //                 return (
    //                   "rgb(" +
    //                   [
    //                     Math.round(Math.random() * 160),
    //                     Math.round(Math.random() * 160),
    //                     Math.round(Math.random() * 160)
    //                   ].join(",") +
    //                   ")"
    //                 );
    //               }
    //             }
    //           },
    //           emphasis: {
    //             shadowBlur: 10,
    //             shadowColor: "#333"
    //           }
    //         },
    //         data: [
    //           {
    //             name: "日本",
    //             value: 6181
    //           },
    //           {
    //             name: "日本无购物",
    //             value: 4386
    //           },
    //           {
    //             name: "147升级版",
    //             value: 4055
    //           },
    //           {
    //             name: "新马泰自驾游",
    //             value: 2467
    //           },
    //           {
    //             name: "奈良梅花鹿公园",
    //             value: 2244
    //           }
    //         ]
    //       }
    //     ]
    //   };
    //   // 为echarts对象加载数据
    //   myChart.setOption(option);
    // }
  }
};
</script>
<style>
.tags-title {
  font-size: 18px;
  color: #c0c0c3 !important;
  margin-top: 5px;
  /* border-bottom: 1px solid #0febff; */
  text-align: right;
  padding-bottom: 5px;
  position: relative;
  margin-bottom: 5px;
  padding-right: 12px;
  box-sizing: border-box;
  font-family: "pingfangR";
  
}
.container .content .endpoint {
  width: 4px;
  height: 4px;
  position: absolute;
  right: 0px;
  bottom: -2px;
  background: #d32f62;
  border-radius: 100%;
  color: #d32f62;
  text-shadow: 0 0 30px #d32f62;
  font-size: 1px;
}
.tags-title .iconfont {
  font-size: 14px;
  margin-right: 5px;
  text-shadow: 0 0 30px #d32f62;
  background: transparent;
  animation-timing-function: ease-in-out;
  animation-name: breathe;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: #d32f62;
}
.container .content{
  height: 63px;
  border-bottom: 1px solid #d32f62;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.container .content .tag-item{
  margin-right: 5px;
  border-radius: 2px;
  color: #ddd;
  height: 25px;
  line-height: 25px;
  margin-bottom: 4px;
  padding:0 5px;
}
@-webkit-keyframes breathe {
  0% {
    text-shadow: 0 0 1px #d32f62;
    opacity: 0.1;
  }
  100% {
    text-shadow: 0 1px 30px #d32f62;
    opacity: 1;
  }
}
</style>