# bigViewReact

**Repository Path**: DingTongYa/big-view-react

## Basic Information

- **Project Name**: bigViewReact
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-31
- **Last Updated**: 2025-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大屏项目指南

## 资源列表

 	1. echars官方文档：[Apache ECharts](https://echarts.apache.org/zh/index.html)
     	1. api： [Api](https://echarts.apache.org/zh/api.html#echarts)
     	2. 配置项手册：[Options](https://echarts.apache.org/zh/option.html#title)
     	3. 术语快查手册:[术语速查手册](https://echarts.apache.org/zh/cheat-sheet.html)
     	4. ...
 	2. 示例网站大全
     	1. [PPChart - 让图表更简单](https://ppchart.com/#/)
     	2. [makeapie echarts社区图表可视化案例](https://www.makeapie.cn/echarts)
     	3. [MCChart](https://echarts.zhangmuchen.top/#/index)
     	4. [分享你我 - ECharts 作品集](http://chart.majh.top/)
     	5. [分享你的可视化作品isqqw.com](https://www.isqqw.com/)
     	6. [官网示例](https://demo.runoops.com/echarts-website/examples/zh/index.html#chart-type-line)
 	3. 其他免费资源
     	1. 阿里云免费地图数据下载：[DataV.GeoAtlas地理小工具系列](https://datav.aliyun.com/portal/school/atlas/area_selector)
     	2. 100套大屏可视化模板 （他这些都是jquery的项目，可以参考学习）： [100+套大数据可视化炫酷大屏Html5模板；包含行业：社区、物业、政务、交通、金融银行等，全网最新、最多，最全、最酷、最炫大数据可视化模板。陆续更新中](https://github.com/iGaoWei/BigDataView)
     	3. 数据可视化设计：[统计图表 Chart | AntV](https://antv.antgroup.com/specification/graph/chart)

## echarts使用入门

1. 下载echarts包 npm install echarts 即可

2. let chart = echarts.init()//初始化，要保证能够拿到dom并且dom是可见的

3. 设置初始option

4. 绑定resize事件

5. 绑定点击事件

6. 拿到数据后更新option

   ### 下面是封装的一个class，框架无关

```js
import charttheme from '../assets/charttheme.json';//主题文件，可在echarts官网自定义主题
import * as Chart from 'echarts';

class ChartClass {
  // 静态属性存储已注册的主题
  static registeredThemes = new Set();
    //默认配置项，可以在初始化图标后设置，统一放在这个类的静态属性里，提高复用性
  static defaultOption = {
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containlabel: true
      },
		//...
    };
  // 静态方法注册主题
  static registerTheme(themeName = 'infographic', themeConfig = charttheme) {
    if (!this.registeredThemes.has(themeName)) {
      Chart.registerTheme(themeName, themeConfig);
      this.registeredThemes.add(themeName);
    }
  }

  constructor(dom, theme = 'infographic', initOptions = {}) {
      //
     if(Chart.getInstanceByDom(dom))return//如果已经挂载就退出
    this.chart =  Chart.init(dom, theme, initOptions);
    this.dom = dom;
    this.observer = null;
    this.resizeObserver = null;


    // this.chart.setOption(this.defaultChartOptions)
    //DOM 监听（用于销毁时清理）
    //当dom销毁时，进行清理操作
    this._initObserver();
    // 初始化尺寸监听
    this._initResizeObserver();
  }

  setOption(options) {
    // 合并默认配置和传入的配置
    const mergedOptions = Object.assign({}, this.defaultchartoptions, options);
    this.chart.setOption(mergedOptions, true);
  }

  dispose() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }

    if (this.observer) {
      this.observer.disconnect();
      this.observer = null;
    }

    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }
  }
  dispatchAction(){
    this.chart.dispatchAction(...arguments);
  }
  _initObserver() {
    const parent = this.dom.parentNode;

    if (!parent) {
      this.dispose();
      return;
    }

    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (mutation.type === 'childList') {
          // 检查被移除的节点中是否包含当前图表DOM
          for (const removedNode of mutation.removedNodes) {
            if (removedNode.contains(this.dom) || removedNode === this.dom) {
              this.dispose();
              observer.disconnect();
              return;
            }
          }
          
          // 同时检查DOM是否仍在文档中
          if (!document.body.contains(this.dom)) {
            this.dispose();
            observer.disconnect();
            return;
          }
        }
      }
    });

    // 修改观察选项，增加subtree以监听所有子节点变化
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });

    this.observer = observer;
  }

  _initResizeObserver() {
    // const resizeObserver = new ResizeObserver(() => {
    //   if (this.chart && !this.chart.isDisposed()) {
    //     this.chart.resize();
    //   }
    // });

    // resizeObserver.observe(this.dom);

    // this.resizeObserver = resizeObserver;

    window.addEventListener('resize', () => {
      if (this.chart && !this.chart.isDisposed()) {
        console.log("窗口尺寸变化");

        
        this.chart.resize();
      }
    });

  }
}

// 静态方法调用：类初始化时注册主题
// ChartClass.registerTheme();

export default ChartClass;

```

使用

```js
// import * as echarts from 'echarts';
import ChartClass from './chartClass';

export default function sandian(dom) {
    // 根据百分比计算背景色
    function getBackgroundColor(percentStr) {
        const percent = parseFloat(percentStr.replace('%', ''));
        if (percent >= 60) return '#ff4757';  // 红色（高百分比）
        if (percent >= 20) return '#ffa726';  // 橙色（中等百分比）
        return '#42a5f5';  // 蓝色（低百分比）
    }

    function getBorderColor(percentStr) {
        const percent = parseFloat(percentStr.replace('%', ''));
        if (percent >= 60) return '#ff3742';
        if (percent >= 20) return '#ff9800';
        return '#2196f3';
    }

    var data2 = [
        {
            name: "马云马老板",
            children: [
                {
                    //子集
                    name: "北京国风信通科技有限公司",
                    value: "控股",
                    percent: "60%",
                    money: "120万元",
                    bgColor: getBackgroundColor("60%"),
                    borderColor: getBorderColor("60%")
                },
                {
                    name: "北京阿里巴巴信息技术有限公司",
                    value: "控股",
                    percent: "1.43%",
                    money: "800万元",
                    bgColor: getBackgroundColor("1.43%"),
                    borderColor: getBorderColor("1.43%")
                },
                {
                    name: "高德软件有限公司",
                    value: "控股",
                    percent: "67%",
                    money: "16242.4242万元",
                    bgColor: getBackgroundColor("67%"),
                    borderColor: getBorderColor("67%")
                },
                {
                    name: "杭州大井头贰拾贰号文化艺术有限公司",
                    value: "控股",
                    percent: "99%",
                    money: "990万元",
                    bgColor: getBackgroundColor("99%"),
                    borderColor: getBorderColor("99%")
                },
            ],
        },
    ];
    var chartDom = dom
    var myChart = new ChartClass(chartDom);

    var option;

    option = {
        tooltip: {
            trigger: "item",
            formatter: "{b}",
        },
        series: [
            {
                type: "tree",
                name: "股权穿透图",
                edgeShape: "polyline", //链接线是折现还是曲线
                orient: "TB",
                data: data2,
                width: 1000,
                height: 200,
                top: "30%",
                left: "5%",
                symbolSize: 1,
                initialTreeDepth: 10,
                hoverAnimation: false, // 禁用悬停动画
                label: {
                    // show: false,

                    position: [-80, 10],  // 调整位置以适应更宽的标签
                    verticalAlign: "middle",
                    align: "left",
                    backgroundColor: "#0084ff",
                    color: "#fff",
                    padding: [15, 20, 15, 20],  // 上右下左的内边距
                    borderWidth: 2,
                    borderColor: "#0070d9",
                    fontWeight: "bold",
                    fontSize: 14,  // 减小字体以适应更多文本
                    minMargin: 15,  // 增加最小边距避免重叠
                    width: 120,  // 设置固定宽度
                    height: 40,   // 设置固定高度
                    overflow: 'break',  // 文本换行而不是截断
                    lineHeight: 16,  // 设置行高
                    // formatter: function(params) {
                    //     // 自定义格式器，确保文本适应宽度
                    //     return params.name;
                    // }
                },
                leaves: {
                    label: {
                        // show: false,
                        position: [-120, 40],
                        verticalAlign: "middle",
                        align: "left",
                        color: "#fff",
                        padding: [15, 20, 15, 20],
                        borderWidth: 2,
                        width: 200,
                        height: 50,
                        fontSize: 12,
                        fontWeight: "bold",
                        overflow: 'truncate',
                        lineHeight: 14,
                        ellipsis: '...',
                        formatter: function (params) {
                            const percent = params.data.percent || '0%';
                            const money = params.data.money || '';
                            // const value = params.data.value || '';
                            const name = params?.name || '';
                            let bg = parseInt(money) >= 1000 ? 'red' : 'container';
                            return `{${bg}|${name}}\n{${bg}|${percent}}\n{${bg}|${money}}`;

                        },
                        backgroundColor: 'transparent',
                        borderColor: "transparent",
                        rich: {
                            container: {
                                backgroundColor: "#0084ff",
                                // borderColor: "#e0e0e0",
                                borderWidth: 1,
                                // borderRadius: 6,
                                padding: [20, 15],
                                width: 200,
                                lineHeight: 30,
                                // lineHeight: 14,
                            },
                            red: {
                                backgroundColor: "#ff4757",

                                // borderColor: "#e0e0e0",
                                borderWidth: 1,
                                // borderRadius: 6,
                                padding: [20, 15],
                                width: 200,
                                lineHeight: 30,
                            }
                        }

                    }
                },


                lineStyle: {
                    color: "#9b97beff",
                },
                expandAndCollapse: false,
                animationDuration: 550,
                animationDurationUpdate: 750,
            },
        ],
    };

    option && myChart.setOption(option);


    // 渲染完成后，添加 graphic
    // myChart.chart.on('finished', function () {
    //     var seriesModel = myChart.chart.getModel().getSeriesByIndex(0);
    //     var data = seriesModel.getData();

    //     // 清空旧的 graphic
    //     //   myChart.chart.setOption({ graphic: [] });
    //     let graphic = [

    //     ]
    //     // 遍历所有节点并添加背景矩形 + 文本
    //     data._graphicEls.forEach((el, index) => {

    //         const layout = { x: 0, y: 0 }
    //         layout.x = el.transform[4]
    //         layout.y = el.transform[5]


    //         if (!layout) return
    //         // 使用 graphic 绘制背景和文本
    //         const groupName = data._idList[index];
    //         // 创建图形组
    //         const graphicGroup = {
    //             type: 'group',
    //             name: groupName, // 分组名称，用于后续查找
    //             id: `group_${index}`, // 唯一标识
    //             position: [layout.x, layout.y], // 组定位（替代单个元素定位）
    //             children: [
    //                 // 第一个图特殊处理：矩形改为椭圆并设置黄色
    //                 index === 2 ? {
    //                     type: 'ellipse',  // 将矩形改为椭圆
    //                     z: 1000,
    //                     shape: {
    //                         cx: 0,       // 椭圆中心x坐标（相对于组原点）
    //                         cy: 0,       // 椭圆中心y坐标（相对于组原点）
    //                         rx: 80,      // x轴半径（原矩形宽度的一半）
    //                         ry: 20       // y轴半径（原矩形高度的一半）
    //                     },
    //                     style: {
    //                         fill: 'rgba(141, 141, 25, 1)',  // 黄色填充
    //                         stroke: 'rgba(0, 0, 0, 0.5)',
    //                         borderRadius: 20  // 可选：添加圆角增强椭圆效果
    //                     }
    //                 } : {
    //                     // 其他节点保持原矩形样式
    //                     type: 'rect',
    //                     z: 1000,
    //                     shape: {
    //                         x: -80, // 相对于组的偏移量
    //                         y: -20,
    //                         width: 160,
    //                         height: 40,
    //                     },
    //                     style: {
    //                         fill: 'rgba(80, 113, 184, 1)',
    //                         stroke: 'rgba(0, 0, 0, 0.5)',
    //                     }
    //                 },
    //                 // 文本元素（可选）
    //                 {
    //                     type: 'text',
    //                     z: 1001,
    //                     style: {
    //                         text: (groupName || '未命名').length > 8 ?
    //                             (groupName || '未命名').slice(0, 8) + '...' :
    //                             (groupName || '未命名'),
    //                         fontSize: 12,
    //                         fill: '#fff',
    //                         // 将textAlign和textVerticalAlign替换为正确的对齐属性
    //                         align: 'center',         // 水平居中
    //                         verticalAlign: 'middle'  // 垂直居中
    //                     },
    //                     // 文本元素定位（相对于组原点）
    //                     left: -60,  // 组原点已在矩形中心
    //                     top: -5,

    //                 }
    //             ]
    //         };

    //         graphic.push(graphicGroup);

    //     });
    //     myChart.chart.setOption({
    //         graphic: graphic
    //     });
    // });

    return myChart
}
```

效果图![image-20250831193403788](F:\code\react-learn\bigView\bigViewReact\assets\image-20250831193403788.png)