uni-app 股权穿透图插件需求

针对您提出的uni-app中股权穿透图插件的需求，这里提供一个基于ECharts的示例代码来实现基本的股权穿透图展示。由于uni-app支持使用小程序组件或H5组件，我们将利用ECharts在小程序中的使用方式来演示。请注意，实际项目中可能需要根据具体需求进行调整和优化。

步骤一：安装ECharts

在uni-app项目中，你可以通过npm安装ECharts（适用于H5端），或者下载ECharts的小程序版本（适用于小程序端）。这里假设你选择在H5端实现。

npm install echarts --save

步骤二：引入ECharts并创建组件

在uni-app的components目录下创建一个新的组件，比如equity-penetration.vue，用于展示股权穿透图。

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

<script>
import * as echarts from '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 // 新增的dpr属性
      });
      canvas.setChart(chart);

      const option = {
        // 配置项，这里简单展示一个树形图示例
        series: [{
          type: 'tree',
          data: [this.getEquityData()],
          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;
    },
    getEquityData() {
      // 返回模拟的股权数据
      return {
        name: 'Root',
        children: [
          { name: 'Company A', children: [{ name: 'Shareholder 1' }, { name: 'Shareholder 2' }] },
          { name: 'Company B', children: [{ name: 'Shareholder 3' }] }
        ]
      };
    }
  }
};
</script>

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

步骤三：在页面中使用组件

在你的页面文件中引入并使用这个组件，确保组件正确渲染。

<template>
  <view>
    <equity-penetration></equity-penetration>
  </view>
</template>

<script>
import EquityPenetration from '@/components/equity-penetration.vue';

export default {
  components: {
    EquityPenetration
  }
};
</script>

以上代码提供了一个基本的股权穿透图展示框架，你可以根据实际需求调整数据结构和图表样式。记得在H5端运行前确保ECharts正确安装并引入。对于小程序端，需要使用ECharts的小程序版本并相应调整代码。