toid-client/src/views/statistics/popularity-prediction/index.vue

<template>
  <div class="popularity-prediction">
    <div class="tree-map-container">
          <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="form" size="small">

        <el-form-item label="病原体">
          <el-select v-model="form.pathogenId" placeholder="请选择病原体">
            <el-option v-for="item in pathogen" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="form.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
      <!-- <div class="phylo-tree">
        <div id="phyloTree" ref="treeContainer" style="width: 100%; height: 500px;"></div>
      </div> -->
      <div style="width:100%;height:500px;overflow:auto;">
        <svg id="tree_display" ></svg>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="world-map">
            <div id="worldVirusMap" style="width: 100%; height: 500px;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="china-map">
            <div id="chinaVirusMap" style="width: 100%; height: 500px;"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import worldJson from 'echarts/map/json/world.json';
import chinaJson from 'echarts/map/json/china.json';
import { generatesjbytfzzbqkInfo, generatezgbytfzzbqkInfo,pathogenConfigGetAll } from '@/api/statistics/report';
import { getPathogenConfig } from '@/api/system/pathogenConfig';

echarts.registerMap('world', worldJson);
echarts.registerMap('china', chinaJson);

export default {
  name: 'PopularityPrediction',
  data() {
    return {
        form: {
        bytName: "",
        endDate: "",
        startDate: "",
        dateRange: []
      },
      worldData: [],
      chinaData: [],
      worldMapChart: null,
      chinaMapChart: null,
      pathogen:null
    };
  },
  methods: {
    renderWorldVirusMap() {
      if (!this.worldMapChart) {
        this.worldMapChart = echarts.init(document.getElementById('worldVirusMap'));
      }
      this.renderMap(this.worldMapChart, this.worldData, 'world');
    },
    renderChinaVirusMap() {
      if (!this.chinaMapChart) {
        this.chinaMapChart = echarts.init(document.getElementById('chinaVirusMap'));
      }
      this.renderMap(this.chinaMapChart, this.chinaData, 'china');
    },
    renderMap(chart, data, mapType) {
      // 处理数据，生成区域数据，保留每个病原体的数量信息
      const regionData = data.map(item => {
        const pathogenData = {};
        let totalValue = 0;
        Object.keys(item).forEach(key => {
          if (key!== 'area' && key!== 'eng') {
            const value = item[key];
            if (!isNaN(value) && value!== null && value!== undefined) {
              pathogenData[key] = value;
              totalValue += value;
            }
          }
        });

        return {
          name: item.eng || item.area || '未知区域',
          value: isNaN(totalValue)? 0 : totalValue,
          cn: item.area || '未知区域',
          pathogenData: pathogenData
        };
      });

      // 校验数据，避免 min 或 max 为 NaN
      let visualMapMin = 0;
      let visualMapMax = 0;
      if (regionData.length > 0) {
        const values = regionData.map(item => item.value).filter(value =>!isNaN(value));
        if (values.length > 0) {
          visualMapMin = Math.min(...values);
          visualMapMax = Math.max(...values);
        }
      }

      // 清空旧的配置
      chart.clear();
      chart.setOption({
        title: { text: mapType === 'world' ? '全球病毒分布' : '中国病毒分布', left: 'center' },
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const name = params.data && params.data.cn? params.data.cn : '未知区域';
            const value = params.data &&!isNaN(params.data.value)? params.data.value : 0;
            const pathogenData = params.data && params.data.pathogenData? params.data.pathogenData : {};

            let tooltipStr = `<div>${name}</div><div>总数: ${value}</div>`;
            Object.keys(pathogenData).forEach(pathogen => {
              tooltipStr += `<div>${pathogen}: ${pathogenData[pathogen]}</div>`;
            });
            return tooltipStr;
          }
        },
        // geo: {
        //   map: mapType,
        //   roam: true,
        //   label: {
        //     emphasis: {
        //       show: false
        //     }
        //   },
        //   itemStyle: {
        //     normal: {
        //       areaColor: '#f0f0f0',
        //       borderColor: '#999'
        //     },
        //     emphasis: {
        //       areaColor: '#e0e0e0'
        //     }
        //   },
        //   center: mapType === 'china' ? [104.1954, 35.8617] : [10, 10],
        //   zoom: mapType === 'china' ? 2 : 1.2
        // },
        series: [
          {
            type: 'map',
            map: mapType,
            // coordinateSystem: 'geo',
            data: regionData,
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                areaColor: '#f0f0f0',
                borderColor: '#999'
              },
              emphasis: {
                areaColor: '#e0e0e0',
                borderWidth: 2,
                borderColor: '#fff'
              }
            }
          }
        ],
        visualMap: {
          min: visualMapMin,
          max: visualMapMax,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          // inRange: {
          //   color: ['#ffeeee', '#ffcccc', '#ff9999', '#ff6666', '#ff3333']
          // }
        }
      });
    },
    renderPhyloTree() {
      const strainColors = {
        A: '#5470C6',
        B: '#91CC75',
        C: '#FAC858',
        D: '#EE6666',
        E: '#73C0DE',
        F: '#3BA272',
        G: '#FC8452',
        H: '#9A60B4',
        I: '#EA7CCC',
        J: '#FFA500'
      };
      const strains = Object.keys(strainColors);

      // 生成树结构
      function createExampleTree(rootStrain, rootYear, rootEndYear, depth = 0, maxDepth = 5, usedSet = new Set()) {
        if (depth > maxDepth) return null;
        const key = `${rootStrain}_${rootYear}`;
        if (usedSet.has(key)) return null; // 跳过重复
        usedSet.add(key);

        const node = {
          name: `病毒${rootStrain}`,
          strain: rootStrain,
          year: rootYear,
          endYear: rootEndYear,
          children: []
        };
        if (depth < maxDepth) {
          const childCount = Math.floor(Math.random() * 2) + 1;
          for (let i = 0; i < childCount; i++) {
            const nextStrain = strains[(strains.indexOf(rootStrain) + i + 1) % strains.length];
            const childYear = Math.min(rootEndYear - 1, rootYear + 1 + Math.floor(Math.random() * 3));
            const childEndYear = Math.min(rootEndYear, childYear + 3 + Math.floor(Math.random() * 6));
            const child = createExampleTree(nextStrain, childYear, childEndYear, depth + 1, maxDepth, usedSet);
            if (child) node.children.push(child);
          }
        }
        return node;
      }

      // 生成5条主干
      const roots = [];
      for (let i = 0; i < 5; i++) {
        const strain = strains[i % strains.length];
        const startYear = 2010 + Math.floor(Math.random() * 3);
        const endYear = startYear + 8 + Math.floor(Math.random() * 5);
        roots.push(createExampleTree(strain, startYear, endYear, 0, 5, new Set()));
      }

      // 展平树结构，分配y坐标
      let yIndex = 0;
      const lines = [];
      function flatten(node, parentY = null, parentName = null) {
        const myY = yIndex++;
        lines.push({
          name: `${node.name}（${node.year}~${node.endYear}）`,
          strain: node.strain,
          year: node.year,
          endYear: node.endYear,
          y: myY,
          parentName // 记录父节点名称
        });
        if (node.children && node.children.length) {
          node.children.forEach(child => flatten(child, myY, `${node.name}（${node.year}~${node.endYear}）`));
        }
      }

      // 主干之间插入空行，增加间距
      roots.forEach((root, idx) => {
        flatten(root, null, null);
        if (idx !== roots.length - 1) {
          // 每两个主干之间插入2个空行
          yIndex += 3;
        }
      });

      // 图例
      const legendData = strains.map(k => `病毒${k}`);

      const chart = echarts.init(this.$refs.treeContainer);
      chart.setOption({
        title: { text: '病毒进化树（横坐标为年份）', left: 'center' },
        tooltip: {
          trigger: 'item',
          formatter: params => params.data ? params.data.name : params.name
        },
        legend: {
          data: legendData,
          orient: 'vertical',
          right: 10,
          top: 60,
          formatter: name => `{a|●} {b|${name}}`,
          textStyle: {
            rich: {
              a: { color: (params) => params, fontSize: 18 },
              b: { color: '#333', fontSize: 14 }
            }
          }
        },
        grid: { left: 80, right: 120, top: 60, bottom: 40 },
        xAxis: {
          type: 'value',
          min: 2010,
          max: 2025,
          interval: 1,
          name: '年份',
          axisLabel: { formatter: '{value}' }
        },
        yAxis: {
          type: 'category',
          data: lines.map(l => l.name),
          show: false,
          axisLabel: { show: false },
          splitLine: { show: false }
        },
        series: [
          // 横线
          {
            type: 'custom',
            renderItem: function(params, api) {
              const y = api.coord([0, params.dataIndex])[1];
              const x1 = api.coord([lines[params.dataIndex].year, params.dataIndex])[0];
              const x2 = api.coord([lines[params.dataIndex].endYear, params.dataIndex])[0];
              const parentY = (() => {
                // 查找父节点的y坐标
                const parentName = lines[params.dataIndex].parentName;
                if (!parentName) return null;
                const parentIdx = lines.findIndex(l => l.name === parentName);
                if (parentIdx === -1) return null;
                return api.coord([lines[params.dataIndex].year, parentIdx])[1];
              })();

              const children = [];

              // 折线：所有节点都加竖线
              let startX;
              let endX = x1;
              let startY = y;
              if (parentY !== null && parentY !== y) {
                // 分支节点：父节点到当前节点y
                startX = x1;
                startY = parentY;
              } else {
                // 主干节点：从x轴（y轴0刻度线）到当前节点
                startX = x1;
                // 获取x轴像素y坐标
                const xAxisY = api.coord([lines[params.dataIndex].year, -0.8])[1];
                startY = xAxisY;
              }
              children.push(
                {
                  type: 'line',
                  shape: { x1: startX, y1: startY, x2: endX, y2: y },
                  style: {
                    stroke: strainColors[lines[params.dataIndex].strain],
                    lineWidth: 4
                  }
                }
              );

              // 横线：当前节点生命周期
              children.push({
                type: 'line',
                shape: { x1, y1: y, x2, y2: y },
                style: {
                  stroke: strainColors[lines[params.dataIndex].strain],
                  lineWidth: 4
                }
              });

              // 终点圆点
              children.push({
                type: 'circle',
                shape: { cx: x2, cy: y, r: 7 },
                style: {
                  fill: strainColors[lines[params.dataIndex].strain],
                  stroke: '#fff',
                  lineWidth: 2
                }
              });

              return { type: 'group', children };
            },
            data: lines,
            encode: { x: [ 'year', 'endYear' ], y: 'y' }
          }
        ]
      });
    },
    async initData() {
       if (this.form.dateRange.length  > 0) {
        const [startDate, endDate] = this.form.dateRange;
        this.form.startDate = startDate;
        this.form.endDate = endDate;
      }
      const res0 =await getPathogenConfig(this.form.pathogenId)
      this.$nextTick(() => {
        let tree = d3.layout.phylotree().svg(d3.select("#tree_display"))
        .options({
          'left-right-spacing': 'fit-to-step'
        }).font_size(10)
        .size([1, 900])
        .node_circle_size(2);
        tree(res0.data.treeTxt).layout();
      });
      const res = await generatesjbytfzzbqkInfo(this.form);
      const res2 = await generatezgbytfzzbqkInfo(this.form);
      this.worldData = res.data;
      this.chinaData = res2.data;
      this.renderWorldVirusMap();
      this.renderChinaVirusMap();
    },
    async loadPathogen(){
      const res0 = await pathogenConfigGetAll();
      this.pathogen = res0.data;
    }
  },
  created() {
    this.loadPathogen();
    // this.initData();
  },
  mounted() {
    // setTimeout(() => {
    //   this.renderWorldVirusMap();
    //   this.renderChinaVirusMap();
    //   // this.renderPhyloTree();
    // }, 500);
  }
};
</script>

<style scoped>
.phylo-tree, .world-map {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>