greeks-live-ui 0.0.21 → 0.0.23

package/es/packages/components/panel-option-trade-volume/src/panel-option-trade-volume.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-option-trade-volume.mjs","sources":["../../../../../../../packages/components/panel-option-trade-volume/src/panel-option-trade-volume.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :operations=\"[state.chartType]\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n      @operation=\"handleOperation\"\n    >\n      <template #title>\n        <g-tooltip placement=\"bottom\">\n          {{ t('message.optionTradeVolume') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.optionTradeVolumeTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <!-- <g-select\n          v-model:value=\"state.period\"\n          @change=\"handleChangePeriod\"\n          :size=\"isPC ? 'small' : 'medium'\"\n          class=\"period-select\"\n        >\n          <g-select-option\n            v-for=\"periodItem in periodList\"\n            :value=\"periodItem.value\"\n            >{{ periodItem.label }}</g-select-option\n          >\n        </g-select> -->\n        <!-- <span class=\"period-range h5-hide\">{{ state.periodDateRange }}</span> -->\n        <div class=\"second-select\">\n          <span class=\"h5-hide\">\n            {{ t('message.timeGranularity') }}\n          </span>\n          <g-select\n            v-model:value=\"state.resolution\"\n            @change=\"changeResolution\"\n            :size=\"isPC ? 'small' : 'medium'\"\n          >\n            <g-select-option v-for=\"item in resolutionList\" :value=\"item.value\">\n              {{ item.label }}\n            </g-select-option>\n          </g-select>\n        </div>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"setOption()\"></g-chart>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  useNamespace,\n  useLocale,\n  useDeviceType,\n  useTheme,\n} from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\n\n// import type { OperationType } from '../../chart-panel/src/chart-panel.vue';\n\nexport type OperationType =\n  | 'line'\n  | 'bar'\n  | 'calc'\n  | 'search'\n  | 'toggle'\n  | 'refresh'\n  | 'fullscreen'\n  | 'setting'\n  | 'share';\n\nimport {\n  numberFormat,\n  showDateRange,\n  timestampFormat,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getOptionTradeVolume,\n  IOptionTradeVolumeRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionTradeVolumeEmits,\n  panelOptionTradeVolumeProps,\n} from './panel-option-trade-volume';\n\ndefineOptions({\n  name: 'GPanelOptionTradeVolume',\n});\nconst props = defineProps(panelOptionTradeVolumeProps);\nconst emit = defineEmits(panelOptionTradeVolumeEmits);\nconst ns = useNamespace('panel-option-trade-volume');\nconst { t } = useLocale();\nconst { isMobile, isPC } = useDeviceType();\nconst { isDark } = useTheme();\n\nlet legendList = [\n  {\n    value: '1D',\n    label: '1 D',\n    days: 1,\n    color: '#7630F7',\n  },\n  {\n    value: '7D',\n    label: '1 W',\n    days: 7,\n    color: '#23C343',\n  },\n  {\n    value: '1M',\n    label: '1 M',\n    days: 30,\n    color: '#FFD600',\n  },\n  {\n    value: '2M',\n    label: '2 M',\n    days: 60,\n    color: '#FF8D1F',\n  },\n  {\n    value: '3M',\n    label: '3 M',\n    days: 90,\n    color: '#FF3B30',\n  },\n  {\n    value: '6M',\n    label: '6 M',\n    days: 180,\n    color: '#007AFF',\n  },\n  {\n    value: '1Y',\n    label: '1 Y',\n    days: 365,\n    color: '#00C7BE',\n  },\n];\nconst periodList = computed(() => {\n  let list = [...legendList];\n  if (isMobile.value) {\n    list = list.slice(1);\n  }\n  return list;\n});\n\nconst resolutionList = [\n  {\n    label: '1min',\n    value: '1',\n  },\n  {\n    label: '5min',\n    value: '5',\n  },\n  {\n    label: '15min',\n    value: '15',\n  },\n  {\n    label: '30min',\n    value: '30',\n  },\n  {\n    label: '1H',\n    value: '60',\n  },\n  {\n    label: '1D',\n    value: '1D',\n  },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  period: '3M',\n  periodDateRange: '',\n  chartType: 'line' as OperationType,\n\n  resolution: '60',\n  start_timestamp: 0,\n  end_timestamp: 0,\n\n  chartData: {} as IOptionTradeVolumeRes,\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nwatch(currency, () => {\n  fetchData();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\nconst fetchData = () => {\n  state.loadingFlag = true;\n  const params = {\n    currency: currency.value,\n    resolution: state.resolution,\n    start_timestamp: state.start_timestamp,\n    end_timestamp: state.end_timestamp,\n  };\n  getOptionTradeVolume(params)\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOptionTradeVolumeRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nonMounted(() => {\n  showPeriodDateRange();\n  changeResolution();\n});\n\nconst showPeriodDateRange = () => {\n  const selectedPeriod = periodList.value.find((v) => v.value === state.period);\n  if (!selectedPeriod) return;\n  state.periodDateRange = showDateRange(selectedPeriod.days);\n};\nconst handleChangePeriod = (value: string) => {\n  showPeriodDateRange();\n  fetchData();\n};\n\nconst changeResolution = () => {\n  let curTimestamp = new Date().getTime();\n  state.start_timestamp = curTimestamp - 500 * 24 * 3600000; // 500天\n  state.end_timestamp = curTimestamp;\n  fetchData();\n};\n\nconst handleOperation = (operation: OperationType) => {\n  if (operation === 'line') {\n    state.chartType = 'bar';\n  }\n  if (operation === 'bar') {\n    state.chartType = 'line';\n  }\n};\n\nconst getEchartData = () => {\n  const ticksList = state.chartData?.ticks || [];\n  const volumeBuyList = state.chartData?.volume_buy || [];\n  const volumeSellList = state.chartData?.volume_sell || [];\n\n  let buy_volume = [];\n  let sell_volume = [];\n\n  for (let i = 0; i < ticksList.length; i++) {\n    let item = ticksList[i];\n    buy_volume.push([item, volumeBuyList[i]]);\n    sell_volume.push([item, volumeSellList[i]]);\n  }\n\n  return {\n    buy_volume,\n    sell_volume,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const { buy_volume, sell_volume } = params;\n\n  const option: any = {\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        // 坐标轴指示器，坐标轴触发有效\n        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'\n      },\n      formatter: (\n        params: Array<{\n          axisValueLabel: string;\n          axisValue: string;\n          seriesName: string;\n          color: string;\n          value: number;\n          marker: string;\n          data: number[];\n        }>\n      ) => {\n        try {\n          let html = `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\">\n              <div>${timestampFormat(\n                params[0].axisValue,\n                '{y}/{m}/{d} {h}:{i}:{s}'\n              )}</div>\n            </div>\n            `;\n          if (params[0]) {\n            html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;\">${params[0].marker}&nbsp;${\n              params[0].seriesName\n            }</div>\n                <div>&nbsp;${numberFormat(params[0].data[1], 2)}</div>\n              </div>`;\n            if (params[1]) {\n              html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;\">${params[1].marker}&nbsp;${\n                params[1].seriesName\n              }</div>\n                <div>&nbsp;${numberFormat(params[1].data[1], 2)}</div>\n              </div>`;\n              html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;margin-left: 18px;\">Total</div>\n                <div>&nbsp;${numberFormat(\n                  parseFloat(String(params[0].data[1])) +\n                    parseFloat(String(params[1].data[1])),\n                  2\n                )}</div>\n              </div>`;\n            }\n          }\n          return html;\n        } catch (e) {\n          return '';\n        }\n      },\n      backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n      textStyle: {\n        color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n        fontSize: 12,\n        lineHeight: 16,\n        fontWeight: 400,\n      },\n    },\n    legend: {\n      top: '3%',\n    },\n    xAxis: {\n      type: 'time',\n      boundaryGap: true,\n      // data: date,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n        // rotate: state.dataType === 'strike' ? 90 : 0, // 倾斜度 -90 至 90 默认为0\n      },\n      axisTick: {\n        show: false, // 隐藏刻度线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      axisLine: {\n        show: false, // 隐藏坐标轴轴线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        show: !isMobile.value && !isDark.value, // 显示 X 轴网格线\n        lineStyle: {\n          color: '#F1F1F1', // 网格线颜色\n          width: 1, // 网格线宽度\n          type: 'dotted', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    yAxis: {\n      type: 'value',\n      scale: true,\n      nameLocation: 'end',\n      nameGap: '20',\n      splitNumber: 6,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n      },\n      axisLine: {\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        lineStyle: {\n          color: isDark.value ? '#2B2F32' : '#F1F1F1', // 网格线颜色 浅色/Grey/3 '#F1F1F1'\n          width: 1, // 网格线宽度\n          type: 'solid', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    grid: {\n      top: 20,\n      left: 'left',\n      right: 27,\n      bottom: 70,\n      containLabel: true,\n    },\n    dataZoom: [\n      {\n        type: 'inside', //详细配置可见echarts官网\n        start: 80,\n        end: 100,\n        handleIcon:\n          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',\n      },\n      {\n        show: true,\n        type: 'slider',\n        // labelFormatter: (value) => {\n        //   console.log(value,'zzz')\n        //   return filters.timestampFormat2(value)\n        // },\n        rangeMode: 'percent',\n        bottom: '20px',\n        start: 80,\n        end: 100,\n        handleIcon:\n          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',\n      },\n    ],\n\n    series: [\n      {\n        name: 'Buy',\n        type: 'bar',\n        stack: 'total',\n        color: '#F76560',\n        data: buy_volume,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n      {\n        name: 'Sell',\n        type: 'bar',\n        stack: 'total',\n        color: '#4CD263',\n        data: sell_volume,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n    ],\n  };\n\n  if (state.chartType === 'line') {\n    option.series = [\n      {\n        name: 'Buy',\n        type: 'line',\n        color: '#F76560',\n        data: buy_volume,\n        symbol: 'none',\n      },\n      {\n        type: 'line',\n        name: 'Sell',\n        color: '#4CD263',\n        data: sell_volume,\n        symbol: 'none',\n      },\n    ];\n    option.legend = {\n      top: '3%',\n      icon: 'rect', // 使用矩形作为图标，使其看起来像短横线\n      itemWidth: 14, // 控制短横线的长度\n      itemHeight: 2, // 控制短横线的粗细 (高度)\n      itemGap: 16, // 控制图例项之间的间距 (可选)\n      textStyle: {\n        // 控制图例文本样式 (可选)\n        color: '#596169', // 文本颜色\n        fontSize: 12, // 文本字体大小\n      },\n      lineStyle: {\n        inactiveColor: isDark.value ? '#2B2F32' : '#DEE2E6', // 浅色/Grey/3 图例关闭时的线条描边颜色\n      },\n      inactiveColor: isDark.value ? '#495057' : '#BDC4CB', // 浅色/Grey/5 图例关闭时的颜色\n    };\n  }\n\n  return option;\n};\n\nconst setOption = () => {\n  return getEchartOption(getEchartData());\n};\n</script>\n"],"names":["params"],"mappings":"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"}
+{"version":3,"file":"panel-option-trade-volume.mjs","sources":["../../../../../../../packages/components/panel-option-trade-volume/src/panel-option-trade-volume.ts"],"sourcesContent":["import { buildProps } from '@greeks-live-ui/utils'\nimport type PanelOptionTradeVolume from './panel-option-trade-volume.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const panelOptionTradeVolumeEmits = {\n  'update:currency': (currency: string) => true,\n  'update:exchange': (exchange: string) => true,\n}\nexport type PanelOptionTradeVolumeEmits = typeof panelOptionTradeVolumeEmits\nexport const panelOptionTradeVolumeProps = buildProps({\n  defaultCurrency: {\n    type: String,\n    required: false,\n  },\n  defaultExchange: {\n    type: String,\n    required: false,\n  },\n  currency: {\n    type: String,\n    required: false,\n  },\n  exchange: {\n    type: String,\n    required: false,\n  },\n})\nexport type PanelOptionTradeVolumeProps = ExtractPropTypes<typeof panelOptionTradeVolumeProps>\nexport type PanelOptionTradeVolumeInstance = InstanceType<typeof PanelOptionTradeVolume>\n"],"names":[],"mappings":";;;AAIO,MAAM,2BAA8B,GAAA;AAAA,EACzC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAAA,EACzC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAC3C,EAAA;AAEO,MAAM,8BAA8B,UAAW,CAAA;AAAA,EACpD,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AACF,CAAC;;;;"}

