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

Vusion Cloud UI

<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+'%'}"></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 - 1)+'%'}"></div>
    </div>
    <div :class="$style.axis" role="axis-x">
        <div v-for="(xLabel,index) in xAxis_.data" v-if="(((index+1) % xAxis_.count) === 0)" :class="$style.label"  role="label-x" :wrap="xAxis.count" :title="xLabel" :style="{left: 100*index/xAxis_.data.length+'%', width: 100/xAxis_.data.length+'%'}"><slot name="xLabelTemplate">{{xLabel}}</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 - 1)+'%'}">{{format(yLabel)}}</div>
        <div :class="$style.label" role="label-yName">{{yAxis.name}}</div>
    </div>
    <div :class="$style.layer">
        <div v-for="(item,index) in data" :class="$style.piece" :style="{left: 100*index/data.length+'%', width: 100/data.length+'%'}">
            <template v-if="!stack" >
                <template  v-for="sery in series">
                    <u-popper placement="right-start" trigger="hover">
                        <div :class="$style.bar" :style="{height: 100*(item[sery.key] - yAxis_.min)/yAxis_.max+'%'}"></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: 100*(item.total - yAxis_.min)/yAxis_.max+'%'}">
                        <div v-for="sery in series" :class="$style.bar" role="bar-static" :style="{height: 100*(item[sery.key])/item.total+'%'}" 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>