简单的拓扑图echarts graph配置项内容和展示

      var uploadedDataURL = "https://www.easy-mock.com/mock/59a51e3c7b7ac306cc2f08a8/api/paths.json";

// 链路连线颜色
const LINK_COLORS = {
    CONNECTED: 'green',
    DISCONNECTED: 'red'
}

// 链路连通状态
const LINK_STATUS = {
    CONNECTED: '11',
    DISCONNECTED: '00'
}

const NODE_TYPES = {
    START: 'start', // 起始点
    END: 'end', // 结束
    SEGMENT: 'segment', // 分割
    UNKNOWN: 'unknown', // 未知
    CLOUD: 'cloud', // 云朵，外网
    NETWORK_SWITCH: 'networkSwitch', // 交换机
    ROUTER: 'router', // 路由器
    FIREWALL: 'firewall', // 防火墙
}

const SYMBOL_SIZE = 50;

const LOCK_PATH = `M5 12h8v-3c0-2.203-1.797-4-4-4s-4 1.797-4 4v3zM18 13.5v9c0 0.828-0.672 1.5-1.5 1.5h-15c-0.828 0-1.5-0.672-1.5-1.5v-9c0-0.828 0.672-1.5 1.5-1.5h0.5v-3c0-3.844 3.156-7 7-7s7 3.156 7 7v3h0.5c0.828 0 1.5 0.672 1.5 1.5z`;
const UNLOCK_PATH = `M26 9v4c0 0.547-0.453 1-1 1h-1c-0.547 0-1-0.453-1-1v-4c0-2.203-1.797-4-4-4s-4 1.797-4 4v3h1.5c0.828 0 1.5 0.672 1.5 1.5v9c0 0.828-0.672 1.5-1.5 1.5h-15c-0.828 0-1.5-0.672-1.5-1.5v-9c0-0.828 0.672-1.5 1.5-1.5h10.5v-3c0-3.859 3.141-7 7-7s7 3.141 7 7z`;
const QUESTION_CIRCLR_O_PATH = `M13.75 18.75v2.5c0 0.281-0.219 0.5-0.5 0.5h-2.5c-0.281 0-0.5-0.219-0.5-0.5v-2.5c0-0.281 0.219-0.5 0.5-0.5h2.5c0.281 0 0.5 0.219 0.5 0.5zM17.75 11c0 2.219-1.547 3.094-2.688 3.734-0.812 0.469-1.313 0.766-1.313 1.266v0.5c0 0.281-0.219 0.5-0.5 0.5h-2.5c-0.281 0-0.5-0.219-0.5-0.5v-1.062c0-1.922 1.375-2.531 2.484-3.031 0.938-0.438 1.516-0.734 1.516-1.437 0-0.906-1.141-1.578-2.172-1.578-0.547 0-1.125 0.172-1.484 0.422-0.344 0.234-0.672 0.578-1.25 1.297-0.094 0.125-0.234 0.187-0.391 0.187-0.109 0-0.219-0.031-0.297-0.094l-1.687-1.281c-0.203-0.156-0.25-0.453-0.109-0.672 1.281-2.016 3.078-3 5.453-3v0c2.562 0 5.437 2.031 5.437 4.75zM12 4c-5.516 0-10 4.484-10 10s4.484 10 10 10 10-4.484 10-10-4.484-10-10-10zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12v0c6.625 0 12 5.375 12 12z`;
const FLAG_O_PATH = 'M26 16.328v-9.625c-1.25 0.672-3 1.422-4.781 1.422v0c-0.828 0-1.594-0.156-2.266-0.5-1.672-0.828-3.484-1.625-5.656-1.625-2.016 0-4.484 0.984-6.297 1.984v9.359c2.063-0.953 4.688-1.766 6.766-1.766 2.406 0 3.969 0.797 5.641 1.625l0.438 0.219c0.438 0.219 0.969 0.344 1.578 0.344 1.734 0 3.609-0.922 4.578-1.437zM5 4c0 0.734-0.406 1.375-1 1.719v19.781c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-19.781c-0.594-0.344-1-0.984-1-1.719 0-1.109 0.891-2 2-2s2 0.891 2 2zM28 5v11.922c0 0.375-0.219 0.719-0.547 0.891-0.063 0.031-0.156 0.078-0.266 0.141-1 0.531-3.359 1.813-5.766 1.813-0.922 0-1.75-0.187-2.469-0.547l-0.438-0.219c-1.578-0.797-2.828-1.422-4.75-1.422-2.25 0-5.422 1.172-7.25 2.281-0.156 0.094-0.344 0.141-0.516 0.141s-0.344-0.047-0.5-0.125c-0.313-0.187-0.5-0.516-0.5-0.875v-11.594c0-0.344 0.187-0.672 0.484-0.859 1-0.594 4.531-2.547 7.812-2.547 2.609 0 4.734 0.953 6.531 1.828 0.406 0.203 0.875 0.297 1.391 0.297 1.844 0 3.875-1.172 4.844-1.75 0.203-0.109 0.375-0.203 0.484-0.266 0.313-0.156 0.672-0.141 0.969 0.031 0.297 0.187 0.484 0.516 0.484 0.859z';
const FLAG_CHECKERED_PATH = 'M13 15.625v-3c-1.906 0.172-4.203 0.938-6 1.828v2.891c1.813-0.844 4.062-1.563 6-1.719zM13 9.094v-3.078c-1.969 0.094-4.281 1.016-6 1.969v2.953c1.844-0.953 4.062-1.766 6-1.844zM26 16.328v-2.875c-1.422 0.703-3.906 1.75-6 1.109v-3.5c-0.203-0.063-0.406-0.141-0.609-0.234-1.797-0.906-3.266-1.75-5.625-1.75-0.25 0-0.5 0.016-0.766 0.047v3.469h0.297c2.359 0 4.297 0.844 6.094 1.734 0.203 0.094 0.406 0.172 0.609 0.234v2.938c0.422 0.172 0.891 0.266 1.422 0.266 1.734 0 3.609-0.922 4.578-1.437zM26 9.656v-2.953c-1.25 0.672-3 1.422-4.781 1.422v0c-0.422 0-0.828-0.031-1.219-0.125v3.063c2.094 0.594 4.578-0.609 6-1.406zM5 4c0 0.734-0.406 1.375-1 1.719v19.781c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-19.781c-0.594-0.344-1-0.984-1-1.719 0-1.109 0.891-2 2-2s2 0.891 2 2zM28 5v11.922c0 0.375-0.219 0.719-0.547 0.891-0.063 0.031-0.156 0.078-0.266 0.141-1 0.531-3.359 1.813-5.766 1.813-0.922 0-1.75-0.187-2.469-0.547l-0.438-0.219c-1.578-0.797-2.828-1.422-4.75-1.422-2.25 0-5.422 1.172-7.25 2.281-0.156 0.094-0.344 0.141-0.516 0.141s-0.344-0.047-0.5-0.125c-0.313-0.187-0.5-0.516-0.5-0.875v-11.594c0-0.344 0.187-0.672 0.484-0.859 1-0.594 4.531-2.547 7.812-2.547 2.609 0 4.734 0.953 6.531 1.828 0.406 0.203 0.875 0.297 1.391 0.297 1.844 0 3.875-1.172 4.844-1.75 0.203-0.109 0.375-0.203 0.484-0.266 0.313-0.156 0.672-0.141 0.969 0.031 0.297 0.187 0.484 0.516 0.484 0.859z';
const NETWORK_SWITCH_PATH = 'M9.081 6.463c5.638 0.002 11.28 0.004 16.919 0.006-0.020 0.020-0.041 0.040-0.061 0.060-0.011-0.009-0.022-0.018-0.033-0.026-0.736 0.727-1.472 1.454-2.208 2.181-5.897 0-11.795 0-17.692 0 0.004-0.006 0.009-0.014 0.014-0.020 1.020-0.733 2.041-1.467 3.061-2.201zM25.859 6.919c0.002 5.786 0.005 11.575 0.006 17.362-0.658 0.649-1.316 1.298-1.974 1.946 0-5.786 0-11.575 0-17.362 0.657-0.649 1.311-1.298 1.967-1.946zM6 8.946c5.874 0 11.75 0 17.624 0 0 5.87 0 11.741 0 17.61-5.874 0-11.75 0-17.624 0 0-5.87 0-11.741 0-17.61zM14.645 11.268c0 0.774 0 1.549 0 2.322 0.199-0.001 0.413-0.007 0.617-0.006 0-0.772 0-1.544 0-2.316 0.217 0 0.434 0 0.65 0-0.002-0.006-0.004-0.014-0.006-0.020-0.316-0.477-0.631-0.953-0.946-1.43-0.006 0.005-0.014 0.009-0.020 0.014-0.314 0.479-0.626 0.958-0.94 1.436 0.216 0 0.43 0 0.646 0zM9.35 12.141c0.114 0.566 0.228 1.132 0.342 1.698 0.152-0.152 0.304-0.304 0.456-0.457 0.562 0.559 1.123 1.118 1.684 1.678 0.143-0.148 0.286-0.295 0.43-0.443-0.557-0.557-1.114-1.114-1.671-1.671 0.152-0.154 0.304-0.309 0.456-0.463-0.565-0.114-1.131-0.228-1.697-0.342zM20.537 12.141c-0.558 0.114-1.118 0.228-1.678 0.342 0.151 0.154 0.304 0.309 0.456 0.463-0.539 0.541-1.078 1.083-1.617 1.624 0.004 0 0.009 0 0.013 0 0.122 0.158 0.305 0.266 0.423 0.43 0.539-0.539 1.078-1.078 1.617-1.618 0.154 0.152 0.31 0.304 0.463 0.457 0-0.005 0-0.009 0-0.014 0.114-0.562 0.228-1.123 0.342-1.684-0.006-0.001-0.013-0.001-0.020-0.001zM14.866 13.846c-0.143 0.014-0.286 0.027-0.43 0.040-0.275 0.056-0.539 0.107-0.778 0.201-1.113 0.438-1.859 1.219-2.295 2.335-0.083 0.212-0.126 0.451-0.174 0.691-0.113 0.552-0.025 1.237 0.114 1.684 0.364 1.172 1.102 2.002 2.174 2.463 0.276 0.118 0.578 0.206 0.913 0.275 0.15 0.014 0.3 0.027 0.45 0.041 0.118 0.002 0.237 0.004 0.355 0.006 0.343-0.057 0.65-0.070 0.94-0.161 1.162-0.365 2-1.15 2.456-2.221 0.376-0.883 0.365-2.094-0.006-2.966-0.575-1.35-1.79-2.394-3.719-2.389zM8.477 18.054c0.803 0 1.606 0 2.41 0-0.002-0.206-0.018-0.415 0-0.618-0.803 0-1.606 0-2.41 0 0-0.217 0-0.434 0-0.65-0.483 0.322-0.966 0.645-1.45 0.966 0.005 0 0.010 0 0.014 0 0.477 0.318 0.953 0.635 1.43 0.953 0.002 0 0.005 0 0.007 0 0-0.218 0-0.434 0-0.651zM21.436 17.436c-0.765 0-1.53 0-2.295 0 0.018 0.203 0.002 0.411 0 0.618 0.766 0.002 1.53 0.004 2.295 0.006 0 0.215 0 0.43 0 0.645 0.482-0.32 0.962-0.64 1.444-0.96 0-0.002 0-0.004 0-0.006-0.482-0.318-0.962-0.636-1.444-0.953 0 0.217 0 0.434 0 0.65zM11.852 20.402c-0.566 0.569-1.132 1.137-1.698 1.705-0.154-0.151-0.309-0.304-0.463-0.456-0.114 0.566-0.228 1.132-0.342 1.698 0.006 0 0.014 0 0.020 0 0.559-0.114 1.118-0.229 1.678-0.343-0.152-0.151-0.304-0.304-0.456-0.456 0.568-0.57 1.137-1.141 1.705-1.711-0.146-0.146-0.294-0.291-0.442-0.437zM18.108 20.463c-0.116 0.155-0.286 0.316-0.444 0.429 0.55 0.55 1.102 1.101 1.651 1.651-0.152 0.154-0.305 0.309-0.456 0.462 0.566 0.114 1.131 0.229 1.698 0.343 0-0.007 0-0.014 0-0.020-0.114-0.559-0.228-1.118-0.342-1.678-0.152 0.152-0.304 0.305-0.457 0.456-0.548-0.548-1.095-1.096-1.644-1.644-0.002 0.001-0.004 0.001-0.006 0.001zM14.645 21.839c0 0.794 0 1.588 0 2.382-0.217 0-0.434 0-0.651 0 0.322 0.483 0.644 0.966 0.966 1.45 0-0.005 0-0.010 0-0.014 0.318-0.477 0.635-0.953 0.953-1.43 0-0.002 0-0.005 0-0.007-0.217 0-0.434 0-0.65 0 0-0.791 0-1.583 0-2.376-0.202 0.005-0.423-0.004-0.618-0.006z';
const ROUTER_PATH = 'M15.513 9.303c2.45-0.009 4.642 0.196 6.51 0.778 0.884 0.276 1.698 0.568 2.413 1.005 0.575 0.351 1.109 0.748 1.408 1.374 0.176 0.368 0.205 0.864 0.034 1.265-0.494 1.151-2.157 1.905-3.434 2.308-0.542 0.17-1.115 0.307-1.701 0.453-0.372 0.066-0.744 0.133-1.116 0.198-0.563 0.112-1.158 0.098-1.75 0.193-0.425 0.020-0.85 0.041-1.276 0.061-0.112 0-0.224 0-0.337 0-0.171 0-0.342 0-0.514 0-0.079 0-0.158 0-0.238 0-0.205-0.007-0.409-0.014-0.614-0.022-0.146-0.006-0.29-0.011-0.436-0.017-0.477-0.076-0.963-0.046-1.425-0.127-0.399-0.059-0.799-0.118-1.198-0.177-0.986-0.215-1.932-0.404-2.783-0.74-1.144-0.451-2.261-0.966-2.85-1.971-0.066-0.113-0.117-0.251-0.154-0.386-0.29-1.035 0.652-1.823 1.193-2.203 1.109-0.78 2.482-1.158 4.003-1.535 0.47-0.117 0.966-0.157 1.458-0.249 0.448-0.083 0.918-0.068 1.38-0.143 0.172-0.011 0.343-0.022 0.514-0.034 0.305-0.010 0.609-0.020 0.913-0.031zM19.748 10.032c-1.054 0.29-2.11 0.582-3.164 0.872 0.33 0.050 0.658 0.1 0.988 0.15-0.534 0.422-1.067 0.843-1.602 1.265 0.495 0.071 0.99 0.143 1.486 0.215 0.515-0.429 1.030-0.858 1.546-1.286 0.266 0.050 0.534 0.1 0.8 0.15-0.011-0.454-0.022-0.91-0.033-1.364-0.007-0.001-0.015-0.001-0.022-0.001zM8.412 11.241c-0.405 0.306-0.81 0.611-1.215 0.917 0 0.002 0 0.003 0 0.006 1.622 0.276 3.243 0.552 4.865 0.828-0.226 0.191-0.453 0.383-0.679 0.574 1.049-0.243 2.098-0.486 3.147-0.729-0.278-0.416-0.556-0.832-0.834-1.248-0.191 0.149-0.383 0.298-0.574 0.447-1.57-0.265-3.14-0.53-4.71-0.795zM20.382 12.766c-0.938 0.19-1.878 0.379-2.816 0.569 0.19 0.429 0.379 0.858 0.569 1.286 0.010-0.010 0.018-0.018 0.027-0.028 0.216-0.184 0.431-0.368 0.646-0.552 1.574 0.294 3.148 0.589 4.721 0.883 0.378-0.303 0.754-0.607 1.132-0.911-1.579-0.27-3.158-0.541-4.738-0.812 0.006-0.007 0.011-0.014 0.017-0.022 0.154-0.138 0.31-0.276 0.464-0.414-0.008 0.001-0.015 0.001-0.022 0.001zM14.607 13.726c-0.556 0.475-1.112 0.95-1.667 1.425-0.291-0.062-0.582-0.125-0.872-0.188 0.037 0.467 0.074 0.935 0.11 1.402 1.009-0.188 2.017-0.376 3.026-0.563-0.298-0.090-0.596-0.181-0.894-0.27 0.010-0.011 0.018-0.022 0.028-0.034 0.583-0.508 1.166-1.016 1.75-1.524-0.494-0.082-0.988-0.165-1.481-0.248zM6.010 13.974c0.090 0.115 0.151 0.25 0.238 0.365 0.23 0.304 0.543 0.564 0.856 0.784 0.566 0.398 1.214 0.678 1.91 0.95 3.415 1.332 9.375 1.45 13.092 0.293 1.185-0.369 2.211-0.795 3.081-1.463 0.25-0.192 0.701-0.615 0.806-0.928 0.002 0 0.004 0 0.006 0 0 1.248 0 2.496 0 3.744 0 0.302 0 0.604 0 0.906 0 0.183 0.012 0.382-0.022 0.536-0.062 0.279-0.178 0.511-0.32 0.712-0.584 0.824-1.587 1.301-2.595 1.701-3.557 1.414-9.906 1.523-13.638 0.171-1.171-0.424-2.505-0.981-3.119-1.943-0.118-0.186-0.217-0.394-0.27-0.641-0.034-0.154-0.022-0.352-0.022-0.536 0-0.303 0-0.608 0-0.911-0.002-1.246-0.002-2.493-0.002-3.738z';
const FIREWALL_PATH = 'M15.552 2.050c1.859 0 3.717 0 5.574 0-1.656 1.53-3.314 3.061-4.971 4.591-2.133 0-4.266 0-6.399 0 0.006-0.010 0.012-0.018 0.017-0.026 1.927-1.522 3.854-3.043 5.779-4.565zM21.392 2.281c0.003 1.078 0.006 2.157 0.010 3.234-0.431 0.411-0.862 0.821-1.294 1.232 0-1.093 0-2.186 0-3.279 0.428-0.395 0.856-0.791 1.284-1.187zM19.744 3.806c0.003 1.095 0.006 2.192 0.010 3.287-1.118 1.066-2.239 2.133-3.359 3.199 0-0.806 0-1.613 0-2.418 0-0.214-0.046-0.858 0.018-1.002 1.11-1.022 2.222-2.045 3.332-3.066zM21.392 6.003c0.003 0.806 0.006 1.614 0.010 2.419 0 0.203 0.050 0.674-0.018 0.824-1.030 1.017-2.061 2.033-3.092 3.049 0-0.788 0-1.578 0-2.366 0-0.211-0.046-0.842 0.017-0.983 1.028-0.981 2.058-1.962 3.084-2.942zM9.419 6.996c2.21 0 4.419 0 6.63 0-0.003 1.178-0.006 2.357-0.010 3.536-2.207 0-4.414 0-6.62 0 0-1.179 0-2.358 0-3.536zM17.936 9.31c0.003 1.114 0.006 2.227 0.010 3.341-0.517 0.508-1.034 1.017-1.551 1.524 0-1.131 0-2.262 0-3.394 0.514-0.49 1.027-0.981 1.542-1.47zM21.392 9.717c0.003 1.073 0.006 2.146 0.010 3.217-0.431 0.44-0.862 0.881-1.294 1.321 0-1.087 0-2.175 0-3.262 0.428-0.425 0.856-0.85 1.284-1.276zM9.419 10.878c2.21 0 4.419 0 6.63 0 0 1.179 0 2.358 0 3.537-2.21 0-4.42 0-6.63 0 0-1.179 0-2.358 0-3.537zM19.744 11.348c0.003 1.093 0.006 2.186 0.010 3.279-1.118 1.143-2.239 2.286-3.359 3.43 0-1.128 0-2.257 0-3.385 1.117-1.109 2.234-2.218 3.35-3.324zM21.392 13.439c0.003 1.066 0.006 2.133 0.010 3.199-1.036 1.096-2.074 2.192-3.111 3.288 0-1.105 0-2.21 0-3.315 1.034-1.057 2.069-2.115 3.102-3.172zM9.419 14.759c2.21 0.003 4.419 0.006 6.63 0.009 0 1.176 0 2.352 0 3.527-2.21 0-4.42 0-6.63 0 0-1.178 0-2.357 0-3.536zM17.928 16.984c0.049 0.057 0.017 0.286 0.017 0.381 0 0.358 0 0.715 0 1.073 0 0.62 0 1.241 0 1.861-0.514 0.544-1.028 1.087-1.542 1.631-0.002 0-0.006 0-0.009 0 0-1.126 0-2.251 0-3.377 0.511-0.523 1.023-1.046 1.534-1.569zM21.392 17.152c0.003 1.066 0.006 2.134 0.010 3.2-0.431 0.466-0.862 0.933-1.294 1.4 0-1.078 0-2.157 0-3.235 0.428-0.454 0.856-0.909 1.284-1.365zM9.419 18.65c2.21 0 4.419 0 6.63 0-0.003 1.178-0.006 2.357-0.010 3.536-2.207 0-4.414 0-6.62 0 0-1.178 0-2.358 0-3.536zM19.744 18.898c0.003 1.084 0.006 2.169 0.010 3.253-1.118 1.219-2.239 2.44-3.359 3.659 0-1.122 0-2.246 0-3.367 1.117-1.182 2.234-2.362 3.35-3.545zM21.392 20.866c0.003 1.064 0.006 2.127 0.010 3.191-1.036 1.166-2.074 2.334-3.111 3.5 0-1.098 0-2.198 0-3.296 1.034-1.132 2.069-2.263 3.102-3.395zM9.419 22.532c2.21 0 4.419 0 6.63 0 0 1.179 0 2.358 0 3.537-2.21 0-4.42 0-6.63 0 0-1.179 0-2.358 0-3.537zM17.936 24.65c0.003 1.102 0.006 2.203 0.010 3.306-0.517 0.579-1.034 1.158-1.551 1.738 0-1.12 0-2.24 0-3.359 0.514-0.561 1.027-1.122 1.542-1.684zM9.419 26.414c2.21 0.003 4.419 0.006 6.63 0.009 0 1.176 0 2.352 0 3.527-2.21 0-4.42 0-6.63 0 0-1.178 0-2.358 0-3.536z';
const CHAIN_PATH = 'M22.75 19c0-0.406-0.156-0.781-0.438-1.062l-3.25-3.25c-0.281-0.281-0.672-0.438-1.062-0.438-0.453 0-0.812 0.172-1.125 0.5 0.516 0.516 1.125 0.953 1.125 1.75 0 0.828-0.672 1.5-1.5 1.5-0.797 0-1.234-0.609-1.75-1.125-0.328 0.313-0.516 0.672-0.516 1.141 0 0.391 0.156 0.781 0.438 1.062l3.219 3.234c0.281 0.281 0.672 0.422 1.062 0.422s0.781-0.141 1.062-0.406l2.297-2.281c0.281-0.281 0.438-0.656 0.438-1.047zM11.766 7.984c0-0.391-0.156-0.781-0.438-1.062l-3.219-3.234c-0.281-0.281-0.672-0.438-1.062-0.438s-0.781 0.156-1.062 0.422l-2.297 2.281c-0.281 0.281-0.438 0.656-0.438 1.047 0 0.406 0.156 0.781 0.438 1.062l3.25 3.25c0.281 0.281 0.672 0.422 1.062 0.422 0.453 0 0.812-0.156 1.125-0.484-0.516-0.516-1.125-0.953-1.125-1.75 0-0.828 0.672-1.5 1.5-1.5 0.797 0 1.234 0.609 1.75 1.125 0.328-0.313 0.516-0.672 0.516-1.141zM25.75 19c0 1.188-0.484 2.344-1.328 3.172l-2.297 2.281c-0.844 0.844-1.984 1.297-3.172 1.297-1.203 0-2.344-0.469-3.187-1.328l-3.219-3.234c-0.844-0.844-1.297-1.984-1.297-3.172 0-1.234 0.5-2.406 1.375-3.266l-1.375-1.375c-0.859 0.875-2.016 1.375-3.25 1.375-1.188 0-2.344-0.469-3.187-1.313l-3.25-3.25c-0.859-0.859-1.313-1.984-1.313-3.187 0-1.188 0.484-2.344 1.328-3.172l2.297-2.281c0.844-0.844 1.984-1.297 3.172-1.297 1.203 0 2.344 0.469 3.187 1.328l3.219 3.234c0.844 0.844 1.297 1.984 1.297 3.172 0 1.234-0.5 2.406-1.375 3.266l1.375 1.375c0.859-0.875 2.016-1.375 3.25-1.375 1.188 0 2.344 0.469 3.187 1.313l3.25 3.25c0.859 0.859 1.313 1.984 1.313 3.187z';
const CLOUD_PATH = 'M25.638 16.867c0 0.096 0 0.195 0 0.294-0.010 0-0.020 0-0.028 0-0.042 0.523-0.21 0.956-0.517 1.2-0.098 0.079-0.26 0.116-0.347 0.21 0.026 0.098 0.050 0.198 0.075 0.296 0.012 0.129 0.024 0.258 0.037 0.387-0.006 0.082-0.013 0.163-0.018 0.245-0.061 0.386-0.101 0.583-0.238 0.874-0.448 0.954-1.242 1.431-2.306 1.736-0.239 0.068-0.47 0.040-0.739 0.086-0.108 0.006-0.215 0.013-0.323 0.018-0.182-0.010-0.363-0.019-0.544-0.030-0.065 0.060-0.13 0.119-0.197 0.18-0.13 0.104-0.269 0.203-0.41 0.294-0.458 0.295-1.183 0.447-1.873 0.481 0 0.011 0 0.021 0 0.030-0.616 0-1.23 0-1.845 0 0-0.010 0-0.019 0-0.030-0.35 0.002-0.781-0.019-1.115-0.081-0.266-0.049-0.498-0.031-0.752-0.080-0.694-0.131-1.446-0.284-1.947-0.628-0.19-0.128-0.382-0.266-0.538-0.43-0.074-0.078-0.21-0.331-0.278-0.376-0.061-0.023-0.342 0.11-0.415 0.136-0.256 0.086-0.874 0.123-1.197 0.068-1.256-0.221-2.404-0.742-2.977-1.681-0.098-0.159-0.178-0.361-0.226-0.567-0.030-0.125 0.012-0.262-0.034-0.35-0.742-0.15-1.134-0.76-1.219-1.595-0.010 0-0.020 0-0.029 0 0-0.204 0-0.41 0-0.613 0.009 0 0.018 0 0.029 0 0.109-0.849 0.57-1.378 1.174-1.7 0.18-0.097 0.454-0.118 0.624-0.221-0.007-0.274-0.030-0.554 0.029-0.806 0.249-1.052 1.194-1.778 2.174-2.056 0.322-0.091 0.662-0.121 1.023-0.184 0.138-0.002 0.278-0.006 0.416-0.007 0.386 0 0.731 0.002 1.070 0.074 0.144 0.029 0.29 0.057 0.434 0.086 0.102-0.052 0.165-0.218 0.237-0.306 0.172-0.209 0.437-0.406 0.688-0.523 1.322-0.623 3.5-0.759 5.116-0.307 0.463 0.13 0.946 0.31 1.311 0.559 0.114 0.082 0.229 0.166 0.342 0.246 0.083 0.066 0.154 0.168 0.27 0.198 0.149-0.009 0.294-0.016 0.441-0.026 0.374 0 0.707 0.003 1.023 0.068 0.97 0.199 1.721 0.62 2.168 1.379 0.166 0.28 0.31 0.75 0.214 1.224-0.030 0.146-0.083 0.285-0.126 0.425 0.050 0.065 0.168 0.077 0.247 0.11 0.105 0.061 0.208 0.122 0.314 0.185 0.422 0.309 0.694 0.815 0.758 1.508 0.005 0.001 0.016 0.001 0.026 0.001zM16.231 11.984c-0.066 0.002-0.134 0.003-0.201 0.005-0.212 0.019-0.425 0.038-0.638 0.057-0.451 0.082-0.862 0.175-1.25 0.303-0.266 0.088-0.634 0.31-0.792 0.51-0.032 0.040-0.201 0.352-0.206 0.354-0.040 0.008-0.284-0.078-0.36-0.093-0.302-0.057-0.618-0.045-0.942-0.098-0.075 0-0.15 0-0.226 0-0.309 0-0.598 0.040-0.854 0.093-0.958 0.197-1.734 0.634-2.052 1.466-0.059 0.154-0.117 0.409-0.082 0.617 0.013 0.077 0.068 0.288 0.062 0.33-0.122 0.075-0.326 0.070-0.468 0.118-0.293 0.1-0.61 0.259-0.787 0.478-0.163 0.201-0.297 0.428-0.37 0.72-0.158 0.626 0.13 1.355 0.478 1.606 0.103 0.074 0.21 0.107 0.366 0.133 0.087-0.001 0.175-0.003 0.262-0.005 0.002 0.005 0.003 0.011 0.005 0.016 0.040 0.086-0.056 0.216-0.036 0.339 0.030 0.19 0.078 0.354 0.165 0.489 0.436 0.675 1.216 1.041 2.109 1.26 0.372 0.091 0.941 0.142 1.348 0.036 0.102-0.034 0.206-0.069 0.309-0.102 0.082-0.051 0.106-0.158 0.206-0.196 0.047 0.050 0.056 0.133 0.093 0.196 0.050 0.075 0.1 0.15 0.15 0.226 0.148 0.206 0.39 0.356 0.612 0.488 0.45 0.268 1.075 0.37 1.677 0.474 0.234 0.041 0.443 0.022 0.689 0.062 0.23 0.037 0.505 0.011 0.756 0.050 0.089 0.002 0.178 0.003 0.267 0.006 0.181 0.027 0.396 0.007 0.582 0.015 0.696 0.029 1.421-0.023 1.97-0.19 0.437-0.132 0.775-0.378 1.066-0.658 0.073 0.002 0.102 0.034 0.164 0.046 0.096 0.002 0.192 0.004 0.288 0.005 0.177-0.001 0.353-0.003 0.53-0.005 0.286-0.047 0.566-0.074 0.818-0.159 0.859-0.293 1.486-0.814 1.718-1.738 0.061-0.243 0.021-0.601-0.046-0.798-0.027-0.079-0.114-0.184-0.098-0.278 0.251-0.117 0.458-0.11 0.612-0.334 0.336-0.486 0.263-1.25-0.047-1.702-0.146-0.214-0.395-0.382-0.658-0.478-0.1-0.037-0.234-0.028-0.318-0.082 0.002-0.15 0.099-0.268 0.144-0.386 0.042-0.109 0.048-0.214 0.067-0.339 0.059-0.38-0.16-0.7-0.304-0.89-0.322-0.424-0.85-0.667-1.44-0.822-0.198-0.052-0.418-0.056-0.628-0.093-0.157-0.028-0.449-0.030-0.612-0.005-0.095 0.010-0.192 0.020-0.288 0.031-0.186-0.056-0.336-0.228-0.483-0.334-0.214-0.154-0.493-0.27-0.75-0.37-0.407-0.159-0.876-0.232-1.353-0.314-0.165-0.016-0.33-0.031-0.494-0.047-0.241-0.004-0.483-0.007-0.725-0.011z';
const PATHS = {
    lock: LOCK_PATH,
    unlock: UNLOCK_PATH,
    [NODE_TYPES.UNKNOWN]: QUESTION_CIRCLR_O_PATH,
    [NODE_TYPES.START]: FLAG_O_PATH,
    [NODE_TYPES.END]: FLAG_CHECKERED_PATH,
    [NODE_TYPES.SEGMENT]: CHAIN_PATH,
    [NODE_TYPES.NETWORK_SWITCH]: NETWORK_SWITCH_PATH,
    [NODE_TYPES.ROUTER]: ROUTER_PATH,
    [NODE_TYPES.FIREWALL]: FIREWALL_PATH
}

