init : 初始化仓库

src/views/custom-query/echarts-editor/components/lineChart/AdvancedSettings.vue

@@ -0,0 +1,86 @@
+<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>