<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-08-08 13:30:02
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-12-28 11:08:18
 * @FilePath: /smart-and-safe-city/src/views/Cszl/components/CharsBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="item flex-d-b">
    <div class="top charsTitle">
      {{ titleText }}
    </div>
    <div class="container">
      <Chars :options="options" />
    </div>
  </div>
</template>

<script>
import Chars from "./Chars.vue";
export default {
  name: "",
  components: {
    Chars,
  },
  props: {
    titleText: {
      type: String,
      default: "",
    },
    // 数据
    options: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // options: {},
    };
  },
  mounted() {
    // this.charsChange();
  },
  methods: {
    // charsChange(arr, color) {
    //   this.options = {
    //     // tooltip: {
    //     //   trigger: 'item'
    //     // },
    //     // legend: {
    //     //   type: "scroll",
    //     //   orient: "vertical",
    //     //   right: "0%",
    //     //   top: 15,
    //     //   bottom: 0,
    //     //   textStyle: {
    //     //     color: "#ffffff",
    //     //     fontSize: 12,
    //     //   },
    //     //   icon: "roundRect",
    //     //   itemWidth: 20,
    //     //   itemHeight: 8,
    //     //   // itemGap: 30,
    //     //   formatter: (name) => {
    //     //     // 第一个空格
    //     //     let kg1 = "";
    //     //     if (name.length == this.maxNameLength) {
    //     //       for (let i = 0; i < 7; i++) {
    //     //         kg1 += " ";
    //     //       }
    //     //     } else {
    //     //       for (
    //     //         let i = 0;
    //     //         i < 3 * (this.maxNameLength - name.length) + 7;
    //     //         i++
    //     //       ) {
    //     //         kg1 += " ";
    //     //       }
    //     //     }
    //     //     let obj = arr.filter((item) => {
    //     //       return name == item.name;
    //     //     })[0];
    //     //     var total = arr.reduce((a, b) => {
    //     //       const value1 = b.value;
    //     //       return a + b.value;
    //     //     }, 0);
    //     //     //第二个空格
    //     //     const length = (obj.value + "").length;
    //     //     let kg2 = "";
    //     //     for (let i = 0; i < (this.maxValueLength - length) * 2 + 10; i++) {
    //     //       kg2 += " ";
    //     //     }
    //     //     return (
    //     //       name +
    //     //       kg1 +
    //     //       // obj.value +
    //     //       kg2 +
    //     //       Math.floor((obj.value / total) * 1000) / 10 +
    //     //       "%"
    //     //     );
    //     //   },
    //     // },
    //     color,
    //     series: [
    //       {
    //         name: "Access From",
    //         type: "pie",
    //         radius: ["75%", "90%"],
    //         center: ["50%", "50%"],
    //         avoidLabelOverlap: false,
    //         label: {
    //           show: false,
    //           position: "center",
    //           emphasis: {
    //             formatter: "{b}\n{c}\n({d}%)",
    //             show: false,
    //             textStyle: {
    //               fontSize: "16",
    //               fontWeight: "bold",
    //               color: "#fff",
    //             },
    //           },
    //         },
    //         itemStyle: {
    //           borderWidth: 10,
    //           // shadowBlur: 20,
    //           borderRadius: 20,
    //         },
    //         labelLine: {
    //           show: false,
    //         },
    //         data: arr,
    //         label: {
    //           show: this.centerTextShow,
    //           // normal: {
    //           //   formatter: function (params) {
    //           //     console.log('params',params)
    //           //     return "1744\n用户数量";
    //           //   },
    //           //   position: "center",
    //           //   show: true,
    //           //   textStyle: {
    //           //     fontSize: "12",
    //           //     fontWeight: "400",
    //           //     color: "#fff",
    //           //   },
    //           // },
    //           position: "center",
    //           formatter: [
    //             `{a|${
    //               arr.reduce((pre, next, index) => {
    //                 return { value: pre.value + next.value };
    //               }).value
    //             }}`,
    //             `{b|${this.centerText}}`,
    //           ].join("\n"),
    //           rich: {
    //             a: {
    //               color: "#fff",
    //               fontSize: 16,
    //               lineHeight: 20,
    //               verticalAlign: "bottom",
    //             },
    //             b: {
    //               color: "#fff",
    //               fontSize: 12,
    //               lineHeight: 20,
    //             },
    //           },
    //         },
    //       },
    //     ],
    //   };
    // },
  },
};
</script>
<style lang="scss" scoped>
.item {
  width: 100%;
  height: 100%;
  .top {
    // top: 29.96/215 * 100%;
    // margin-bottom: 10px;
    // font-size: 16px;
    color: #ffffff;
  }

  .container {
    // height: 120/215 * 100%;
    // top: 29.32/215 * 100% +29.96/215 * 100%;
    flex: 1;
    // padding-left: 30px;
    // padding-right: 35px;
    box-sizing: border-box;
    width: 100%;
    // background: red;
    // background: blue;
  }
}
</style>
