update

src/components/base/echarts/core.ts

@@ -0,0 +1,25 @@
+/**
+ * 按需引入https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
+ */
+import * as echarts from 'echarts/core'
+import { CandlestickChart, CandlestickSeriesOption, BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
+import { MarkLineComponent, DatasetComponent, DataZoomComponent, GridComponent, GridComponentOption } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+    LineChart,
+    MarkLineComponent,
+    DataZoomComponent,
+    DatasetComponent,
+    GridComponent,
+    BarChart,
+    CandlestickChart,
+    CanvasRenderer
+])
+
+type ECOption = echarts.ComposeOption<CandlestickSeriesOption | BarSeriesOption | LineSeriesOption | GridComponentOption>;
+
+export {
+    echarts,
+    ECOption,
+}

src/components/base/echarts/index.ts

@@ -1,10 +1,10 @@
 import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
 import { timerInterceptor } from '@/utils/timer'
+import { echarts, ECOption } from './core'
 import ResizeObserver from 'resize-observer-polyfill'
-import * as echarts from 'echarts'
 
 // 默认配置项
-const defaultOption: echarts.EChartsOption = {
+const defaultOption: ECOption = {
     backgroundColor: 'transparent',
     animation: false,
     grid: {
@@ -23,7 +23,7 @@ export function useEcharts() {
     let chart: echarts.ECharts; // chart 对象
 
     // 图表配置项
-    const setOptions = (option: echarts.EChartsOption, notMerge = false) => {
+    const setOptions = (option: ECOption, notMerge = false) => {
         chart?.setOption(option, notMerge);
     }
 
@@ -32,7 +32,7 @@ export function useEcharts() {
         const el = chartElement.value;
         if (el) {
             // 初始化图表
-            chart = echarts.init(el as HTMLElement);
+            chart = echarts.init(el);
             chart.setOption(defaultOption);
             chart.off('mousemove');
 
@@ -42,7 +42,7 @@ export function useEcharts() {
                 if (chart.containPixel('grid', pointInPixel)) {
                     const pointInGrid = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
                     const dataIndex = pointInGrid[0];
-                    instance?.emit('update:index', dataIndex);
+                    instance?.emit('update:dataIndex', dataIndex);
                 }
             })
 

src/components/base/echarts/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 import { PropType, watch } from 'vue'
-import { EChartsOption } from 'echarts'
+import { ECOption } from './core'
 import { useEcharts } from './index'
 
 const props = defineProps({
@@ -20,10 +20,10 @@ const props = defineProps({
   },
   // 图表配置项
   option: {
-    type: Object as PropType<EChartsOption>,
+    type: Object as PropType<ECOption>,
     default: () => ({}),
   },
-  index: {
+  dataIndex: {
     type: Number,
     default: 0,
   },

src/hooks/echarts/candlestick/interface.ts

@@ -1,5 +1,5 @@
 
-import { EChartsOption } from 'echarts';
+import { ECOption } from '@/components/base/echarts/core'
 
 /**
  * 图表数据集
@@ -78,11 +78,11 @@ export type CCI = {
  */
 export interface EchartsOptions {
     colors: Colors;
-    candlestick: EChartsOption;
-    macd: EChartsOption;
-    vol: EChartsOption;
-    kdj: EChartsOption;
-    cci: EChartsOption;
+    candlestick: ECOption;
+    macd: ECOption;
+    vol: ECOption;
+    kdj: ECOption;
+    cci: ECOption;
 }
 
 /**

src/hooks/echarts/candlestick/options.ts

@@ -1,8 +1,8 @@
 import { reactive, watch } from 'vue'
-import { EChartsOption } from 'echarts';
-import { EchartsDataset, EchartsOptions, Colors } from './interface'
+import { ECOption } from '@/components/base/echarts/core'
 import { timerInterceptor } from '@/utils/timer'
 import { localCache } from '@/store'
+import { EchartsDataset, EchartsOptions, Colors } from './interface'
 import moment from 'moment'
 
 const theme = localCache.getRef('appTheme');
@@ -40,7 +40,7 @@ export function useOptions(dataset: EchartsDataset) {
         cci: {},
     })
 
-    const getDefaultOption = (): EChartsOption => {
+    const getDefaultOption = (): ECOption => {
         const { source } = dataset.candlestick;
         const { xAxisLineColor } = options.colors;
 

src/hooks/echarts/timeline/interface.ts

@@ -1,4 +1,4 @@
-import { EChartsOption, LinearGradientObject } from 'echarts';
+import { echarts, ECOption } from '@/components/base/echarts/core'
 
 /**
  * 图表数据集
@@ -31,7 +31,7 @@ export type Timeline = {
  */
 export interface EchartsOptions {
     colors: Colors;
-    timeline: EChartsOption;
+    timeline: ECOption;
 }
 
 /**
@@ -45,5 +45,5 @@ export interface Colors {
     seriesLineColor: string,
     seriesMarkLabelColor: string,
     seriesMarkLineColor: string,
-    seriesAreaGradients: LinearGradientObject,
+    seriesAreaGradients: echarts.LinearGradientObject,
 }

src/hooks/echarts/timeline/options.ts

@@ -1,8 +1,9 @@
 import { reactive, watch } from 'vue'
-import { EchartsDataset, EchartsOptions, Colors } from './interface'
 import { timerInterceptor } from '@/utils/timer'
 import { localCache } from '@/store'
-import * as echarts from 'echarts'
+import { echarts } from '@/components/base/echarts/core'
+import { EchartsDataset, EchartsOptions, Colors } from './interface'
+
 
 const theme = localCache.getRef('appTheme');
 

src/packages/mobile/components/modules/echarts-kline/index.vue

@@ -17,7 +17,7 @@
                     <li class="legend-item">MA10: {{ selectedItem.ma10 }}</li>
                     <li class="legend-item">MA15: {{ selectedItem.ma15 }}</li>
                 </ul>
-                <app-echarts :option="options.candlestick" v-model:index="dataIndex" @ready="initOptions" />
+                <app-echarts :option="options.candlestick" v-model:dataIndex="dataIndex" @ready="initOptions" />
             </div>
         </template>
     </div>

src/packages/pc/components/modules/echarts-kline/index.vue

@@ -17,7 +17,7 @@
           <li class="legend-item">MA10: {{ selectedItem.ma10 }}</li>
           <li class="legend-item">MA15: {{ selectedItem.ma15 }}</li>
         </ul>
-        <app-echarts :option="options.candlestick" v-model:index="dataIndex" @ready="mainReady" />
+        <app-echarts :option="options.candlestick" v-model:dataIndex="dataIndex" @ready="mainReady" />
       </div>
       <template v-if="showIndicator">
         <div class="app-echats-kline__container indicator">
@@ -28,14 +28,14 @@
               <li class="legend-item">DIF: {{ selectedItem.dif }}</li>
               <li class="legend-item">DEA: {{ selectedItem.dea }}</li>
             </ul>
-            <app-echarts :option="options.macd" v-model:index="dataIndex" @ready="indicatorReady" />
+            <app-echarts :option="options.macd" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
           </section>
           <!-- VOL -->
           <section class="section" v-if="activeSeriesType === EChartsSeriesType.VOL">
             <ul class="legend">
               <li class="legend-item">VOL: {{ selectedItem.vol }}</li>
             </ul>
-            <app-echarts :option="options.vol" v-model:index="dataIndex" @ready="indicatorReady" />
+            <app-echarts :option="options.vol" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
           </section>
           <!-- KDJ -->
           <section class="section" v-if="activeSeriesType === EChartsSeriesType.KDJ">
@@ -44,14 +44,14 @@
               <li class="legend-item">D: {{ selectedItem.d }}</li>
               <li class="legend-item">J: {{ selectedItem.j }}</li>
             </ul>
-            <app-echarts :option="options.kdj" v-model:index="dataIndex" @ready="indicatorReady" />
+            <app-echarts :option="options.kdj" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
           </section>
           <!-- CCI -->
           <section class="section" v-if="activeSeriesType === EChartsSeriesType.CCI">
             <ul class="legend">
               <li class="legend-item">CCI: {{ selectedItem.cci }}</li>
             </ul>
-            <app-echarts :option="options.cci" v-model:index="dataIndex" @ready="indicatorReady" />
+            <app-echarts :option="options.cci" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
           </section>
         </div>
         <app-tab theme="menu" :data-source="tabs" @change="tabChange" />
@@ -62,11 +62,11 @@
 
 <script lang="ts" setup>
 import { ref, PropType, watch } from 'vue'
+import { echarts } from '@/components/base/echarts/core'
 import { EChartsCycleType, EChartsSeriesType } from '@/constants/enum'
 import { useCandlestickChart } from '@/hooks/echarts/candlestick'
 import AppEcharts from '@/components/base/echarts/index.vue'
 import AppTab from '@/components/base/tab/index.vue'
-import * as echarts from 'echarts'
 
 const props = defineProps({
   goodscode: {

src/packages/pc/components/modules/echarts-timeline/index.vue

@@ -11,7 +11,7 @@
         <li class="legend-item">收: {{ selectedItem.close }}</li>
         <li class="legend-item">MA5: {{ selectedItem.ma5 }}</li>
       </ul>
-      <app-echarts :option="options.timeline" v-model:index="dataIndex" @ready="initOptions" />
+      <app-echarts :option="options.timeline" v-model:dataIndex="dataIndex" @ready="initOptions" />
     </template>
   </div>
 </template>