Element 弹窗 Echarts 图表模板

chat Html 代码

<template>
    <el-dialog :title="id" v-model="open" width="50vw" append-to-body destroy-on-close>
        <div class="time">
            <el-date-picker v-model="timeArr" type="daterange" range-separator="至" format="YYYY年MM月DD日"
                            value-format="YYYY-MM-DD" @change="changeTime"/>
        </div>
        <div style="height: 55vh">
            <v-charts ref="chart" :option="getOption()" height="55" width="48"/>
        </div>
    </el-dialog>
</template>

<script setup>
import {listDeviceReport} from "@/api/cover/deviceReport.js"
import VCharts from "@/components/chart/V-Charts.vue"
import {ElMessage} from "element-plus"

defineOptions({
    name: "showLineChartComponent"
})

const open = ref(false)
const chart = ref(null)
const id = ref('')

// 图标数据
const dateTime = ref([])
const signal = ref([])
const voltage = ref([])

// 时间选项
const timeArr = ref([])
const changeTime = async (arr) => {
    const data = await getList(id.value, {time: arr.toString()})
    if (data.length === 0) {
        ElMessage.error('当前时间段无数据！')
        return
    }
    dateTime.value = data.map(o => o.reportTime)
    timeArr.value[0] = dateTime.value[0].split(' ')[0]
    timeArr.value[1] = dateTime.value[dateTime.value.length - 1].split(' ')[0]
}

// 打开折线图
const openChart = async (productCode) => {
    const data = await getList(productCode, null)
    if (data.length === 0) {
        ElMessage.error('当前无数据！')
        return
    }

    dateTime.value = data.map(o => o.reportTime)

    // 重新设置时间数据
    timeArr.value[0] = dateTime.value[0].split(' ')[0]
    timeArr.value[1] = dateTime.value[dateTime.value.length - 1].split(' ')[0]
    open.value = true
}

// 获取数据
const getList = async (id, time) => {
    return data
}

// chat数据
const getOption = () => {
    return {}
}

// 公开导出数据
defineExpose({
    openChart
})

</script>

<style lang="scss" scoped>
.time {
  position: absolute;
  top: 5vh;
  right: 5vw;
}
</style>

vue3 的 chat 底层模板

<template>
    <div class="echarts" :style="{width: widthC, height: heightC}">
        <div class="main" :style="{height: heightC, width: widthC}" ref="main"></div>
    </div>
</template>

<script setup>
defineOptions({
    name: "V-Charts"
})

const props = defineProps({
    option: {
        required: true,
        type: Object
    },
    width: {
        required: true,
        type: String
    },
    height: {
        required: true,
        type: String
    }
})

const {proxy} = getCurrentInstance()

const main = ref(null)

// 动态设置数据
const widthC = computed(() => props.width + 'vw')
const heightC = computed(() => props.height + 'vh')

onMounted(() => init())

// 初始
const init = () => {
    const chart = proxy.$echarts.init(main.value)
    chart.setOption(props.option)
}

</script>