Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)

本来照着官方例子想实现在tooltip中展示echarts饼图
但是并没有成功显示，目前还不清楚什么原因，盲猜是版本原因；

官方展示：

复制官方的代码不展示，不知道那里除了问题，主要记录echarts图的使用方式

    network.getToolTip = function (data) {
   
                if (!data.getToolTip()) {
   
                    var pieChart = new twaver.charts.LineChart();
                    pieChart.formatValueText = function (value, data) {
   
                        return value.toFixed(1);
                    };
                    createPieChartElement("Sprint", 23, 'BLUE', pieChart);
                    createPieChartElement("Verizon", 26, 'YELLOW', pieChart);
                    createPieChartElement("AT&T", 26, 'GREEN', pieChart);
                    createPieChartElement("T-Mobile", 11, 'MAGENTA', pieChart);
                    createPieChartElement("Alltel", 5, 'CYAN', pieChart);
                    createPieChartElement("Rest", 9, 'RED', pieChart);
                    var pieChartPane = new twaver.charts.ChartPane(pieChart);
                    pieChartPane.adjustBounds({
    x: 0, y: 0, width: 200, height: 200 });
                    let aaa = pieChartPane.getView()
                    data.setToolTip(aaa);
                    twaver.Util.getToolTipDiv().style.width = '200px';
                    twaver.Util.getToolTipDiv().style.height = '200px';
                }
                return data.getToolTip();
            };

全部代码：

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-29 15:27:48
 */
import React, {
    useEffect, useState } from 'react'
import {
   
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
    returnRegisterImage,
    returnGroupFun
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
   
    const [network, setnetwork] = useState({
   })
    const init = () => {
   
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        // network.invalidateElementUIs();
        // network.setToolTipEnabled(true);
        var toolbar = document.createElement('div');
        init()
        function init() {
   
            initToolbar();
            var pane = new twaver.controls.BorderPane(network, toolbar);
            pane.setTopHeight(25); 
            var view = pane.getView();
            view.style.left = '0px'; view.style.top = '0px';
            view.style.right = '0px'; view.style.bottom = '0px';
            document.getElementById("testID").appendChild(view);
            window.onresize = function () {
   
                pane.invalidate();
            };
            network.getToolTip = function (data) {
   
                if (!data.getToolTip()) {
   
                    var pieChart = new twaver.charts.LineChart();
                    pieChart.formatValueText = function (value, data) {
   
                        return value.toFixed(1);
                    };
                    createPieChartElement("Sprint", 23, 'BLUE', pieChart);
                    createPieChartElement("Verizon", 26, 'YELLOW', pieChart);
                    createPieChartElement("AT&T", 26, 'GREEN', pieChart);
                    createPieChartElement("T-Mobile", 11, 'MAGENTA', pieChart);
                    createPieChartElement("Alltel", 5, 'CYAN', pieChart);
                    createPieChartElement("Rest", 9, 'RED', pieChart);
                    var pieChartPane = new twaver.charts.ChartPane(pieChart);
                    pieChartPane.adjustBounds({
    x: 0, y: 0, width: 200, height: 200 });
                    let aaa = pieChartPane.getView()
                    data.setToolTip(aaa);
                    twaver.Util.getToolTipDiv().style.width = '200px';
                    twaver.Util.getToolTipDiv().style.height = '200px';
                }
                return data.getToolTip();
            };
            initBox();
        }
        function createPieChartElement(name, value, color, pieChart) {
   
            var element = new twaver.Element();
            element.setName(name); 
            element.setStyle('chart.value', value);
            element.setStyle('chart.color', color);
            pieChart.getDataBox().add(element); 
            return element;
        }
        function initBox() {
   
         let   from = new twaver.Node();
            from.setName('From');
            from.setLocation(400, 100);
            box.add(from);
            var to = new twaver.Node();
            to.setName('To');
            to.setLocation(300, 300);
            box.add(to);
            var link = new twaver.Link(from, to);
            link.setName('Link');
            box.add(link);
        }
        function initToolbar() {
   
            addButton(toolbar, 'Zoom In', function () {
    network.zoomIn(); });
            addButton(toolbar, 'Zoom Out', function () {
    network.zoomOut(); });
            addButton(toolbar, 'Zoom Overview', function () {
    network.zoomOverview(); });
            addButton(toolbar, 'Zoom Reset', function () {
    network.zoomReset(); });
        }
        function addButton(toolbar, label, handler) {
   
            var button = document.createElement('input');
            button.type = 'button';
            button.style.paddingLeft="20px";
            button.style.paddingRight="20px";
            button.style.border="1px solid red";
             button.value = label;
            button.onclick = handler;
             toolbar.appendChild(button);
        }
    }

    useEffect(init, [])
    return (
        <>
            <p style={
   {
    fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
   {
    fontSize: "20px", paddingLeft: "50px" }}>
                <li>在tooltip中显示饼图</li>
            </ul>
            {
   /* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={
   {
    width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
        </>
    )
}
export default Demo

学习参考：TWaver Documents