个股中心列表对接，涨停分析词云和板块分布图实现

2026-01-29 17:38:50 +08:00
parent 38fc352096
commit 5ffaac8fb2
8 changed files with 810 additions and 128 deletions
--- a/pages/ztfx/ztfx.vue
+++ b/pages/ztfx/ztfx.vue
@@ -35,7 +35,7 @@


 				<view style="margin: 25rpx;">
-					    <LCCalendar @date-change="handleDateChange"></LCCalendar>
+					<LCCalendar @date-change="handleDateChange"></LCCalendar>
 				</view>


@@ -94,17 +94,36 @@

 				<view
 					style="margin: 25rpx; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rpx; color: #999999; font-size: 22rpx; font-weight: 500;">
-					<view v-for="(item, index) in bkTypes"
+					<!-- <view v-for="(item, index) in bkTypes"
 						style="display: flex; align-items: center; justify-content: center; padding: 10rpx 20rpx;"
 						:style="{color: (index == 0 ? '#BB8520' : '#999999'), border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`, 'background-color' : (index == 0 ? '#FFFAF1' : '#FFF')}">
 						{{item}}
+					</view> -->
+					<view v-for="(item, index) in bkTypes" @click="switchTab(index)"
+						style="display: flex; align-items: center; justify-content: center; padding: 10rpx 20rpx; border-radius: 8rpx;"
+						:style="{
+					          color: (activeType == index ? '#BB8520' : '#999999'), 
+					          border: `1rpx solid ${activeType == index ? '#F2C369' : '#D2D2D2'}`, 
+					          'background-color' : (activeType == index ? '#FFFAF1' : '#FFF'),
+					          'cursor': 'pointer'  
+					        }">
+						{{item}}
 					</view>
 				</view>

-				<view
-					style="height: 400rpx; display: flex; align-items: center; justify-content: center; background-color: blue;">
-					<l-echart ref="chartRef"></l-echart>
-					 </view>
+				<view style=" display: flex; align-items: center; justify-content: center;padding: 0 25rpx; ">
+					<!-- <view v-if="activeType === 0"
+						style="width: 100%; height: 500rpx; display: flex; align-items: center; justify-content: center; color: #999;">
+						板块关联图内容区域
+					</view> -->
+					<view v-show="activeType === 0" style="width: 100%; height: 500rpx;">
+						<l-echart ref="graphChartRef"></l-echart>
+					</view>
+					<view v-show="activeType === 1" style="width: 100%; height: 500rpx;">
+						<l-echart ref="chartRef"></l-echart>
+					</view>
+					<WordCloud v-show="activeType === 2" :wordData="wordData" :width="330" :height="330" />
+				</view>


 				<view style="color: #2B2B2B; font-weight: 500; display: flex; margin: 25rpx 20rpx;">
@@ -162,17 +181,121 @@
 	import {
 		inject
 	} from 'vue'
