xxxxx

描述:当前是关于Echarts图表中的 示例。
 
            var nodes = [{
                x: 550,
                y: 990,
                nodeName: '高比例清洁能源县域配电网安全运行静态评价指标体系',

            }, {
                x: 175,
                y: 670,
                nodeName: '系统安全',
                isTrue: false
            },
            {
                x: 550,
                y: 670,
                nodeName: '设备安全',
            },
            {
                x: 900,
                y: 670,
                nodeName: '管控安全',
            },
            {
                x: 0,
                y: 250,
                nodeName: '最大一功率倒送风险水平   ',
            },
            {
                x: 50,
                y: 250,
                nodeName: '最小一线路-通过水平    ',
            },
            {
                x: 100,
                y: 250,
                nodeName: '最小一短路电流校验通过水平 ',
            },
            {
                x: 150,
                y: 250,
                nodeName: '最大一过电压风险水平    ',
            },
            {
                x: 200,
                y: 250,
                nodeName: '最大一低电压风险水平    ',
            },
            {
                x: 250,
                y: 250,
                nodeName: '最大一谐波电压时变水平   ',
            },
            {
                x: 300,
                y: 250,
                nodeName: '最大电压偏差水平      ',
            },
            {
                x: 350,
                y: 250,
                nodeName: '最大一综合线损水平     ',
            },

            {
                x: 450,
                y: 250,
                nodeName: '老旧变压器占比       ',
            },
            {
                x: 500,
                y: 250,
                nodeName: '老旧开关设备占比      ',
            },
            {
                x: 550,
                y: 250,
                nodeName: '老旧主干线路占比      ',
            },
            {
                x: 600,
                y: 250,
                nodeName: '最大一路重载风险水平    ',
            },
            {
                x: 650,
                y: 250,
                nodeName: '最大一逆变器频繁脱网风险水早',
            },
            {
                x: 700,
                y: 250,
                nodeName: '最大一变压器重载风险水平  ',
            },
            {
                x: 800,
                y: 250,
                nodeName: '防孤岛装置覆盖率      ',
            },
            {
                x: 850,
                y: 250,
                nodeName: '反孤岛装置履盖率      ',
            },
            {
                x: 900,
                y: 250,
                nodeName: '光纤覆盖率         ',
            },
            {
                x: 950,
                y: 250,
                nodeName: '配电自动化覆盖率      ',
            },
            {
                x: 1000,
                y: 250,
                nodeName: '监测装置覆盖率       ',
            },
            ]
            var charts = {
                nodes: [],
                linesData: [

                    {
                        coords: [
                            [550, 950],
                            [550, 800],
                        ]
                    }, {
                        coords: [
                            [550, 800],
                            [175, 800],
                            [175, 500]

                        ]
                    }, {
                        coords: [
                            [550, 800],
                            [550, 800],
                            [550, 500],
                        ]
                    }, {
                        coords: [
                            [550, 800],
                            [900, 800],
                            [900, 500]
                        ]
                    },
                    {
                        coords: [
                            [100, 500],
                            [0, 500],
                            [0, 400],
                        ]
                    },
                    {
                        coords: [
                            [100, 500],
                            [50, 500],
                            [50, 400]
                        ]
                    },
                    {
                        coords: [
                            [175, 500],
                            [100, 500],
                            [100, 400]
                        ]
                    },
                    {
                        coords: [
                            [175, 500],
                            [150, 500],
                            [150, 400]
                        ]
                    },
                    {
                        coords: [
                            [175, 500],
                            [200, 500],
                            [200, 400]
                        ]
                    },
                    {
                        coords: [
                            [175, 500],
                            [250, 500],
                            [250, 400]
                        ]
                    },
                    {
                        coords: [
                            [175, 500],
                            [300, 500],
                            [300, 400]
                        ]
                    },
                    {
                        coords: [
                            [175, 500],
                            [350, 500],
                            [350, 400]
                        ]
                    },

                    {
                        coords: [
                            [550, 500],
                            [450, 500],
                            [450, 400]
                        ]
                    },
                    {
                        coords: [
                            [550, 500],
                            [500, 500],
                            [500, 400]
                        ]
                    },
                    {
                        coords: [
                            [550, 500],
                            [550, 500],
                            [550, 400]
                        ]
                    },
                    {
                        coords: [
                            [550, 500],
                            [600, 500],
                            [600, 400]
                        ]
                    },
                    {
                        coords: [
                            [550, 500],
                            [650, 500],
                            [650, 400]
                        ]
                    },
                    {
                        coords: [
                            [550, 500],
                            [700, 500],
                            [700, 400]
                        ]
                    },
                    {
                        coords: [
                            [900, 500],
                            [800, 500],
                            [800, 400]
                        ]
                    },
                    {
                        coords: [
                            [900, 500],
                            [850, 500],
                            [850, 400]
                        ]
                    },
                    {
                        coords: [
                            [900, 500],
                            [900, 500],
                            [900, 400]
                        ]
                    },
                    {
                        coords: [
                            [900, 500],
                            [950, 500],
                            [950, 400]
                        ]
                    },
                    {
                        coords: [
                            [900, 500],
                            [1000, 500],
                            [1000, 400]
                        ]
                    },
                ]
            }
            for (var j = 0; j < nodes.length; j++) {
                const {
                    x,
                    y,
                    nodeName,
                } = nodes[j];
                var node = {
                    nodeName,
                    value: [x, y],

                }
                charts.nodes.push(node)
            }

            let option = {
                backgroundColor: "rgba(0,0,0,0)",
                // tooltip: {
                //     textStyle: {
                //         color : 'black',
                //         fontSize:280
                //     }
                // },
                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: '#fff',
                            fontSize: 18,
                            verticalAlign: 'middle',
                            borderWidth: 1,  //文字添加边框
                            borderColor: '#3beac9',   //边框颜色
                            backgroundColor: 'rgba(0,0,0,.3)',   //节点模块背景色
                            borderRadius: 2,   //圆角
                            padding: [10, 10],
                            formatter: (params) => {
                                console.log(params.data.nodeName)
                                let newName = ''
                                let len = params.data.nodeName.length
                                let strLen = 1 //一行显示几个字
                                let rowNum = Math.ceil(len / strLen)
                                if (params.data.nodeName != "设备安全" && params.data.nodeName != "管控安全" && params.data.nodeName != "系统安全" && params.data.nodeName != "高比例清洁能源县域配电网安全运行静态评价指标体系") {
                                    for (let p = 0; p < rowNum; p++) {
                                        let tempStr = ''
                                        let start = p * strLen
                                        let end = start + strLen
                                        if (p == rowNum - 1) {
                                            tempStr = params.data.nodeName.substring(start, len)
                                        } else {
                                            tempStr = params.data.nodeName.substring(start, end) + '\n'
                                        }
                                        newName += tempStr
                                    }
                                } else {
                                    newName = params.data.nodeName
                                }
                                return newName
                            },
                        },
                        data: charts.nodes,
                    }, {
                        type: 'lines',
                        polyline: true,
                        coordinateSystem: 'cartesian2d',
                        lineStyle: {
                            type: 'dashed',
                            width: 2,
                            color: '#3beac9',
                            curveness: 0.3

                        },
                        effect: {
                            show: true,
                            trailLength: 0.1,
                            symbol: 'arrow',
                            color: '#3beac9',
                            symbolSize: 8
                        },
                        data: charts.linesData
                    }]
            };