diff --git a/components.d.ts b/components.d.ts index 03ff7d5..5e2d588 100644 --- a/components.d.ts +++ b/components.d.ts @@ -42,6 +42,9 @@ declare module 'vue' { CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default'] CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default'] CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default'] + IndexCo: typeof import('./src/components/custom-echart-line/index-co.vue')['default'] + IndexRe: typeof import('./src/components/new-hyaline-cake/index-re.vue')['default'] + NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SubTop: typeof import('./src/components/subTop.vue')['default'] diff --git a/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue b/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue new file mode 100644 index 0000000..1256fe2 --- /dev/null +++ b/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue @@ -0,0 +1,463 @@ + + + + + + + diff --git a/src/components/custom-rank-list/index.vue b/src/components/custom-rank-list/index.vue index 789c9d5..52cbf9c 100644 --- a/src/components/custom-rank-list/index.vue +++ b/src/components/custom-rank-list/index.vue @@ -204,6 +204,7 @@ onUnmounted(() => { display: flex; align-items: center; font-size: 13px; + flex: none; .rank { margin-right: 5px; } @@ -212,7 +213,7 @@ onUnmounted(() => { } } .ranking-column { - width: 100%; + flex: 1; .inside-column { position: relative; overflow: hidden; diff --git a/src/hooks/useEcharts.js b/src/hooks/useEcharts.js index 24194a5..90d1065 100644 --- a/src/hooks/useEcharts.js +++ b/src/hooks/useEcharts.js @@ -7,9 +7,9 @@ import echarts from '../utils/echarts'; export const useEcharts = (elRef, theme = 'default') => { // 新增轮播相关状态 - const autoPlayTimer = ref(null); - const currentIndex = ref(-1); - const dataLength = ref(0); + const autoPlayTimer = ref(null); // 定时器句柄 + const currentIndex = ref(-1); // 当前高亮的数据索引 + const dataLength = ref(0); // 当前系列的数据总长度 let mapClickHandler = null; @@ -18,29 +18,41 @@ export const useEcharts = (elRef, theme = 'default') => { const { interval = 2000, // 轮播间隔(ms) seriesIndex = 0, // 默认操作第一个系列 - showTooltip = true, // 是否显示提示框 + showTooltip = false, // 是否显示提示框,默认是false,外部配置了,无论是否true都会显示 + showMarkPoint = true, // 是否显示默认的动态标记点 } = options; stopAutoPlay(); // 先停止已有轮播 - // 获取数据长度 + // 获取当前系列的数据长度 const seriesData = unref(getOptions).series?.[seriesIndex]?.data; + const xAxisData = unref(getOptions).xAxis?.data || []; + // 获取当前 option 中的 yAxis 类型来判断是否倒置 + const axisType = unref(getOptions).yAxis?.type; + const isCategoryY = axisType === 'category'; + dataLength.value = seriesData?.length || 0; if (dataLength.value === 0) return; autoPlayTimer.value = setInterval(() => { currentIndex.value = (currentIndex.value + 1) % dataLength.value; + // 更新MarkPoint点信息 + if (showMarkPoint) { + updateMarkPoint(currentIndex.value, xAxisData, seriesData, isCategoryY); + } - // 执行轮播动作 + // 重置之前的高亮 chartInstance?.dispatchAction({ type: 'downplay', seriesIndex: seriesIndex, }); + // 高亮当前项 chartInstance?.dispatchAction({ type: 'highlight', seriesIndex: seriesIndex, dataIndex: currentIndex.value, }); + // 显示 tooltip(可选) if (showTooltip) { chartInstance?.dispatchAction({ type: 'showTip', @@ -51,6 +63,40 @@ export const useEcharts = (elRef, theme = 'default') => { }, interval); }; + function updateMarkPoint(index, xAxis, seriesData, isCategoryY) { + const x = isCategoryY ? seriesData[index] : xAxis[index]; + const y = isCategoryY ? xAxis[index] : seriesData[index]; + const updatedSeries = chartInstance.getOption().series; + + if (updatedSeries[0].markPoint && Array.isArray(updatedSeries[0].markPoint.data) && updatedSeries[0].markPoint.data.length > 1) { + // 已初始化:只改坐标 + updatedSeries[0].markPoint.data.forEach((el) => { + el.coord = [x, y]; + }); + } else { + // 未初始化或数据不对:重建 + updatedSeries[0].markPoint = { + symbol: 'circle', + symbolSize: 8, + itemStyle: { + color: '#ffffff', + }, + label: { + show: false, + }, + data: [ + { coord: [x, y], symbolSize: 16, itemStyle: { color: '#ffffff' }, z: 12 }, + { coord: [x, y], symbolSize: 24, itemStyle: { color: 'rgba(1, 238, 255, 0.5)' }, z: 11 }, + { coord: [x, y], symbolSize: 40, itemStyle: { color: 'rgba(1, 238, 255, 0.3)' }, z: 10 }, + ], + }; + } + + chartInstance.setOption({ + series: updatedSeries, + }); + } + // 新增方法 - 停止轮播 const stopAutoPlay = () => { if (autoPlayTimer.value) { diff --git a/src/utils/echarts.js b/src/utils/echarts.js index 9937e08..890dd63 100644 --- a/src/utils/echarts.js +++ b/src/utils/echarts.js @@ -32,6 +32,9 @@ import { CalendarComponent, GraphicComponent, GeoComponent, + MarkPointComponent, + MarkLineComponent, + MarkAreaComponent, } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; @@ -64,6 +67,9 @@ echarts.use([ ScatterChart, EffectScatterChart, GeoComponent, + MarkPointComponent, + MarkLineComponent, + MarkAreaComponent, ]); export default echarts; diff --git a/src/views/land/components/landFive.vue b/src/views/land/components/landFive.vue index b87739c..ea48e76 100644 --- a/src/views/land/components/landFive.vue +++ b/src/views/land/components/landFive.vue @@ -27,16 +27,17 @@ const state = reactive({ axisPointer: { type: 'shadow', }, - backgroundColor: 'rgba(18, 55, 85, 0.8);', + backgroundColor: 'rgba(0,0,0,0.6);', borderColor: '#35d0c0', formatter: (data) => { const params = data[0]; - let str = `