86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<template>
|
|
<el-drawer v-model="drawerVisible" direction="rtl">
|
|
<template #header>
|
|
<h4>高级设置</h4>
|
|
</template>
|
|
<template #default>
|
|
<el-form :model="settingsForm" class="advanced-setting">
|
|
<el-form-item label="是否点击图例改变图显示状态">
|
|
<el-switch active-text="是" inactive-text="否" v-model="settingsForm.isClickLegendToShow"
|
|
@change="changeIsClickLegend"/>
|
|
</el-form-item>
|
|
<el-form-item label="是否显示提示框组件">
|
|
<el-switch active-text="是" inactive-text="否" v-model="settingsForm.isShowTooltip"
|
|
@change="changeIsShowTooltip"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<template #footer>
|
|
<el-button @click="cancelSettings">取消</el-button>
|
|
<el-button type="primary" @click="confirmSettings">确认</el-button>
|
|
</template>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
//初始化加载echarts函数
|
|
initCharts: {
|
|
type: Function,
|
|
default: null
|
|
},
|
|
//echarts的配置属性
|
|
chartOption: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
})
|
|
let option = reactive(props.chartOption)
|
|
//高级设置抽屉是否展开
|
|
const drawerVisible = ref(false)
|
|
//高级设置属性
|
|
const settingsForm = reactive({
|
|
isClickLegendToShow: option.legend.selectedMode,//打开点击图例改变图显示状态
|
|
isShowTooltip: option.tooltip.show//是否显示提示框组件
|
|
})
|
|
/**
|
|
* 打开高级设置弹窗
|
|
*/
|
|
const showDrawer = () => {
|
|
drawerVisible.value = true
|
|
}
|
|
|
|
/**
|
|
* 高级设置: 取消按钮
|
|
*/
|
|
const cancelSettings = () => {
|
|
drawerVisible.value = false
|
|
}
|
|
/**
|
|
* 高级设置: 确认按钮
|
|
*/
|
|
const confirmSettings = () => {
|
|
drawerVisible.value = false
|
|
props.initCharts()
|
|
}
|
|
|
|
/**
|
|
* 高级设置:打开点击图例改变图显示状态
|
|
* @param val
|
|
*/
|
|
const changeIsClickLegend = (val) => {
|
|
option.legend.selectedMode = val
|
|
}
|
|
|
|
/**
|
|
* 高级设置:是否显示提示框组件
|
|
* @param val
|
|
*/
|
|
const changeIsShowTooltip = (val) => {
|
|
option.tooltip.show = val
|
|
}
|
|
|
|
defineExpose({
|
|
showDrawer
|
|
})
|
|
</script> |