package/es/packages/components/panel-option-trade-volume/src/panel-option-trade-volume2.mjs

@@ -1,28 +1,510 @@
-import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { defineComponent, computed, reactive, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList } from 'vue';
+import '../../../hooks/index.mjs';
+import { showDateRange, timestampFormat, numberFormat } from '../../../utils/chartHelp.mjs';
+import { getOptionTradeVolume } from '../../../utils/dataLab.mjs';
+import { panelOptionTradeVolumeProps, panelOptionTradeVolumeEmits } from './panel-option-trade-volume.mjs';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { useDeviceType } from '../../../hooks/use-device-type/index.mjs';
+import { useTheme } from '../../../hooks/use-theme/index.mjs';
 
-const panelOptionTradeVolumeEmits = {
-  "update:currency": (currency) => true,
-  "update:exchange": (exchange) => true
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = { class: "second-select" };
+const _hoisted_3 = { class: "h5-hide" };
+const _hoisted_4 = {
+  class: "echart",
+  ref: "echart"
 };
-const panelOptionTradeVolumeProps = buildProps({
-  defaultCurrency: {
-    type: String,
-    required: false
-  },
-  defaultExchange: {
-    type: String,
-    required: false
-  },
-  currency: {
-    type: String,
-    required: false
-  },
-  exchange: {
-    type: String,
-    required: false
+const __default__ = {
+  name: "GPanelOptionTradeVolume"
+};
+const _sfc_main = defineComponent({
+  ...__default__,
+  props: panelOptionTradeVolumeProps,
+  emits: panelOptionTradeVolumeEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = useNamespace("panel-option-trade-volume");
+    const { t } = useLocale();
+    const { isMobile, isPC } = useDeviceType();
+    const { isDark } = useTheme();
+    let legendList = [
+      {
+        value: "1D",
+        label: "1 D",
+        days: 1,
+        color: "#7630F7"
+      },
+      {
+        value: "7D",
+        label: "1 W",
+        days: 7,
+        color: "#23C343"
+      },
+      {
+        value: "1M",
+        label: "1 M",
+        days: 30,
+        color: "#FFD600"
+      },
+      {
+        value: "2M",
+        label: "2 M",
+        days: 60,
+        color: "#FF8D1F"
+      },
+      {
+        value: "3M",
+        label: "3 M",
+        days: 90,
+        color: "#FF3B30"
+      },
+      {
+        value: "6M",
+        label: "6 M",
+        days: 180,
+        color: "#007AFF"
+      },
+      {
+        value: "1Y",
+        label: "1 Y",
+        days: 365,
+        color: "#00C7BE"
+      }
+    ];
+    const periodList = computed(() => {
+      let list = [...legendList];
+      if (isMobile.value) {
+        list = list.slice(1);
+      }
+      return list;
+    });
+    const resolutionList = [
+      {
+        label: "1min",
+        value: "1"
+      },
+      {
+        label: "5min",
+        value: "5"
+      },
+      {
+        label: "15min",
+        value: "15"
+      },
+      {
+        label: "30min",
+        value: "30"
+      },
+      {
+        label: "1H",
+        value: "60"
+      },
+      {
+        label: "1D",
+        value: "1D"
+      }
+    ];
+    const state = reactive({
+      loadingFlag: false,
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      period: "3M",
+      periodDateRange: "",
+      chartType: "line",
+      resolution: "60",
+      start_timestamp: 0,
+      end_timestamp: 0,
+      chartData: {}
+    });
+    const currency = computed({
+      get: () => props.currency || state.currency || "BTC",
+      set: (newVal) => {
+        props.currency ? emit("update:currency", newVal) : state.currency = newVal;
+      }
+    });
+    const exchange = computed({
+      get: () => props.exchange || state.exchange || "Deribit",
+      set: (newVal) => {
+        props.exchange ? emit("update:exchange", newVal) : state.exchange = newVal;
+      }
+    });
+    watch(currency, () => {
+      fetchData();
+    });
+    watch(exchange, () => {
+      fetchData();
+    });
+    const fetchData = () => {
+      state.loadingFlag = true;
+      const params = {
+        currency: currency.value,
+        resolution: state.resolution,
+        start_timestamp: state.start_timestamp,
+        end_timestamp: state.end_timestamp
+      };
+      getOptionTradeVolume(params).then((res) => {
+        if (res && res.code === 200) {
+          state.chartData = res.data;
+        }
+      }).finally(() => {
+        state.loadingFlag = false;
+      });
+    };
+    onMounted(() => {
+      showPeriodDateRange();
+      changeResolution();
+    });
+    const showPeriodDateRange = () => {
+      const selectedPeriod = periodList.value.find((v) => v.value === state.period);
+      if (!selectedPeriod)
+        return;
+      state.periodDateRange = showDateRange(selectedPeriod.days);
+    };
+    const handleChangePeriod = (value) => {
+      showPeriodDateRange();
+      fetchData();
+    };
+    const changeResolution = () => {
+      let curTimestamp = (/* @__PURE__ */ new Date()).getTime();
+      state.start_timestamp = curTimestamp - 500 * 24 * 36e5;
+      state.end_timestamp = curTimestamp;
+      fetchData();
+    };
+    const handleOperation = (operation) => {
+      if (operation === "line") {
+        state.chartType = "bar";
+      }
+      if (operation === "bar") {
+        state.chartType = "line";
+      }
+    };
+    const getEchartData = () => {
+      var _a, _b, _c;
+      const ticksList = ((_a = state.chartData) == null ? void 0 : _a.ticks) || [];
+      const volumeBuyList = ((_b = state.chartData) == null ? void 0 : _b.volume_buy) || [];
+      const volumeSellList = ((_c = state.chartData) == null ? void 0 : _c.volume_sell) || [];
+      let buy_volume = [];
+      let sell_volume = [];
+      for (let i = 0; i < ticksList.length; i++) {
+        let item = ticksList[i];
+        buy_volume.push([item, volumeBuyList[i]]);
+        sell_volume.push([item, volumeSellList[i]]);
+      }
+      return {
+        buy_volume,
+        sell_volume
+      };
+    };
+    const getEchartOption = (params) => {
+      if (!params)
+        return {};
+      const { buy_volume, sell_volume } = params;
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          },
+          formatter: (params2) => {
+            try {
+              let html = `
+            <div style="display: flex;justify-content: space-between;align-items: center;">
+              <div>${timestampFormat(
+                params2[0].axisValue,
+                "{y}/{m}/{d} {h}:{i}:{s}"
+              )}</div>
+            </div>
+            `;
+              if (params2[0]) {
+                html += `<div style="display: flex;justify-content: space-between;align-items: center;">
+                <div style="margin-right: 40px;">${params2[0].marker}&nbsp;${params2[0].seriesName}</div>
+                <div>&nbsp;${numberFormat(params2[0].data[1], 2)}</div>
+              </div>`;
+                if (params2[1]) {
+                  html += `<div style="display: flex;justify-content: space-between;align-items: center;">
+                <div style="margin-right: 40px;">${params2[1].marker}&nbsp;${params2[1].seriesName}</div>
+                <div>&nbsp;${numberFormat(params2[1].data[1], 2)}</div>
+              </div>`;
+                  html += `<div style="display: flex;justify-content: space-between;align-items: center;">
+                <div style="margin-right: 40px;margin-left: 18px;">Total</div>
+                <div>&nbsp;${numberFormat(
+                    parseFloat(String(params2[0].data[1])) + parseFloat(String(params2[1].data[1])),
+                    2
+                  )}</div>
+              </div>`;
+                }
+              }
+              return html;
+            } catch (e) {
+              return "";
+            }
+          },
+          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
+          textStyle: {
+            color: isDark.value ? "#000000" : "#FFFFFF",
+            fontSize: 12,
+            lineHeight: 16,
+            fontWeight: 400
+          }
+        },
+        legend: {
+          top: "3%"
+        },
+        xAxis: {
+          type: "time",
+          boundaryGap: true,
+          axisLabel: {
+            show: true,
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          axisTick: {
+            show: false,
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          splitLine: {
+            show: !isMobile.value && !isDark.value,
+            lineStyle: {
+              color: "#F1F1F1",
+              width: 1,
+              type: "dotted"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          scale: true,
+          nameLocation: "end",
+          nameGap: "20",
+          splitNumber: 6,
+          axisLabel: {
+            show: true,
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          axisLine: {
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: isDark.value ? "#2B2F32" : "#F1F1F1",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        grid: {
+          top: 20,
+          left: "left",
+          right: 27,
+          bottom: 70,
+          containLabel: true
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 80,
+            end: 100,
+            handleIcon: "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
+          },
+          {
+            show: true,
+            type: "slider",
+            rangeMode: "percent",
+            bottom: "20px",
+            start: 80,
+            end: 100,
+            handleIcon: "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
+          }
+        ],
+        series: [
+          {
+            name: "Buy",
+            type: "bar",
+            stack: "total",
+            color: "#F76560",
+            data: buy_volume,
+            itemStyle: {
+              borderRadius: 0
+            }
+          },
+          {
+            name: "Sell",
+            type: "bar",
+            stack: "total",
+            color: "#4CD263",
+            data: sell_volume,
+            itemStyle: {
+              borderRadius: 0
+            }
+          }
+        ]
+      };
+      if (state.chartType === "line") {
+        option.series = [
+          {
+            name: "Buy",
+            type: "line",
+            color: "#F76560",
+            data: buy_volume,
+            symbol: "none"
+          },
+          {
+            type: "line",
+            name: "Sell",
+            color: "#4CD263",
+            data: sell_volume,
+            symbol: "none"
+          }
+        ];
+        option.legend = {
+          top: "3%",
+          icon: "rect",
+          itemWidth: 14,
+          itemHeight: 2,
+          itemGap: 16,
+          textStyle: {
+            color: "#596169",
+            fontSize: 12
+          },
+          lineStyle: {
+            inactiveColor: isDark.value ? "#2B2F32" : "#DEE2E6"
+          },
+          inactiveColor: isDark.value ? "#495057" : "#BDC4CB"
+        };
+      }
+      return option;
+    };
+    const chartOption = computed(() => {
+      return getEchartOption(getEchartData());
+    });
+    return (_ctx, _cache) => {
+      const _component_g_icon = resolveComponent("g-icon");
+      const _component_g_tooltip = resolveComponent("g-tooltip");
+      const _component_g_select_option = resolveComponent("g-select-option");
+      const _component_g_select = resolveComponent("g-select");
+      const _component_g_chart = resolveComponent("g-chart");
+      const _component_g_chart_panel = resolveComponent("g-chart-panel");
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(ns).b()])
+        },
+        [
+          createVNode(_component_g_chart_panel, {
+            currency: unref(currency),
+            "onUpdate:currency": _cache[1] || (_cache[1] = ($event) => isRef(currency) ? currency.value = $event : null),
+            exchange: unref(exchange),
+            "onUpdate:exchange": _cache[2] || (_cache[2] = ($event) => isRef(exchange) ? exchange.value = $event : null),
+            operations: [state.chartType],
+            loading: state.loadingFlag,
+            onRefresh: fetchData,
+            onOperation: handleOperation
+          }, {
+            title: withCtx(() => [
+              createVNode(_component_g_tooltip, { placement: "bottom" }, {
+                title: withCtx(() => [
+                  createElementVNode("div", {
+                    innerHTML: unref(t)("message.optionTradeVolumeTips")
+                  }, null, 8, _hoisted_1)
+                ]),
+                default: withCtx(() => [
+                  createTextVNode(
+                    toDisplayString(unref(t)("message.optionTradeVolume")) + " ",
+                    1
+                  ),
+                  createVNode(_component_g_icon, { type: "info_question_circle" })
+                ]),
+                _: 1
+              })
+            ]),
+            tool: withCtx(() => [
+              createCommentVNode(` <g-select
+          v-model:value="state.period"
+          @change="handleChangePeriod"
+          :size="isPC ? 'small' : 'medium'"
+          class="period-select"
+        >
+          <g-select-option
+            v-for="periodItem in periodList"
+            :value="periodItem.value"
+            >{{ periodItem.label }}</g-select-option
+          >
+        </g-select> `),
+              createCommentVNode(' <span class="period-range h5-hide">{{ state.periodDateRange }}</span> '),
+              createElementVNode("div", _hoisted_2, [
+                createElementVNode(
+                  "span",
+                  _hoisted_3,
+                  toDisplayString(unref(t)("message.timeGranularity")),
+                  1
+                ),
+                createVNode(_component_g_select, {
+                  value: state.resolution,
+                  "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.resolution = $event),
+                  onChange: changeResolution,
+                  size: unref(isPC) ? "small" : "medium"
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(resolutionList, (item) => {
+                        return createVNode(_component_g_select_option, {
+                          value: item.value
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(
+                              toDisplayString(item.label),
+                              1
+                            )
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }),
+                      64
+                    ))
+                  ]),
+                  _: 1
+                }, 8, ["value", "size"])
+              ])
+            ]),
+            body: withCtx(() => [
+              createElementVNode(
+                "div",
+                _hoisted_4,
+                [
+                  createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: unref(chartOption)
+                  }, null, 8, ["option"])
+                ],
+                512
+              )
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "operations", "loading"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelOptionTradeVolume = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-option-trade-volume/src/panel-option-trade-volume.vue"]]);
 
-export { panelOptionTradeVolumeEmits, panelOptionTradeVolumeProps };
+export { PanelOptionTradeVolume as default };
 //# sourceMappingURL=panel-option-trade-volume2.mjs.map

package/es/packages/components/panel-option-trade-volume/src/panel-option-trade-volume2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-option-trade-volume2.mjs","sources":["../../../../../../../packages/components/panel-option-trade-volume/src/panel-option-trade-volume.ts"],"sourcesContent":["import { buildProps } from '@greeks-live-ui/utils'\nimport type PanelOptionTradeVolume from './panel-option-trade-volume.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const panelOptionTradeVolumeEmits = {\n  'update:currency': (currency: string) => true,\n  'update:exchange': (exchange: string) => true,\n}\nexport type PanelOptionTradeVolumeEmits = typeof panelOptionTradeVolumeEmits\nexport const panelOptionTradeVolumeProps = buildProps({\n  defaultCurrency: {\n    type: String,\n    required: false,\n  },\n  defaultExchange: {\n    type: String,\n    required: false,\n  },\n  currency: {\n    type: String,\n    required: false,\n  },\n  exchange: {\n    type: String,\n    required: false,\n  },\n})\nexport type PanelOptionTradeVolumeProps = ExtractPropTypes<typeof panelOptionTradeVolumeProps>\nexport type PanelOptionTradeVolumeInstance = InstanceType<typeof PanelOptionTradeVolume>\n"],"names":[],"mappings":";;;AAIO,MAAM,2BAA8B,GAAA;AAAA,EACzC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAAA,EACzC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAC3C,EAAA;AAEO,MAAM,8BAA8B,UAAW,CAAA;AAAA,EACpD,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AACF,CAAC;;;;"}
+{"version":3,"file":"panel-option-trade-volume2.mjs","sources":["../../../../../../../packages/components/panel-option-trade-volume/src/panel-option-trade-volume.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :operations=\"[state.chartType]\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n      @operation=\"handleOperation\"\n    >\n      <template #title>\n        <g-tooltip placement=\"bottom\">\n          {{ t('message.optionTradeVolume') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.optionTradeVolumeTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <!-- <g-select\n          v-model:value=\"state.period\"\n          @change=\"handleChangePeriod\"\n          :size=\"isPC ? 'small' : 'medium'\"\n          class=\"period-select\"\n        >\n          <g-select-option\n            v-for=\"periodItem in periodList\"\n            :value=\"periodItem.value\"\n            >{{ periodItem.label }}</g-select-option\n          >\n        </g-select> -->\n        <!-- <span class=\"period-range h5-hide\">{{ state.periodDateRange }}</span> -->\n        <div class=\"second-select\">\n          <span class=\"h5-hide\">\n            {{ t('message.timeGranularity') }}\n          </span>\n          <g-select\n            v-model:value=\"state.resolution\"\n            @change=\"changeResolution\"\n            :size=\"isPC ? 'small' : 'medium'\"\n          >\n            <g-select-option v-for=\"item in resolutionList\" :value=\"item.value\">\n              {{ item.label }}\n            </g-select-option>\n          </g-select>\n        </div>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"chartOption\"></g-chart>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  useNamespace,\n  useLocale,\n  useDeviceType,\n  useTheme,\n} from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\n\n// import type { OperationType } from '../../chart-panel/src/chart-panel.vue';\n\nexport type OperationType =\n  | 'line'\n  | 'bar'\n  | 'calc'\n  | 'search'\n  | 'toggle'\n  | 'refresh'\n  | 'fullscreen'\n  | 'setting'\n  | 'share';\n\nimport {\n  numberFormat,\n  showDateRange,\n  timestampFormat,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getOptionTradeVolume,\n  IOptionTradeVolumeRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionTradeVolumeEmits,\n  panelOptionTradeVolumeProps,\n} from './panel-option-trade-volume';\n\ndefineOptions({\n  name: 'GPanelOptionTradeVolume',\n});\nconst props = defineProps(panelOptionTradeVolumeProps);\nconst emit = defineEmits(panelOptionTradeVolumeEmits);\nconst ns = useNamespace('panel-option-trade-volume');\nconst { t } = useLocale();\nconst { isMobile, isPC } = useDeviceType();\nconst { isDark } = useTheme();\n\nlet legendList = [\n  {\n    value: '1D',\n    label: '1 D',\n    days: 1,\n    color: '#7630F7',\n  },\n  {\n    value: '7D',\n    label: '1 W',\n    days: 7,\n    color: '#23C343',\n  },\n  {\n    value: '1M',\n    label: '1 M',\n    days: 30,\n    color: '#FFD600',\n  },\n  {\n    value: '2M',\n    label: '2 M',\n    days: 60,\n    color: '#FF8D1F',\n  },\n  {\n    value: '3M',\n    label: '3 M',\n    days: 90,\n    color: '#FF3B30',\n  },\n  {\n    value: '6M',\n    label: '6 M',\n    days: 180,\n    color: '#007AFF',\n  },\n  {\n    value: '1Y',\n    label: '1 Y',\n    days: 365,\n    color: '#00C7BE',\n  },\n];\nconst periodList = computed(() => {\n  let list = [...legendList];\n  if (isMobile.value) {\n    list = list.slice(1);\n  }\n  return list;\n});\n\nconst resolutionList = [\n  {\n    label: '1min',\n    value: '1',\n  },\n  {\n    label: '5min',\n    value: '5',\n  },\n  {\n    label: '15min',\n    value: '15',\n  },\n  {\n    label: '30min',\n    value: '30',\n  },\n  {\n    label: '1H',\n    value: '60',\n  },\n  {\n    label: '1D',\n    value: '1D',\n  },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  period: '3M',\n  periodDateRange: '',\n  chartType: 'line' as OperationType,\n\n  resolution: '60',\n  start_timestamp: 0,\n  end_timestamp: 0,\n\n  chartData: {} as IOptionTradeVolumeRes,\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nwatch(currency, () => {\n  fetchData();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\nconst fetchData = () => {\n  state.loadingFlag = true;\n  const params = {\n    currency: currency.value,\n    resolution: state.resolution,\n    start_timestamp: state.start_timestamp,\n    end_timestamp: state.end_timestamp,\n  };\n  getOptionTradeVolume(params)\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOptionTradeVolumeRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nonMounted(() => {\n  showPeriodDateRange();\n  changeResolution();\n});\n\nconst showPeriodDateRange = () => {\n  const selectedPeriod = periodList.value.find((v) => v.value === state.period);\n  if (!selectedPeriod) return;\n  state.periodDateRange = showDateRange(selectedPeriod.days);\n};\nconst handleChangePeriod = (value: string) => {\n  showPeriodDateRange();\n  fetchData();\n};\n\nconst changeResolution = () => {\n  let curTimestamp = new Date().getTime();\n  state.start_timestamp = curTimestamp - 500 * 24 * 3600000; // 500天\n  state.end_timestamp = curTimestamp;\n  fetchData();\n};\n\nconst handleOperation = (operation: OperationType) => {\n  if (operation === 'line') {\n    state.chartType = 'bar';\n  }\n  if (operation === 'bar') {\n    state.chartType = 'line';\n  }\n};\n\nconst getEchartData = () => {\n  const ticksList = state.chartData?.ticks || [];\n  const volumeBuyList = state.chartData?.volume_buy || [];\n  const volumeSellList = state.chartData?.volume_sell || [];\n\n  let buy_volume = [];\n  let sell_volume = [];\n\n  for (let i = 0; i < ticksList.length; i++) {\n    let item = ticksList[i];\n    buy_volume.push([item, volumeBuyList[i]]);\n    sell_volume.push([item, volumeSellList[i]]);\n  }\n\n  return {\n    buy_volume,\n    sell_volume,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const { buy_volume, sell_volume } = params;\n\n  const option: any = {\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        // 坐标轴指示器，坐标轴触发有效\n        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'\n      },\n      formatter: (\n        params: Array<{\n          axisValueLabel: string;\n          axisValue: string;\n          seriesName: string;\n          color: string;\n          value: number;\n          marker: string;\n          data: number[];\n        }>\n      ) => {\n        try {\n          let html = `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\">\n              <div>${timestampFormat(\n                params[0].axisValue,\n                '{y}/{m}/{d} {h}:{i}:{s}'\n              )}</div>\n            </div>\n            `;\n          if (params[0]) {\n            html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;\">${params[0].marker}&nbsp;${\n              params[0].seriesName\n            }</div>\n                <div>&nbsp;${numberFormat(params[0].data[1], 2)}</div>\n              </div>`;\n            if (params[1]) {\n              html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;\">${params[1].marker}&nbsp;${\n                params[1].seriesName\n              }</div>\n                <div>&nbsp;${numberFormat(params[1].data[1], 2)}</div>\n              </div>`;\n              html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;margin-left: 18px;\">Total</div>\n                <div>&nbsp;${numberFormat(\n                  parseFloat(String(params[0].data[1])) +\n                    parseFloat(String(params[1].data[1])),\n                  2\n                )}</div>\n              </div>`;\n            }\n          }\n          return html;\n        } catch (e) {\n          return '';\n        }\n      },\n      backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n      textStyle: {\n        color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n        fontSize: 12,\n        lineHeight: 16,\n        fontWeight: 400,\n      },\n    },\n    legend: {\n      top: '3%',\n    },\n    xAxis: {\n      type: 'time',\n      boundaryGap: true,\n      // data: date,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n        // rotate: state.dataType === 'strike' ? 90 : 0, // 倾斜度 -90 至 90 默认为0\n      },\n      axisTick: {\n        show: false, // 隐藏刻度线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      axisLine: {\n        show: false, // 隐藏坐标轴轴线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        show: !isMobile.value && !isDark.value, // 显示 X 轴网格线\n        lineStyle: {\n          color: '#F1F1F1', // 网格线颜色\n          width: 1, // 网格线宽度\n          type: 'dotted', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    yAxis: {\n      type: 'value',\n      scale: true,\n      nameLocation: 'end',\n      nameGap: '20',\n      splitNumber: 6,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n      },\n      axisLine: {\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        lineStyle: {\n          color: isDark.value ? '#2B2F32' : '#F1F1F1', // 网格线颜色 浅色/Grey/3 '#F1F1F1'\n          width: 1, // 网格线宽度\n          type: 'solid', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    grid: {\n      top: 20,\n      left: 'left',\n      right: 27,\n      bottom: 70,\n      containLabel: true,\n    },\n    dataZoom: [\n      {\n        type: 'inside', //详细配置可见echarts官网\n        start: 80,\n        end: 100,\n        handleIcon:\n          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',\n      },\n      {\n        show: true,\n        type: 'slider',\n        // labelFormatter: (value) => {\n        //   console.log(value,'zzz')\n        //   return filters.timestampFormat2(value)\n        // },\n        rangeMode: 'percent',\n        bottom: '20px',\n        start: 80,\n        end: 100,\n        handleIcon:\n          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',\n      },\n    ],\n\n    series: [\n      {\n        name: 'Buy',\n        type: 'bar',\n        stack: 'total',\n        color: '#F76560',\n        data: buy_volume,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n      {\n        name: 'Sell',\n        type: 'bar',\n        stack: 'total',\n        color: '#4CD263',\n        data: sell_volume,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n    ],\n  };\n\n  if (state.chartType === 'line') {\n    option.series = [\n      {\n        name: 'Buy',\n        type: 'line',\n        color: '#F76560',\n        data: buy_volume,\n        symbol: 'none',\n      },\n      {\n        type: 'line',\n        name: 'Sell',\n        color: '#4CD263',\n        data: sell_volume,\n        symbol: 'none',\n      },\n    ];\n    option.legend = {\n      top: '3%',\n      icon: 'rect', // 使用矩形作为图标，使其看起来像短横线\n      itemWidth: 14, // 控制短横线的长度\n      itemHeight: 2, // 控制短横线的粗细 (高度)\n      itemGap: 16, // 控制图例项之间的间距 (可选)\n      textStyle: {\n        // 控制图例文本样式 (可选)\n        color: '#596169', // 文本颜色\n        fontSize: 12, // 文本字体大小\n      },\n      lineStyle: {\n        inactiveColor: isDark.value ? '#2B2F32' : '#DEE2E6', // 浅色/Grey/3 图例关闭时的线条描边颜色\n      },\n      inactiveColor: isDark.value ? '#495057' : '#BDC4CB', // 浅色/Grey/5 图例关闭时的颜色\n    };\n  }\n\n  return option;\n};\n\nconst chartOption = computed(() => {\n  return getEchartOption(getEchartData());\n});\n</script>\n"],"names":["params"],"mappings":"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"}