dx-element-ui/packages/charts/src/main.vue

<template>
    <div class="nt-charts" :class="{'van-charts-null': chartOptions.data.status != 2}">
        <!--type有19中loading模式（01-19）-->
        <nt-loading
            :class="chartOptions.class"
            v-if="chartOptions.data.status == 0"
            :type="'05'"
        />
        <div v-else-if="chartOptions.data.status == 2" style="height: 100%;">
            <div v-if="!!chartTitle" :style="titleStyle" :class="titleClass">{{chartTitle}}</div>
            <f2-extend-charts v-if="webUIType == 'f2'" :chartData="chartOptions.data"></f2-extend-charts>
	        <nt-map-charts v-else-if="webUIType == 'map'" :chartData="chartOptions.data"></nt-map-charts>
            <nt-extend-charts v-else :options="chartOptions" :chartData="chartOptions.data" :className="className" :chartsId="chartsId"></nt-extend-charts>
            <slot name="botton"></slot>
        </div>
        <div class="nt-message" :class="chartOptions.class" v-else>{{chartOptions.data.message || '暂无数据！'}}</div>
        <slot name="legend"></slot>
    </div>
</template>

<script>
import NtLoading from "@/components/thrid/em-element-ui/packages/loading"
import { NtExtendCharts, F2ExtendCharts, NtMapCharts } from "./index.js";

export default {
    name: "ntCharts",
    components: { NtLoading, NtExtendCharts, F2ExtendCharts, NtMapCharts },
    provide() {
        return {
            chart: this
        }
    },
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        chartsId: {
            type: String,
            default: 'chart'
        },
        webUIType: {
            type: String,
            default: "f2"
        },
        chartTitle: {
            type: String,
            default: ''
        },
        titleStyle: {
            type: String,
            default: ''
        },
        titleClass: {
            type: String,
            default: ''
        },
        chartOptions: {
            type: Object,
            default: function() {
                return {};
            }
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        dropdown: {
            type: Object,
            default: function() {
                return {};
            }
        }
    }
};
</script>
<style lang="scss">
    .nt-charts, .nt-f2-charts{
        height: 100%;
        width: 100%;
    }
    .nt-message{
        display: flex;
        align-items: center;
        justify-content: center;
        height: inherit;
        color: #333;
        opacity: 0.5;
        font-size: 1.6rem;
    }
</style>