function symbolFactory(type) {
    let path = PATHS[type];
    return `path://${path}`;
}

// 是否为偶数
function isEven(number) {
    return number % 2 === 0 ? true : false;
}

function layoutGenerator(size, myChart, padding = SYMBOL_SIZE / 2) {
    let width = myChart.getWidth();
    let height = myChart.getHeight();
    console.log('rect:', width, height);
    let contentWidth = width - padding * size;
    let contentHeight = height - padding * 2;
    return function(index) {
        let x = contentWidth / size * index + padding;
        let y = contentHeight / 2 + padding * (isEven(index) ? 1 : -1) * 2;
        return {
            x,
            y
        };
    }
}

function dataAdaptor(paths, myChart) {
    const layouter = layoutGenerator(paths.length, myChart);
    let data = paths.map((path, index) => {
        let {
            dev_id,
            alias,
            ip,
            type,
            firm,
            is_writeable
        } = path;
        let id = index;
        let name = `${alias || ip}`;
        let symbol = symbolFactory(type);
        let coordinate = layouter(index);
        let tooltip = {
            formatter: function(params, path) {
                let tips = [];
                console.info('----', params);

                // if() {

                // }
                return tips.length ? tips.join('<br>') : null;
            }
        };
        let {
            x,
            y
        } = coordinate;
        // console.log(2222, type, symbol);
        return {
            id,
            name,
            x,
            y,
            symbol,
            tooltip,
            info: {
                devId: dev_id
            }
        };
    })
    return data;
}