-import { calendarCombinedData,analyseHighStocks } from '@/request/api'
-	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
+	import {
+		calendarCombinedData,
+		analyseHighStocks
+	} from '@/request/api'
+	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
+	import WordCloud from '@/components/WordCloud/WordCloud.vue';
+
+
+	// 模拟关系图数据（替代接口请求的les-miserables.json）
+	const mockGraphData = {
+		categories: [{
+				name: '板块'
+			},
+			{
+				name: '概念'
+			},
+			{
+				name: '个股'
+			}
+		],
+		nodes: [{
+				name: '科技板块',
+				symbolSize: 50,
+				category: 0
+			},
+			{
+				name: '人工智能',
+				symbolSize: 30,
+				category: 1
+			},
+			{
+				name: '大数据',
+				symbolSize: 25,
+				category: 1
+			},
+			{
+				name: '科大讯飞',
+				symbolSize: 20,
+				category: 2
+			},
+			{
+				name: '百度',
+				symbolSize: 20,
+				category: 2
+			},
+			{
+				name: '金融板块',
+				symbolSize: 50,
+				category: 0
+			},
+			{
+				name: '数字货币',
+				symbolSize: 30,
+				category: 1
+			},
+			{
+				name: '招商银行',
+				symbolSize: 20,
+				category: 2
+			},
+			{
+				name: '平安银行',
+				symbolSize: 20,
+				category: 2
+			}
+		],
+		links: [{
+				source: '科技板块',
+				target: '人工智能',
+				value: 10
+			},
+			{
+				source: '科技板块',
+				target: '大数据',
+				value: 8
+			},
+			{
+				source: '人工智能',
+				target: '科大讯飞',
+				value: 6
+			},
+			{
+				source: '人工智能',
+				target: '百度',
+				value: 6
+			},
+			{
+				source: '金融板块',
+				target: '数字货币',
+				value: 9
+			},
+			{
+				source: '数字货币',
+				target: '招商银行',
+				value: 5
+			},
+			{
+				source: '数字货币',
+				target: '平安银行',
+				value: 5
+			}
+		]
+	};

 	export default {
+		components: {
+			WordCloud
+		},
 		data() {
 			return {
 				navH: inject('navHeight'),
 				contentTop: '',
-				 selectedYearMonth: '', // 年-月（去掉日）
-				      selectedFullDate: '',  // 年-月-日
-				      selectedItem: null ,    // 选中的item完整数据
+				selectedYearMonth: '', // 年-月（去掉日）
+				selectedFullDate: '', // 年-月-日
+				selectedItem: null, // 选中的item完整数据
 				tabTypes: [{
 						data: '',
 						change: 0,
@@ -189,6 +312,7 @@ import { calendarCombinedData,analyseHighStocks } from '@/request/api'
 						title: '炸板率'
 					}
 				],
+				wordData: [],
 				bkList: [{
 						title: '存储芯片',
 						count: 8
@@ -258,126 +382,560 @@ import { calendarCombinedData,analyseHighStocks } from '@/request/api'
 					'板块分布',
 					'热门概念词云'
 				],
-				option2:{
-					title: {
-						show:false
+				activeType: 0, // 默认选中第一个标签
+				// 饼图配置项
+				pieOption: {
+					tooltip: {
+						trigger: 'item'
 					},
+					animation:false,
 					legend: {
-						show:false
+						top: '5%',
+						left: 'center',
+						 show:false
 					},
-					tooltip:{
-						show:true,
-						triggerOn:'mousemove'
-					},
-					radar: {
-					    indicator: [
-					      { name: '市场地位', max: 100 },
-					      { name: '技术实力', max: 100 },
-					      { name: '品牌价值', max: 100 },
-					      { name: '运营效率', max: 100 },
-					      { name: '财务健康', max: 100 },
-					      { name: '创新能力', max: 100 },
-						  { name: '风险控制', max: 100 },
-						  { name: '成长潜力', max: 100 }
-					    ],
-					    shape: 'polygon',
-					    splitNumber: 5,
-					    axisName: {
-					      color: '#54555A'
-					    },
-					    splitLine: {
-					      lineStyle: {
-					        color: ['#CFD2D7']
-					      }
-					    },
-					    splitArea: {
-							areaStyle:{
-								color:['#F4F6FA','white']
+					  
+					series: [{
+						name: 'Access From',
+						type: 'pie',
+						radius: ['40%', '70%'],
+						avoidLabelOverlap: false,
+						padAngle: 2,
+						itemStyle: {
+							borderRadius: 8
+						},
+						// label: {
+						// 	show: false,
+						// 	position: 'center'
+						// },
+						emphasis: {
+							label: {
+								show: true,
+								fontSize: 10,
+								
 							}
-					    },
-					    axisLine: {
-					      lineStyle: {
-					        color: '#CFD2D7'
-					      }
-					    }
-					},
-					series: [
-					    {
-							name: 'Beijing',
-							type: 'radar',
-							lineStyle: {
-								width:1
+						},
+						labelLine: {
+							length:1,
+							length2:5,
+							
+						},
+						data: [{
+								value: 10,
+								name: '科技板块'
 							},
-							data: [],
-							symbol: 'circle',
-							symbolSize: 4,
-							label:{
-								show:true  
+							{
+								value: 8,
+								name: '人脑工程'
 							},
-							itemStyle: {
-								color: '#5070DD'
+							{
+								value: 9,
+								name: '商业航天'
 							},
-							areaStyle: {
-								opacity: 0.1
-							}
-					    },
-					]
+							{
+								value: 10,
+								name: '人工智能'
+							},
+							{
+								value: 9,
+								name: '芯片'
+							},
+							{
+								value: 7,
+								name: '算力网'
+							},
+							{
+								value: 6,
+								name: '智能机器'
+							},
+							{
+								value: 6,
+								name: '资产注入'
+							},
+							{
+								value: 5,
+								name: '智能医疗'
+							},
+							{
+								value: 5,
+								name: '国防军工'
+							},
+							{
+								value: 5,
+								name: '康复医疗'
+							},
+							{
+								value: 20,
+								name: '创新药'
+							},
+						]
+					}]
 				},
+				// 关系图配置项
+				graphOption: {
+					tooltip: {},
+					legend: [],
+					series: [{
+						name: '板块关联',
+						type: 'graph',
+						layout: 'none',
+						data: [],
+						links: [],
+						categories: [],
+						roam: true, // 允许拖拽和缩放
+						label: {
+							show: true,
+							position: 'right',
+							formatter: '{b}'
+						},
+						labelLayout: {
+							hideOverlap: true
+						},
+						scaleLimit: {
+							min: 0.4,
+							max: 2
+						},
+						lineStyle: {
+							color: 'source',
+							curveness: 0.3
+						}
+					}]
+				},
+
+

 			}
 		},
 		onLoad(e) {
 			this.activeIndex = e.index
 			this.contentTop = this.navH + 20 / 750 * inject('windowWidth')
-			
-			this.analyseHighStocks()
-		},
-		 // mounted() {
-		 //    // 初始化当天日期格式（防止日历组件事件未及时触发）
-		 //    const today = new Date();
-		 //    const month = today.getMonth() + 1;
-		 //    const day = today.getDate();
-		 //    this.tabTypes[0].data = `${month}月${day}日`;
-		 //    this.tabTypes[1].data = '0'; // 默认涨停家数为0，后续会被日历数据覆盖
-		 //  },
-		methods: {
-		handleDateChange(data) {
-		      console.log('从日历组件接收的参数：', data.item?.zt_count);
-		      // 赋值到父页面的变量中
-		      this.selectedYearMonth = data.yearMonth;
-		      this.selectedFullDate = data.fullDate;
-		      this.selectedItem = data.item;
-		      // 2. 格式化日期：年-月-日 → 月日（如 2026-01-14 → 1月14日）
-		            if (data.fullDate) {
-		              const [year, month, day] = data.fullDate.split('-').map(Number);
-		              this.tabTypes[0].data = `${month}月${day}日`;
-		            }
-		      
-		            // 3. 赋值涨停家数（优先取item中的zt_count，无数据则显示0）
-		            const ztCount = data.item?.zt_count ?? 0;
-		            this.tabTypes[1].data = ztCount.toString(); // 转为字符串保证格式统一

-		    // this.analyseHighStocks()
-		    },
-			analyseHighStocks(){
-				 const formatDate = this.selectedFullDate.replace(/-/g, '');
-				  let param = {
-				    date: formatDate 
-				  }
-				analyseHighStocks(param).then(res=>{
-					
-				}).catch(error=>{
-					
-				})	
+			this.analyseHighStocks()
+
+
+		},
+
+		onReady() {
+			// 页面就绪后，若默认选中的是板块分布，初始化饼图
+			//if (this.activeType === 0) {
+				this.initGraphChart(); // 初始化关系图
+			//} else if (this.activeType === 1) {
+				this.initPieChart(); // 初始化饼图
+			//}
+		},
+		methods: {
+			// 切换标签
+			async switchTab(index) {
+				this.activeType = index;
+
+
+				switch (index) {
+					case 0:
+						this.$refs.graphChartRef && this.initGraphChart(); // 增加存在性判断
+						break;
+					case 1:
+						this.$refs.chartRef && this.initPieChart(); // 增加存在性判断
+						break;
+					case 2:
+						this.initWordCloud();
+						break;
+				}
 			},
-			async init() {
-				// chart 图表实例不能存在data里
-				const chart = await this.$refs.chartRef.init(echarts);
-				// chart.on('click',function (params) {
-				// 	console.log(params)
-				// })
-				chart.setOption(this.option2)
+			// 初始化关系图（增加容错）
+			async initGraphChart() {
+				
+					const chart = await this.$refs.graphChartRef.init(echarts);
+					this.graphOption.legend = [{
+						data: mockGraphData.categories.map(a => a.name)
+					}];
+					this.graphOption.series[0].data = mockGraphData.nodes;
+					this.graphOption.series[0].links = mockGraphData.links;
+					this.graphOption.series[0].categories = mockGraphData.categories;
+					chart.setOption(this.graphOption);
+				
 			},
+			// 初始化饼图（核心修复）
+			async initPieChart() {
+				
+					const Piechart = await this.$refs.chartRef.init(echarts);
+					console.log("Piechart", Piechart);
+					Piechart.setOption(this.pieOption);
+				
+			},
+			// 初始化词云
+			initWordCloud() {
+				this.wordData = [{
+						name: "脑机",
+						value: 10000
+					},
+					{
+						name: "航天",
+						value: 3428
+					},
+					{
+						name: "商业",
+						value: 1747
+					},
+					{
+						name: "智能",
+						value: 1692
+					},
+					{
+						name: "量产",
+						value: 1589
+					},
+					{
+						name: "落地",
+						value: 1555
+					},
+					{
+						name: "存储芯片",
+						value: 1487
+					},
+					{
+						name: "医疗",
+						value: 1348
+					},
+					{
+						name: "马斯克",
+						value: 1346
+					},
+					{
+						name: "业绩",
+						value: 1234
+					},
+					{
+						name: "康复",
+						value: 1143
+					},
+					{
+						name: "机器人",
+						value: 1127
+					},
+					{
+						name: "洁净室",
+						value: 1078
+					},
+					{
+						name: "标的",
+						value: 1072
+					},
+					{
+						name: "设备",
+						value: 1071
+					},
+					{
+						name: "算力",
+						value: 1015
+					},
+					{
+						name: "材料",
+						value: 983
+					},
+					{
+						name: "卫星",
+						value: 970
+					},
+					{
+						name: "科技",
+						value: 947
+					},
+					{
+						name: "资产",
+						value: 828
+					},
+					{
+						name: "半导体",
+						value: 774
+					},
+					{
+						name: "重估",
+						value: 750
+					},
+					{
+						name: "人脑",
+						value: 747
+					},
+					{
+						name: "平台",
+						value: 737
+					},
+					{
+						name: "产业链",
+						value: 726
+					},
+					{
+						name: "赛道",
+						value: 715
+					},
+					{
+						name: "电池",
+						value: 694
+					},
+					{
+						name: "估值",
+						value: 689
+					},
+					{
+						name: "景气",
+						value: 682
+					},
+					{
+						name: "A股",
+						value: 662
+					},
+					{
+						name: "商业化",
+						value: 643
+					},
+					{
+						name: "固态",
+						value: 642
+					},
+					{
+						name: "工程",
+						value: 642
+					},
+					{
+						name: "军工",
+						value: 642
+					},
+					{
+						name: "芯片",
+						value: 615
+					},
+					{
+						name: "医疗器械",
+						value: 606
+					},
+					{
+						name: "供应链",
+						value: 585
+					},
+					{
+						name: "弹性",
+						value: 573
+					},
+					{
+						name: "蓝箭",
+						value: 551
+					},
+					{
+						name: "市值",
+						value: 541
+					},
+					{
+						name: "高端",
+						value: 527
+					},
+					{
+						name: "植入",
+						value: 523
+					},
+					{
+						name: "耗材",
+						value: 523
+					},
+					{
+						name: "逻辑",
+						value: 519
+					},
+					{
+						name: "数据",
+						value: 512
+					},
+					{
+						name: "服务器",
+						value: 504
+					},
+					{
+						name: "供应商",
+						value: 503
+					},
+					{
+						name: "电子",
+						value: 483
+					},
+					{
+						name: "芳纶",
+						value: 458
+					},
+					{
+						name: "传闻",
+						value: 454
+					},
+					{
+						name: "国产化",
+						value: 453
+					},
+					{
+						name: "营销",
+						value: 452
+					},
+					{
+						name: "涨价",
+						value: 450
+					},
+					{
+						name: "临床",
+						value: 449
+					},
+					{
+						name: "转型",
+						value: 444
+					},
+					{
+						name: "强脑",
+						value: 441
+					},
+					{
+						name: "储能",
+						value: 441
+					},
+					{
+						name: "智能家居",
+						value: 438
+					},
+					{
+						name: "场景",
+						value: 435
+					},
+					{
+						name: "港股",
+						value: 423
+					},
+					{
+						name: "柔性",
+						value: 422
+					},
+					{
+						name: "人形",
+						value: 414
+					},
+					{
+						name: "国产",
+						value: 411
+					},
+					{
+						name: "接口技术",
+						value: 401
+					},
+					{
+						name: "消费",
+						value: 399
+					},
+					{
+						name: "创板",
+						value: 397
+					},
+					{
+						name: "全球",
+						value: 389
+					},
+					{
+						name: "替代",
+						value: 389
+					},
+					{
+						name: "融资",
+						value: 388
+					},
+					{
+						name: "补贴",
+						value: 369
+					},
+					{
+						name: "管线",
+						value: 368
+					},
+					{
+						name: "电极",
+						value: 367
+					},
+					{
+						name: "模态",
+						value: 364
+					},
+					{
+						name: "国家",
+						value: 361
+					},
+					{
+						name: "盈利",
+						value: 359
+					},
+					{
+						name: "测试",
+						value: 356
+					},
+					{
+						name: "子公司",
+						value: 354
+					},
+					{
+						name: "实控",
+						value: 353
+					},
+					{
+						name: "八院",
+						value: 353
+					},
+					{
+						name: "价格",
+						value: 352
+					},
+					{
+						name: "旗下",
+						value: 351
+					},
+					{
+						name: "组件",
+						value: 346
+					},
+					{
+						name: "电解液",
+						value: 342
+					},
+					{
+						name: "中标",
+						value: 340
+					}
+				];
+
+				//console.log('父页面设置词云数据:', JSON.stringify(this.wordData));
+			},
+			handleDateChange(data) {
+				console.log('从日历组件接收的参数：', data.item?.zt_count);
+				// 赋值到父页面的变量中
+				this.selectedYearMonth = data.yearMonth;
+				this.selectedFullDate = data.fullDate;
+				this.selectedItem = data.item;
+				// 2. 格式化日期：年-月-日 → 月日（如 2026-01-14 → 1月14日）
+				if (data.fullDate) {
+					const [year, month, day] = data.fullDate.split('-').map(Number);
+					this.tabTypes[0].data = `${month}月${day}日`;
+				}
+
+				// 3. 赋值涨停家数（优先取item中的zt_count，无数据则显示0）
+				const ztCount = data.item?.zt_count ?? 0;
+				this.tabTypes[1].data = ztCount.toString(); // 转为字符串保证格式统一
+
+				// this.analyseHighStocks()
+			},
+			analyseHighStocks() {
+				const formatDate = this.selectedFullDate.replace(/-/g, '');
+				let param = {
+					date: formatDate
+				}
+				analyseHighStocks(param).then(res => {
+
+				}).catch(error => {
+
+				})
+			},
+
+
+
 			bkydAction(index) {
 				uni.navigateTo({
 					url: `/pagesStock/stockCenterDetails/bkydmx?index=${index}`