<!--
 * @Author: your name
 * @Date: 2021-10-15 13:41:17
 * @LastEditTime: 2021-11-05 13:47:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
-->
<template>
    <div class="bd-item-round">
        <div class="bd-item-r-cav">
            <v-echarts :opt="opt"></v-echarts>
        </div>
        <span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
    </div>
</template>
<script>
import createOpt from "./opt";
export default {
    name: "roundata",
    props: {
        title: {
            type: String,
            default: "",
        },
        color: {
            type: String,
            default: "",
        },
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
       data: {
           handler(val) {
              this.opt = createOpt(val) 
           },
           immediate: true
       } 
    },
    data() {
        return {
           
        };
    },
    methods: {
        
    },
};
</script>
<style lang="less" scoped>
.bd-item-round {
    display: inline-block;
    .bd-item-r-cav {
        width: 193px;
        height: 206px;
    }
    .bd-item-r-c-s1 {
        display: block;
        text-align: center;
        color: #fff;
        font-size: 18px;
        margin-top: 30px;
    }
}
</style>
