cloud-ui.vusion/src/u-pie-chart.vue/index.html

Vusion Cloud UI

<u-chart :class="$style.root" :title="title" :border="border" :width="width" :height="height" :legend="legend" :series="data">
    <svg :class="$style.elsvg" ref="svg" viewBox="0 0 100 100">
        <g :class="$style.elg" transform="translate(50, 50)">
            <circle v-if="isEmpty" :class="$style.emptyitem" cx="0" cy="0" :r="RADIUS"></circle>
            <template v-else>
                <circle v-for="(item,index) in data" v-if="item.percent === 100" :class="$style.item" cx="0" cy="0" :r="RADIUS"/>
                <path v-for="(item,index) in posData" v-if="item.percent !== 100" :class="$style.item"
                    :d="getD(item)"
                    @mouseover="onMouseOver(item)" />
            </template>
        </g>
    </svg>
    <div v-if="isEmpty" :class="$style.emptytext">
        0%
        <div :class="$style.emptytooltip">
            <div v-for="(item, index) in posData">
                {{item.name || item.key}}: {{item.percent}}%
            </div>
        </div>
    </div>
    <div v-else v-for="(item, index) in posData" :class="$style.text" :style="getTextStyle(item)">
        {{item ? item.percent + '%' : ''}}
        <div :class="$style['u-tooltip']">
            <slot :name="'tooltipTemplate'+index">{{item.name || item.key}}: {{item.percent}}%</slot>
        </div>
    </div>
</u-chart>