百度Echarts思维导图系列之数据层级分析-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:450px;"></div>
    <script type="text/javascript">
        var data = {'ROE':'25.26%','权益乘数':'1.397','负债比率':'26.64%','流动比率':'344.36%','速动比率':'293.26%','利息保障倍数':'-15.88','资产净利率':'18.08%','销售净利率':'34.72%','毛利率':'74.46%','营业利润率':'48.38%','总资产周转率':'0.521','流动资产比率':'90.78%','非流动资产比率':'34.99%','存货周转率':'1.0','应收账款周转率':'382.9'}
        var nodes = [{
            x: 500,
            y: 1000,
            nodeName: 'ROE:  ' +data.ROE,
            svgPath: 'M922.3 447.8c-6 0-11.7-0.7-17.3-1.7l-12.3 56.4c-1.9 57.1-34.6 253.8-34.6 253.8H165.8s-20.6-197.2-25.6-257L129.5 443c-8.8 2.9-18 4.9-27.8 4.9-49.5 0-89.8-40.2-89.8-90 0-49.7 40.2-90 89.8-90 49.6 0 89.7 40.3 89.7 90 0 15.1-4 29.1-10.6 41.7l164.4 61.2 138-223.6c-35.4-12-61.1-45.3-61.1-84.9 0-49.7 40.1-90 89.8-90 49.5 0 89.8 40.2 89.8 90 0 39.6-25.7 72.8-61.2 84.8l138.1 223.6 162.8-64.2c-5.6-11.8-9-24.7-9-38.6 0-49.7 40.3-90 89.8-90s89.7 40.3 89.7 90c0.1 49.7-40 89.9-89.6 89.9zM858.2 859c-35.8 76.4-79.7 102.8-153.9 102.8H319.7c-56.7 0-122.4-26.4-153.9-102.8v-25.6h692.4V859',
            symbolSize: 30,
          }, {
            x: 300,
            y: 800,
            nodeName: '资产净利率:  ' +data.资产净利率,
            svgPath: 'M694.26516 286.98827 512 469.254453 329.732793 286.98827c-8.287757-8.287757-21.724791-8.286734-30.012547 0.001023-8.286734 8.286734-8.286734 21.723767 0 30.011524l161.04486 161.043836-108.634186 0c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l139.000797 0 0 89.12997L363.803773 609.617271c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l127.328967 0 0 131.572618c0 11.718903 9.502421 21.221324 21.221324 21.221324s21.221324-9.502421 21.221324-21.221324L533.575388 652.059919l127.327944 0c11.719926 0 21.221324-9.502421 21.221324-21.221324S672.623257 609.617271 660.903332 609.617271L533.575388 609.617271l0-89.12997 138.999774 0c11.719926 0 21.221324-9.502421 21.221324-21.221324s-9.502421-21.221324-21.221324-21.221324L563.233871 478.044654l161.043836-161.043836c8.287757-8.287757 8.287757-21.724791 0-30.012547C715.987904 278.700513 702.554964 278.700513 694.26516 286.98827zM512 65.290005c-246.316965 0-446.709995 200.39303-446.709995 446.708971 0 246.316965 200.39303 446.709995 446.709995 446.709995s446.709995-200.39303 446.709995-446.709995C958.709995 265.683035 758.316965 65.290005 512 65.290005zM512 916.266323c-222.913952 0-404.267347-181.353394-404.267347-404.267347S289.086048 107.733677 512 107.733677s404.267347 181.352371 404.267347 404.266323S734.912929 916.266323 512 916.266323z',
            symbolSize: 30,
          },
           {
            x: 850,
            y: 800,
            nodeName: '权益乘数:  ' +data.权益乘数,
            svgPath: 'M694.26516 286.98827 512 469.254453 329.732793 286.98827c-8.287757-8.287757-21.724791-8.286734-30.012547 0.001023-8.286734 8.286734-8.286734 21.723767 0 30.011524l161.04486 161.043836-108.634186 0c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l139.000797 0 0 89.12997L363.803773 609.617271c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l127.328967 0 0 131.572618c0 11.718903 9.502421 21.221324 21.221324 21.221324s21.221324-9.502421 21.221324-21.221324L533.575388 652.059919l127.327944 0c11.719926 0 21.221324-9.502421 21.221324-21.221324S672.623257 609.617271 660.903332 609.617271L533.575388 609.617271l0-89.12997 138.999774 0c11.719926 0 21.221324-9.502421 21.221324-21.221324s-9.502421-21.221324-21.221324-21.221324L563.233871 478.044654l161.043836-161.043836c8.287757-8.287757 8.287757-21.724791 0-30.012547C715.987904 278.700513 702.554964 278.700513 694.26516 286.98827zM512 65.290005c-246.316965 0-446.709995 200.39303-446.709995 446.708971 0 246.316965 200.39303 446.709995 446.709995 446.709995s446.709995-200.39303 446.709995-446.709995C958.709995 265.683035 758.316965 65.290005 512 65.290005zM512 916.266323c-222.913952 0-404.267347-181.353394-404.267347-404.267347S289.086048 107.733677 512 107.733677s404.267347 181.352371 404.267347 404.266323S734.912929 916.266323 512 916.266323z',
            symbolSize: 30,
          },
          {
            x: 100,
            y: 600,
            nodeName: '销售净利率:  ' +data.销售净利率,
            svgPath: 'M528.1 118.8L878.8 316v392.3L528.1 905.7 177.3 708.4V316l350.8-197.2m0-56.6l-400 225v450l400 225 400-225v-450l-400-225z,M652.9 367l-36.6-27.2-91.1 119.5-84.8-118.6-37.2 26.7 86.1 120.5h-69v46.6h81.6v43.1h-81.6v46.1h81.6v61H548v-61h88.3v-46.1H548v-43.1h88.3v-46.6h-75.1z',
            symbolSize: 30,
          },
          {
            x: 500,
            y: 600,
            nodeName: '总资产周转率:  ' +data.总资产周转率,
            svgPath: 'M528.1 118.8L878.8 316v392.3L528.1 905.7 177.3 708.4V316l350.8-197.2m0-56.6l-400 225v450l400 225 400-225v-450l-400-225z,M652.9 367l-36.6-27.2-91.1 119.5-84.8-118.6-37.2 26.7 86.1 120.5h-69v46.6h81.6v43.1h-81.6v46.1h81.6v61H548v-61h88.3v-46.1H548v-43.1h88.3v-46.6h-75.1z',
            symbolSize: 30,
          },
          {
            x: 850,
            y: 600,
            nodeName: '负债比率:  ' +data.负债比率,
            svgPath: 'M528.1 118.8L878.8 316v392.3L528.1 905.7 177.3 708.4V316l350.8-197.2m0-56.6l-400 225v450l400 225 400-225v-450l-400-225z,M652.9 367l-36.6-27.2-91.1 119.5-84.8-118.6-37.2 26.7 86.1 120.5h-69v46.6h81.6v43.1h-81.6v46.1h81.6v61H548v-61h88.3v-46.1H548v-43.1h88.3v-46.6h-75.1z',
            symbolSize: 30,
          },
          {
            x: 0,
            y: 400,
            nodeName: '毛利率:  ' +data.毛利率,
            svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
            symbolSize: 30,
          },
          {
            x: 200,
            y: 400,
            nodeName: '营业利润率:  ' +data.营业利润率,
            svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
            symbolSize: 30,
          },
          {
            x: 400,
            y: 400,
            nodeName: '流动资产比率:  ' +data.流动资产比率,
            svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
            symbolSize: 30,
          },
          {
            x: 600,
            y: 400,
            nodeName: '非流动资产比率:  '+'\n' +data.非流动资产比率,
            svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
            symbolSize: 30,
          },
          {
            x: 750,
            y: 400,
            nodeName: '流动比率:  ' +data.流动比率,
            svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
            symbolSize: 30,
          },
          {
            x: 950,
            y: 400,
            nodeName: '速动比率:  ' +data.速动比率,
            svgPath: 'M512.495 61.95c-248 0-449 201-449 449s201 449 449 449 449-201 449-449c-0.1-248-201.1-449-449-449z m197.1 395.8v100h-142.1v61.1h142.1v100h-142.1v98.6h-110v-98.6h-135.3v-100h135.3v-61.1h-135.3v-100h133.94l-151.04-167.2 74.2-67 135.5 150 134.7-151.2 74.7 66.5-150.389 168.9h135.789z',
            symbolSize: 30,
          },
          {
            x: 300,
            y: 200,
            nodeName: '存货周转率:  ' +data.存货周转率,
            svgPath: 'M736.44032 318.52032c37.6064-52.06016 70.86592-117.44256 37.95968-183.43424a99.36384 99.36384 0 0 0-63.2064-54.04672c-35.67616-9.728-72.55552 1.8176-96.18432 12.50816A145.80224 145.80224 0 0 0 514.048 61.952c-54.272 4.608-78.52544 17.48992-100.864 33.15712-39.6032-10.92096-89.03168-16.57344-127.94368 4.68992a101.376 101.376 0 0 0-49.53088 66.22208C221.184 223.10912 256.47616 276.992 295.03488 324.03968 222.44864 373.76 53.31456 513.75616 67.37408 729.28768l0.12288 1.47456C83.93728 884.57216 158.93504 962.56 290.4064 962.56h467.31776c1.85344-0.08192 194.1504-1.35168 199.6288-246.70208 5.16096-231.80288-160.1024-358.6304-220.91264-397.3376z m21.53984 572.6464H290.4064c-117.85728 0-143.0784-84.42368-152.02816-167.26528-12.0832-192.24576 157.312-315.98592 209.56672-349.35296a55.94112 55.94112 0 0 0 12.5952-83.27168c-33.2288-39.20384-62.976-79.36-55.808-107.56608 3.47648-13.62432 9.6512-18.50368 14.6432-21.23264 17.0496-9.33376 50.3808-7.168 89.1392 5.79072L425.8816 174.08l18.5344-13.5168c21.62688-15.872 32.48128-23.80288 75.6992-27.48928 36.08576-3.072 62.20288 26.5728 62.2592 26.624l20.2496 24.23808 26.43968-17.23392c11.55072-7.52128 43.56096-22.19008 63.488-16.768 5.20704 1.42336 11.98592 4.64384 18.19136 17.08032 14.42816 28.93824 2.14016 65.39264-41.088 121.9072a55.92576 55.92576 0 0 0 16.54784 82.53952c34.23744 19.53792 204.8 127.90272 199.9872 342.79936-3.83488 170.5984-115.53792 176.768-128.20992 176.90624z m-127.83104-276.11136a35.69664 35.69664 0 0 0 0-71.39328h-35.328l35.70688-49.9456a35.63008 35.63008 0 1 0-57.856-41.59488l-54.57408 76.33408L463.5392 456.448a35.6352 35.6352 0 1 0-56.71424 43.17184l33.35168 44.032h-33.57184a35.69664 35.69664 0 0 0 0 71.39328h76.00128v26.85952H406.6048a35.69664 35.69664 0 0 0 0 71.39328h76.00128v52.32128a35.59936 35.59936 0 1 0 71.20384 0v-52.31104h76.3392a35.69664 35.69664 0 0 0 0-71.39328h-76.3392v-26.85952h76.3392z',
            symbolSize: 30,
          },
          {
            x: 500,
            y: 200,
            nodeName: '应收账款周转率:  ' +data.应收账款周转率,
            svgPath: 'M736.44032 318.52032c37.6064-52.06016 70.86592-117.44256 37.95968-183.43424a99.36384 99.36384 0 0 0-63.2064-54.04672c-35.67616-9.728-72.55552 1.8176-96.18432 12.50816A145.80224 145.80224 0 0 0 514.048 61.952c-54.272 4.608-78.52544 17.48992-100.864 33.15712-39.6032-10.92096-89.03168-16.57344-127.94368 4.68992a101.376 101.376 0 0 0-49.53088 66.22208C221.184 223.10912 256.47616 276.992 295.03488 324.03968 222.44864 373.76 53.31456 513.75616 67.37408 729.28768l0.12288 1.47456C83.93728 884.57216 158.93504 962.56 290.4064 962.56h467.31776c1.85344-0.08192 194.1504-1.35168 199.6288-246.70208 5.16096-231.80288-160.1024-358.6304-220.91264-397.3376z m21.53984 572.6464H290.4064c-117.85728 0-143.0784-84.42368-152.02816-167.26528-12.0832-192.24576 157.312-315.98592 209.56672-349.35296a55.94112 55.94112 0 0 0 12.5952-83.27168c-33.2288-39.20384-62.976-79.36-55.808-107.56608 3.47648-13.62432 9.6512-18.50368 14.6432-21.23264 17.0496-9.33376 50.3808-7.168 89.1392 5.79072L425.8816 174.08l18.5344-13.5168c21.62688-15.872 32.48128-23.80288 75.6992-27.48928 36.08576-3.072 62.20288 26.5728 62.2592 26.624l20.2496 24.23808 26.43968-17.23392c11.55072-7.52128 43.56096-22.19008 63.488-16.768 5.20704 1.42336 11.98592 4.64384 18.19136 17.08032 14.42816 28.93824 2.14016 65.39264-41.088 121.9072a55.92576 55.92576 0 0 0 16.54784 82.53952c34.23744 19.53792 204.8 127.90272 199.9872 342.79936-3.83488 170.5984-115.53792 176.768-128.20992 176.90624z m-127.83104-276.11136a35.69664 35.69664 0 0 0 0-71.39328h-35.328l35.70688-49.9456a35.63008 35.63008 0 1 0-57.856-41.59488l-54.57408 76.33408L463.5392 456.448a35.6352 35.6352 0 1 0-56.71424 43.17184l33.35168 44.032h-33.57184a35.69664 35.69664 0 0 0 0 71.39328h76.00128v26.85952H406.6048a35.69664 35.69664 0 0 0 0 71.39328h76.00128v52.32128a35.59936 35.59936 0 1 0 71.20384 0v-52.31104h76.3392a35.69664 35.69664 0 0 0 0-71.39328h-76.3392v-26.85952h76.3392z',
            symbolSize: 30,
          },
        ]
        var charts = {
          nodes: [],
          linesData: [{
              coords: [
                [500, 1000],
                [500, 900],
              ]
            }, {
              coords: [
                [500, 900],
                [300, 900],
                [300, 800]
              ]
            },
            {
              coords: [
                [500, 900],
                [850, 900],
                [850, 800]
        
              ]
            },
            {
              coords: [
                [300, 800],
                [300, 700],
              ]
            },
            {
              coords: [
                [300, 700],
                [100, 700],
                [100, 600]
              ]
            },
            {
              coords: [
                [300, 700],
                [500, 700],
                [500, 600]
              ]
            },
            {
              coords: [
                [100, 600],
                [100, 500]
              ]
            },
            {
              coords: [
                [100, 500],
                [0, 500],
                [0, 400]
              ]
            },
            {
              coords: [
                [100, 500],
                [200, 500],
                [200, 400]
              ]
            },
            {
              coords: [
                [500, 600],
                [500, 500]
              ]
            },
            {
              coords: [
                [500, 500],
                [400, 500],
                [400, 400]
              ]
            },
            {
              coords: [
                [500, 500],
                [600, 500],
                [600, 400]
              ]
            },
            {
              coords: [
                [400, 400],
                [400, 300]
              ]
            },
            {
              coords: [
                [400, 300],
                [300, 300],
                [300, 200]
              ]
            },
            {
              coords: [
                [400, 300],
                [500, 300],
                [500, 200]
              ]
            },
            {
              coords: [
                [850, 800],
                [850, 600]
              ]
            },
                {
              coords: [
                [850, 600],
                [850, 500]
              ]
            },
            {
              coords: [
                [850, 500],
                [750, 500],
                [750, 400]
              ]
            },
            {
              coords: [
                [850, 500],
                [950, 500],
                [950, 400]
              ]
            }
          ]
        }
        for (var j = 0; j < nodes.length; j++) {
          const {
            x,
            y,
            nodeName,
            svgPath,
            symbolSize
          } = nodes[j];
          var node = {
            nodeName,
            value: [x, y],
            symbolSize: symbolSize || 50,
            symbol: 'path://' + svgPath,
            itemStyle: {
              color: 'orange',
            }
          }
          charts.nodes.push(node)
        }
        option = {
          backgroundColor: "#030c2b",
          xAxis: {
            min: 0,
            max: 1000,
            show: false,
            type: 'value'
          },
          yAxis: {
            min: 0,
            max: 1000,
            show: false,
            type: 'value'
          },
          series: [{
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            label: {
              show: true,
              position: 'bottom',
              color: 'orange',
              formatter: function(item) {
                return item.data.nodeName
              }
            },
            data: charts.nodes,
          }, {
            type: 'lines',
            polyline: true,
            coordinateSystem: 'cartesian2d',
            lineStyle: {
              type: 'dashed',
              width: 2,
              color: '#175064',
              curveness: 0.3
        
            },
            effect: {
              show: true,
              trailLength: 0.1,
              symbol: 'arrow',
              color: 'orange',
              symbolSize: 8
            },
            data: charts.linesData
          }]
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：