uni-app 实现故事线树图功能需求多个支流可再汇入主流

vueper 1楼•1 天前

有尝吗

songsunli 2楼•1 天前

在uni-app中实现一个具有多个支流可再汇入主流的故事线树图功能，你可以利用一些图形库来完成，比如ECharts。ECharts 是一个强大的开源可视化库，支持多种图表类型，并且可以通过树图（Tree Chart）来实现故事线树图功能。

以下是一个简单的代码示例，展示如何在uni-app中使用ECharts绘制一个具有多个支流汇入主流的故事线树图。

1. 安装 ECharts

首先，确保你已经安装了ECharts。在uni-app项目中，你可以通过npm安装：

npm install echarts --save

2. 引入 ECharts

在你的页面组件中引入ECharts：

import * as echarts from 'echarts';

3. 模板部分

在页面的模板部分添加一个用于绘制图表的容器：

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-tree" canvas-id="mychart-tree" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

4. 脚本部分

在页面的脚本部分，初始化ECharts并配置树图数据：

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart
      }
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);

      const option = {
        series: [
          {
            type: 'tree',
            data: [this.getTreeData()],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };

      chart.setOption(option);
      return chart;
    },
    getTreeData() {
      return {
        name: '主流',
        children: [
          {
            name: '支流1',
            children: [
              { name: '子支流1-1' },
              { name: '子支流1-2' }
            ]
          },
          {
            name: '支流2',
            children: [
              { name: '子支流2-1' },
              {
                name: '支流2-2汇入主流',
                children: [
                  { name: '子支流2-2-1' }
                ]
              }
            ]
          }
        ]
      };
    }
  }
};

5. 样式部分

确保容器有合适的样式：

<style>
.container {
  width: 100%;
  height: 100%;
}
</style>