init

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

@@ -0,0 +1,160 @@
+<template>
+  <el-scrollbar height="450px">
+    <div class="basic-setup" @click.stop>
+      折线图基本设置
+    </div>
+    <div v-for="(settingItem) in basicList" class="setting" @click.stop>
+      <div class="setting-title">{{ settingItem.label }}</div>
+      <!--            <div class="setting-item">-->
+      <!--              <span>图形: </span>-->
+      <!--              <el-select v-model="settingItem.type" @change="switchChart($event,settingItem)">-->
+      <!--                <el-option-->
+      <!--                    v-for="chartItem in [{value: 'line',label: '折线图'},{value: 'bar',label: '柱状图'}]"-->
+      <!--                    :key="chartItem.value"-->
+      <!--                    :label="chartItem.label"-->
+      <!--                    :value="chartItem.value"-->
+      <!--                />-->
+      <!--              </el-select>-->
+      <!--            </div>-->
+      <div class="setting-item">
+        <span>显示标记: </span>
+        <el-switch active-text="是" inactive-text="否" v-model="settingItem.showSymbol"
+                   @change="changeIsShowSymbol($event,settingItem)"/>
+
+      </div>
+      <div class="setting-item" v-if="settingItem.showSymbol===true">
+        <span>标记: </span>
+        <el-select v-model="settingItem.symbol" @change="switchSymbol($event,settingItem)">
+          <el-option
+              v-for="symbolItem in symbolList"
+              :key="symbolItem.value"
+              :label="symbolItem.label"
+              :value="symbolItem.value"
+          />
+        </el-select>
+      </div>
+      <div class="setting-item" v-if="settingItem.showSymbol===true">
+        <span>标记大小: </span>
+        <el-input-number v-model="settingItem.symbolSize" :min="1" @change="changeSymbolSize($event,settingItem)"/>
+      </div>
+      <div class="setting-item">
+        <span>阴影模糊大小: </span>
+        <el-input-number v-model="settingItem.lineStyle.shadowBlur" :min="0" @change="changeShadowBlur($event,settingItem)"/>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+const props = defineProps({
+  //基础设置列表
+  basicList: {
+    type: Array,
+    default: []
+  },
+  //初始化加载echarts函数
+  initCharts: {
+    type: Function,
+    default: null
+  },
+  //echarts的配置属性
+  chartOption: {
+    type: Array,
+    default: []
+  },
+})
+//图形标记列表
+const symbolList = ref([
+  {value: 'none', label: '不显示标记'},
+  {value: 'circle', label: '圆形'},
+  {value: 'rect', label: '矩形'},
+  {value: 'triangle', label: '三角形'},
+  {value: 'diamond', label: '钻石形'},
+  {value: 'roundRect', label: '圆角矩形'},
+  {value: 'pin', label: '圆钉形'},
+  {value: 'arrow', label: '箭头形'},
+])
+let option = reactive(props.chartOption)
+
+/**
+ * 封装基本设置修改echarts属性事件
+ * @param item 修改的项
+ * @param type option.series中的属性名
+ * @param val 获取修改的值
+ */
+const changeSingleParams = (item, type, val) => {
+  option.series.forEach((sItem, sIndex) => {
+    if (sItem.name === item.label) {
+      getSeriesParams(type, sIndex, val)
+    }
+  })
+}
+/**
+ * 根据changeSingleParams方法传的动态type,封装数据修改事件
+ * @param type option.series中的属性名
+ * @param index 修改某项属性的下标
+ * @param val 获取修改的值
+ */
+const getSeriesParams = (type, index, val) => {
+  let seriesItem = option.series[index]
+  switch (type) {
+    case 'type':
+      return seriesItem.type = val
+    case 'showSymbol':
+      return seriesItem.showSymbol = val
+    case 'symbol':
+      return seriesItem.symbol = val
+    case 'symbolSize':
+      return seriesItem.symbolSize = val
+    case 'shadowBlur':
+      return seriesItem.lineStyle.shadowBlur = val
+  }
+}
+/**
+ * 基础设置:是否显示标记
+ * @param val 修改的标记大小
+ * @param item 修改的chart项
+ */
+const changeIsShowSymbol = (val, item) => {
+  changeSingleParams(item, 'showSymbol', val)
+  props.initCharts()
+}
+
+/**
+ * 基础设置:切换chart的形状
+ * @param val 修改的标记大小
+ * @param item 修改的chart项
+ */
+const switchChart = (val, item) => {
+  changeSingleParams(item, 'type', val)
+  props.initCharts()
+}
+/**
+ * 基础设置:修改标记
+ * @param val 修改的标记大小
+ * @param item 修改的chart项
+ */
+const switchSymbol = (val, item) => {
+  changeSingleParams(item, 'symbol', val)
+  props.initCharts()
+}
+/**
+ * 基础设置:修改标记大小
+ * @param val 修改的标记大小
+ * @param item 修改的chart项
+ */
+const changeSymbolSize = (val, item) => {
+  changeSingleParams(item, 'symbolSize', val)
+  props.initCharts()
+}
+
+/**
+ * 基础设置:修改图形阴影的模糊大小
+ * @param val 修改的阴影的模糊大小
+ * @param item 修改的chart项
+ */
+const changeShadowBlur = (val, item) => {
+  changeSingleParams(item, 'shadowBlur', val)
+  props.initCharts()
+}
+</script>