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

<template>
  <div class="popularity-prediction">
    <div class="tree-map-container">
      <div class="phylo-tree">
        <h3>病毒进化树</h3>
        <div id="phyloTree" ref="treeContainer" style="width: 600px; height: 500px;"></div>
      </div>
      <div class="world-map">
        <h3>世界地图病毒预测图</h3>
        <div id="virusMap" style="width: 600px; height: 500px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as d3 from "d3";
import { phylotree } from "phylotree";
import "phylotree/dist/phylotree.css";
import * as echarts from 'echarts';

export default {
  name: 'PopularityPrediction',
  mounted() {
    // 延迟 500 毫秒渲染，确保容器尺寸正确
    setTimeout(() => {
      this.renderTree();
      // this.renderVirusMap();
    }, 500);
  },
  methods: {
    renderTree() {
      //接受的接受渲染phylotree的文件
let test_string = "((Human:0.1,Chimp:0.2):0.3,Gorilla:0.4)"
let tree = new phylotree(test_string);
console.log(tree),'111';
tree.render({
    container: "#phyloTree",
    "draw-size-bubbles": true,//在叶子节点展示圆圈
    'height':'800',
    "width":'800',
    "left-right-spacing": "fit-to-size",    //从左到右确定布局大小。默认为"fixed-step".
    "top-bottom-spacing":"fit-to-size",      //从上到下确定布局大小。默认为"fixed-step".
    "align-tips":true,  //确定提示名称是否对齐。默认为false。
    "zoom": false,    //确定是否启用缩放。默认为false.
    "brush":false,    //是否应激活画笔。默认为true.
    "show-scale":true,    //是否显示分支长度的比例尺
});
console.log(tree,'222');

      // const newickString = "((A:0.1,B:0.2):0.3,C:0.4);";
      // const tree = new phylotree(newickString, {
      //   branch_scale: 100,
      //   collapsed: false
      // });

      // const container = this.$refs.treeContainer;
      // if (!container) {
      //   console.error('未找到进化树容器元素');
      //   return;
      // }

      // const svg = d3.select(container)
      //   .append("svg")
      //   .attr("width", "100%")
      //   .attr("height", "100%");

      // try {
      //   tree.render(svg);
      //   console.log('进化树渲染成功');
      // } catch (error) {
      //   console.error('渲染进化树出错:', error);
      // }
    },
    renderVirusMap() {
      // 示例病毒预测数据
      const mapData = [
        { name: 'China', value: 120 },
        { name: 'United States', value: 80 },
        { name: 'Brazil', value: 60 },
        { name: 'India', value: 90 }
      ];
      const chart = echarts.init(document.getElementById('virusMap'));
      chart.setOption({
        title: { text: '病毒预测分布', left: 'center' },
        tooltip: { trigger: 'item' },
        visualMap: {
          min: 0,
          max: 150,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true
        },
        series: [
          {
            name: '病毒预测',
            type: 'map',
            map: 'world',
            roam: true,
            data: mapData
          }
        ]
      });
    }
  }
};
</script>

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