
<style>
.sexChart{
    height: 100%;
    text-align: center;
    position: relative;
}
.sexChart #myCanvas{
    margin-top: 55px;
}
.sexChart .lable{
    display: flex;
    align-items: center;
    padding: 60px 40px 0 40px;
    justify-content: space-between;
    font-size: 12px;
}
.sexChart .lable .radius{
    display: inline-block;
    width:12px;
    height:12px;
    border-radius:50%;
    margin-right: 10px;
}
.sexChart .text{
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: 600;
}
</style>
<template>
  <div class="sexChart" ref="sexChart">
    <canvas id="myCanvas" width="220" height="220">
        当前浏览器版本过低，请使用其他浏览器尝试
    </canvas>
    <p class="text">100%</p>
    <div class="lable">
        <template v-for="(item, index) in shopChartData">
            <div :key="index" v-if="item.text !== ''">
                <span class="radius" :style="{'background': item.color}"></span> <span>{{item.text}}</span> {{item.num}}%
            </div>
        </template>
    </div>
  </div>
</template>
<script>
import DonutChart from '../../../../node_modules/donut-chart'
export default {
    props: ["shopChartData"],    
    data() {
        return {
        
        };
    },watch:{
        
    },
    mounted() {
        this.init()
    },
    methods: {
        init(){
            let d = this.shopChartData.map( (item) =>{
                return {
                    name: item.text,
                    value: item.num
                }
            })
            let c = this.shopChartData.map( (item) => 
                item.color + ''
            )
            var option = {
                type: 'pie', // pie 环形图|| gauge 计量图
                tooltip: {
                    show: false,
                },
                label: {
                    show: false
                },
                x: "50%",   // 图标位置
                y: "50%",
                radius: "30%",  // 半径
                lineWidth: "15%", // 圆环宽度
                data: d,
                capType: "round", // 圆角 || butt 平角
                selectedStyle: {  // 选中时的样式
                    color: "white", // 包边颜色
                    borderWidth: 10 // 包边宽度
                },
                color: c,
                labelCoverTitle: true, // label 是否覆盖标题
                backgroundArc: '#999' // 空圆环的颜色
            }
            var cir = new DonutChart('myCanvas', option)
            cir.init(function (result) {
                // result 选中的选区的相关信息
            })
        }
    }
}
</script>