cloud-ui.vusion
Version:
Vusion Cloud UI
56 lines (55 loc) • 3.48 kB
HTML
<u-chart :class="$style.root" :title="title" :border="border" :width="width" :height="height" :legend="legend" :series="series" :data="data" :loading="loading" :content-style="contentStyle">
<template v-if="title || $slots.titleTemplate" slot="titleTemplate">
<slot name="titleTemplate">
{{title}}
</slot>
</template>
<template slot="captionTemplate">
<slot name="captionTemplate">
{{caption}}
</slot>
</template>
<div :class="$style.grid">
<div v-for="(xLabel,index) in xAxis_.data" :class="$style.line" role="line-y" :style="{left: 100*index/(xAxis_.data.length-1)+'%'}"></div>
<!-- <div :class="$style.line" role="line-y" style="left: 100%;"></div> -->
<div v-for="(yLabel,index) in yAxis_.data" :class="$style.line" role="line-x" :style="{bottom: 100*index/(yAxis_.data.length)+'%'}"></div>
<div :class="$style.line" role="line-x" style="bottom: 100%;"></div>
</div>
<div :class="$style.axis" role="axis-x">
<div v-for="(xLabel,index) in xAxis_.data" :class="$style.label" role="label-x" :title="xLabel" :style="{left: 100*index/(xAxis_.data.length - 1)+'%'}">
<slot name="xLabelTemplate">
<div :class="$style.xlabel">{{xLabel}}</div>
</slot>
</div>
<div :class="$style.label" role="label-xName">{{xAxis.name}}</div>
</div>
<div :class="$style.axis" role="axis-y">
<div v-for="(yLabel,index) in yAxis_.data" :class="$style.label" role="label-y" :title="yLabel" :style="{bottom: 100*index/(yAxis_.data.length)+'%',height: 100/yAxis_.data.length+'%'}">
<span :class="$style.ylabel">{{format(yLabel)}}</span>
</div>
<div :class="$style.label" role="label-yName">{{yAxis.name}}</div>
</div>
<div :class="$style.layer">
<div v-for="(item,index) in chartData" :class="$style.piece" :style="{top: 100*(1 - (index+1)/chartData.length)+'%', height: 100/chartData.length+'%', width: 100*(item.total - xAxis_.min)/xAxis_.max+'%'}">
<template v-if="!stack">
<template v-for="(sery, seryindex) in series">
<u-popper placement="right-start" trigger="hover">
<div :class="$style.bar" :style="{height: 80 + '%', width: 100 + '%'}"></div>
<u-chart-tooltip :class="$style.tooltip" role="tooltip-right-top" slot="popper" :sery="sery" :row="item" :vnode="$scopedSlots.tooltip"></u-chart-tooltip>
</u-popper>
</template>
</template>
<template v-else>
<u-popper placement="right-start" trigger="hover">
<div :class="$style.bar" role="bar-stack" :style="{height: 80 + '%', width: 100 + '%'}">
<div v-for="(sery, seryindex) in series" :class="$style.bar" role="bar-static" :style="{width: 100*(item[sery.key])/item.total+'%', height: 100+'%', left: 100*item['part'+seryindex]+'%'}" v-if="item[sery.key]"></div>
</div>
<u-chart-tooltip :class="$style.tooltip" role="tooltip-right-top" slot="popper" stack :series="series" :row="item" :vnode="$scopedSlots.tooltip"></u-chart-tooltip>
</u-popper>
</template>
</div>
</div>
<template v-if="false">
<slot name="tooltip" :series="series" :sery="series[0]" :row="data[0]"></slot>
</template>
</u-chart>