function linksAdaptor(paths) {
    console.log(paths.slice(0, paths.length - 1));
    let links = paths.slice(0, paths.length - 1).map((path, index) => {
        // console.log('link: ', index, path.link);
        let {
            is_writeable,
            type,
            link
        } = path;
        let {
            dev_id,
            weight
        } = link || {};

        let isWriteable = Number(is_writeable);

        let source = index;
        let target = index + 1;

        let lineStyle = {
            normal: {
                type: 'dashed',
                width: 2
            },
            emphasis: {
                width: 4
            }
        }

        if (type === NODE_TYPES.UNKNOWN) {
            source = NaN;
            target = NaN;
        }


        if (weight === LINK_STATUS.CONNECTED) {
            let color = LINK_COLORS.CONNECTED;

            lineStyle.normal =
                Object.assign({}, lineStyle.normal, {
                    color,
                    symbol: ['circle', 'arrow']
                });
            console.log('--------21------------', lineStyle);
        } else if (weight === LINK_STATUS.DISCONNECTED) {
            let color = LINK_COLORS.DISCONNECTED;
            Object.assign(lineStyle.normal, {
                color,
                symbol: `path://${LOCK_PATH}`

            });
        }

        if (isWriteable) {
            let symbol = `path://${UNLOCK_PATH}`;
            Object.assign(lineStyle.normal, {
                symbol
            });

        } else {
            let symbol = `path://${LOCK_PATH}`;
            Object.assign(lineStyle.normal, {
                symbol
            });
        }

        console.log(lineStyle.normal);

        return {
            source,
            target,
            lineStyle
        }
    })
    console.log('--------4------------', links);
    return links;
}

function makeOption(paths, myChart) {
    console.log(111, paths);
    let data = dataAdaptor(paths, myChart);
    let links = linksAdaptor(paths);
    var option = {
        title: {
            text: 'A simple Network Topology'
        },
        tooltip: {
            trigger: 'item',
            showDelay: 500,
            enterable: true,
            confine: true
        },
        color: ['#285064'],
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: {
            name: '网络拓扑图',
            type: 'graph',
            layout: 'none',
            symbolSize: SYMBOL_SIZE,
            roam: 'move', // 可平移
            label: {
                normal: {
                    show: true,
                    color: 'black',
                    offset: [0, SYMBOL_SIZE]
                }
            },
            data: data,
            links: links
        }

    };
    return option
}

$.getJSON(uploadedDataURL, function(data) {
    let paths = data.data;
    let option = makeOption(data.data[4810]['path'], myChart);
    myChart.setOption(option);
})