tunnel-cloud-front/src/views/custom-query/echarts-editor/components/ChartsOptions.vue

<template>
  <div>
    <el-card class="box-card">
      <div class="drag-block">
        <draggable
            class="list-group"
            :list="dragOptions"
            itemKey="id"
            group="people"
            @start="startDrag"
            @change="changeChartItem"
        >
          <template #item="{element}">
            <el-card shadow="hover" class="cards">
              <el-row justify="space-between">
                <span>{{ element.label }}</span>
                <span>{{ element.dataType }}</span>
              </el-row>
            </el-card>
          </template>
        </draggable>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import draggable from 'vuedraggable'
import {ElMessage} from "element-plus";

const emit = defineEmits(["editValueFlag", "editStartDataType"])
const props = defineProps({
  //可供拖动的选项列表
  dragOptions: {
    type: Array,
    default: []
  },
  //echarts的配置属性
  chartOption: {
    type: Array,
    default: []
  },
  //初始化加载echarts函数
  initCharts: {
    type: Function,
    default: null
  },
  //用于X轴区域存放拖动的选项
  xAxisList: {
    type: Array,
    default: []
  },
  //用于Y轴区域存放拖动的选项
  yAxisList: {
    type: Array,
    default: []
  },
  //当前echarts图形
  currentChart: {
    type: String,
    default: 'line'
  }
})
//简化代码
let xList = reactive(props.xAxisList)
let yList = reactive(props.yAxisList)
let option = reactive(props.chartOption)
//获取正在拖动选项的数据类型
const startDragType = ref()
//标记正在拖动选项的数据类型是否value
const flag = ref(false)
//将改变的数据传到父组件
watch(() => flag.value, (newVal) => {
  emit("editValueFlag", newVal)
})
watch(() => startDragType.value, (newVal) => {
  emit("editStartDataType", newVal)
})

/**
 * 设置修改后的echarts属性
 * @param item 拖动的项
 * @param label 拖拽选项的名称
 * @returns Object
 */
const settingChartItem = (item, label) => {
  if (props.currentChart === 'line') {
    return {
      id: item.id,//组件 ID
      name: label,
      // type: echartsValue.value ? echartsValue.value : item.type,
      type: props.currentChart,
      data: item.data,
      smooth: true,
      color: item.color,
      symbol: item.symbol,
      symbolSize: item.symbolSize,
      showSymbol: item.showSymbol,
      lineStyle: item.lineStyle,
      // emphasis: item.emphasis
    }
  } else if (props.currentChart === 'bar') {
    return {
      id: item.id,
      name: label,
      type: props.currentChart,
      data: item.data,
      color: item.color,
      showBackground: item.showBackground,
      backgroundStyle:item.backgroundStyle
    }
  }

}
/**
 * 封拖拽数据类型为value
 * @param item 拖动的项
 * @param label 拖拽选项的名称
 * @param selectedObj 图例选中状态表
 */
const dragValue = (item, label, selectedObj) => {
  dragChart(item, label, 2)
  option.legend.data.push(label)
  let chartItem = settingChartItem(item, label)
  option.series.push(chartItem)
  for (const propertyName in selectedObj) {
    if (propertyName === label) {
      selectedObj[propertyName] = true
    }
  }
}
/**
 * 封装切换坐标轴数据类型为Category
 * @param item 拖动的项
 * @param label 坐标轴名称
 * @param type 切换x/y轴
 */
const changeTypeToCategory = (item, label, type) => {
  let axis
  if (type === 'xAxis') {
    axis = option.xAxis
  } else {
    axis = option.yAxis
  }
  axis.type = 'category'
  axis.name = label
  axis.data = item.data
}
/**
 * 封装切换坐标轴数据类型为Value
 * @param item 拖动的项item
 * @param type 切换x/y轴
 */
const changeTypeToValue = (item, type) => {
  let axis
  if (type === 'xAxis') {
    axis = option.xAxis
  } else {
    axis = option.yAxis
  }
  axis.type = 'value'
  axis.name = item.name
}
/**
 * 封装拖拽选项修改echarts属性
 * @param item 拖动的项
 * @param label 拖拽选项的名称
 * @param index 区分拖的选项数据:1是key,2是value
 */
const dragChart = (item, label, index) => {
  if (xList.length !== 0 && yList.length === 0) {
    // console.log('x轴有值')
    if (index === 1) {
      changeTypeToCategory(item, label, 'xAxis')
    } else {
      changeTypeToValue(item, 'xAxis')
      option.yAxis.type = 'category'
    }
  } else if (xList.length !== 0 && yList.length !== 0) {
    // console.log('xy有值')
    if (xList[0].dataType === 'value') {
      if (index === 1) {
        changeTypeToCategory(item, label)
      }
      changeTypeToValue(item, 'xAxis')
    } else if (yList[0].dataType === 'value') {
      if (index === 1) {
        changeTypeToCategory(item, label, 'xAxis')
      }
      changeTypeToValue(item)
    }
  } else if (xList.length === 0 && yList.length !== 0) {
    // console.log('y轴有值')
    if (index === 1) {
      changeTypeToCategory(item, label, 'yAxis')
    } else {
      option.xAxis.type = 'category'
      changeTypeToValue(item)
    }
  }
}
/**
 * 从左侧区域移动选项到右侧
 * @param event 拖拽成功event事件
 */
const changeChartItem = (event) => {
  if (event.removed === undefined) return;
  let item = event.removed.element
  // if (echartsValue.value !== 'pie') {
  let label = item.label
  let selectedObj = option.legend.selected
  if (item.dataType === "key") {
    dragChart(item, label, 1)
  } else {
    if (flag.value) return;
    dragValue(item, label, selectedObj)
  }
  // } else {
  //   let chartItem = {
  //     type: 'pie',
  //     data: item,
  //     smooth: true
  //   }
  //   option.series.push(chartItem)
  // }
  props.initCharts()
}

/**
 * 左侧区域开始拖拽事件
 * @param event 开始拖拽的event事件
 */
const startDrag = (event) => {
  startDragType.value = event.item._underlying_vm_.dataType
  if (xList.length === 0 && yList.length === 0) {
    if (startDragType.value === "value") {
      flag.value = true
      ElMessage({
        message: '请先拖动数据类型为key的选项到x轴/y轴.',
        type: 'warning',
      })
    } else {
      flag.value = false
    }
  }
}
</script>