cloud-ui.vusion/src/u-line-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="currentData" :title-align="titleAlign" :loading="loading" :content-style="contentStyle">
    <template v-if="title || $slots.titleTemplate" slot="titleTemplate">
        <slot name="titleTemplate">
            {{title}}
        </slot>
    </template>
    <template slot="captionTemplate"  v-if="caption || $slots.captionTemplate">
        <slot name="captionTemplate">
            {{caption}}
        </slot>
    </template>
    <div :class="$style.wrap">
        <div :class="$style.grid" ref="grid">
            <div v-for="(xLablel, index) in xAxis_.data" :class="$style.line" role="y" :style="{left: 100*index/(xAxis_.data.length - 1)+'%'}"></div>
            <div v-for="(yLabel, index) in yAxis_.data" :class="$style.line" role='x' :style="{bottom: 100*index/(yAxis_.data.length - 1)+'%'}"></div>
        </div>
        <div :class="$style.axis" role="axisx">
            <div v-for="(xLabel, index) in xAxis_.data" :class="$style.label" role="labelx" title="xLabel" :style="{left: 100*index/(xAxis_.data.length - 1)+'%', 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="axisy">
            <div v-for="(yLabel,index) in yAxis_.data" :class="$style.label" role="labely" 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" role="layersvg">
            <svg :class="$style.elsvg" v-for="sery in series" v-show="!sery.hidden && !sery.absent">
                <path v-if="fill" :class="$style.area" :d="getD(sery, 'area')" />
                <path :class="$style.line" :d="getD(sery)" />
            </svg>
        </div>
        <div :class="$style.layer">
            <div v-for="(item,index) in currentData" v-if="!item.hidden" :class="$style.piece" :style="{left: 100*index/(currentData.length - 1)+'%', width: 100/(currentData.length - 1)+'%'}">
                <div v-for="sery in series" v-show="item[sery.key] !== undefined && !sery.hidden" :class="$style.point" :style="{bottom: 100*(item[sery.key] - yAxis_.min)/(yAxis_.max - yAxis_.min)+'%'}">
                    <div class="value">{{format(item[sery.key])}}</div>
                </div>
                <div :class="$style['u-tooltip']" :role="'u-tooltip-'+(index >= currentData.length/2 ? 'left' : 'right')+'-'+(getPercent(item) < 50 ? 'top' : 'bottom')" :style="{top: getPercent(item)+'%'}">
                    <slot :name="'tooltipTemplate'+index">
                        <div v-for="sery in series">{{sery.name || sery.key}}: {{format(item[sery.key])}}</div>
                    </slot>
                </div>
            </div>
        </div>
    </div>
    <div :class="$style.operate" slot="operate">
        <slot></slot>
    </div>
</u-chart>