test/lines-graph.html - master - githubmirror/echarts

test/lines-graph.html
543 строки27 KB
plainheart
fix(lines): fix NPE issue when lines series has no coordinate system, resolves #14991.
08 дек 2021, 04:10
08 дек 2021, 04:10f9eff33

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset='utf-8'>
        <script src='lib/simpleRequire.js'></script>
        <script src='lib/config.js'></script>
        <script src='lib/jquery.min.js'></script>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id='main'></div>
        <script>

            require([
                'echarts'
            ], function (echarts, chinaJson) {

                var myChart = echarts.init(document.getElementById('main'));

                // See https://github.com/apache/echarts/issues/14991
                var option = option = {
                    title: {
                        text: 'Should output no errors like `TypeError: Cannot read property \'dataToPoint\' of undefined`',
                        subtext: 'https://github.com/apache/echarts/issues/14991',
                        sublink: 'https://github.com/apache/echarts/issues/14991'
                    },
                    tooltip: {
                        backgroundColor: 'rgb(0,0,0)',
                        borderWidth: 0,
                        borderRadius: 4,
                        padding: 5,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    animationDuration: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    autoCurveness: true,
                    series: [
                        {
                            id: 0,
                            zlevel: 3,
                            name: '共享关系图',
                            type: 'graph',
                            layout: 'none',
                            roam: true,
                            force: null,
                            draggable: true,
                            data: [
                                {
                                    inShips: true,
                                    name: '太原市环保局',
                                    id: '1042993609097351173',
                                    symbolSize: 18,
                                    value: 1298,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(1, 191, 124, 1)',
                                        backgroundColor: 'rgba(1, 191, 124, 0.3)',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(1, 191, 124, 1)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(1, 191, 124, 0.3)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 765.0928694926632,
                                    y: 378.25856324552564,
                                },
                                {
                                    inShips: true,
                                    name: '太原市住键局改改改改改改啊啊',
                                    id: '1042993941294616578',
                                    symbolSize: 13,
                                    value: 132,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(1, 191, 124, 1)',
                                        backgroundColor: 'rgba(1, 191, 124, 0.3)',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(1, 191, 124, 1)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(1, 191, 124, 0.3)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 1009.4929170037823,
                                    y: 446.1304577337756,
                                },
                                {
                                    inShips: true,
                                    name: '太原市气象局',
                                    id: '1042993941294616590',
                                    symbolSize: 9,
                                    value: 45,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(1, 191, 124, 1)',
                                        backgroundColor: 'rgba(1, 191, 124, 0.3)',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(1, 191, 124, 1)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(1, 191, 124, 0.3)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 967.6694907825655,
                                    y: 193.13253022645864,
                                },
                                {
                                    inShips: false,
                                    name: '新的一个测试别动',
                                    id: '1341985964834476038',
                                    symbolSize: 7,
                                    value: 0,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(222, 141, 11 ,0.2)',
                                        backgroundColor: 'transparent',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(222, 141, 11 ,0.5)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(222, 141, 11 , 0.1)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 1090.1377321332973,
                                    y: 362.0545198636114,
                                },
                                {
                                    inShips: false,
                                    name: '最后一把',
                                    id: '1342051038857056263',
                                    symbolSize: 7,
                                    value: 0,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(222, 141, 11 ,0.2)',
                                        backgroundColor: 'transparent',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(222, 141, 11 ,0.5)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(222, 141, 11 , 0.1)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 1073.2811852913555,
                                    y: 223.30572195239728,
                                },
                                {
                                    inShips: false,
                                    name: '通知部',
                                    id: '1355038432967925764',
                                    symbolSize: 7,
                                    value: 0,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(222, 141, 11 ,0.2)',
                                        backgroundColor: 'transparent',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(222, 141, 11 ,0.5)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(222, 141, 11 , 0.1)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 862.6050722472299,
                                    y: 170.44443617000368,
                                },
                                {
                                    inShips: false,
                                    name: '测试1',
                                    id: '1372373318509830148',
                                    symbolSize: 7,
                                    value: 0,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(222, 141, 11 ,0.2)',
                                        backgroundColor: 'transparent',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(222, 141, 11 ,0.5)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(222, 141, 11 , 0.1)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 880.3988676056845,
                                    y: 340.41193690673566,
                                },
                                {
                                    inShips: false,
                                    name: 'ceshi 1',
                                    id: '1372374195261972483',
                                    symbolSize: 7,
                                    value: 0,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(222, 141, 11 ,0.2)',
                                        backgroundColor: 'transparent',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(222, 141, 11 ,0.5)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(222, 141, 11 , 0.1)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 882.2794891002358,
                                    y: 465.3165084496478,
                                },
                                {
                                    inShips: false,
                                    name: '测试33部门',
                                    id: '1372375664291782660',
                                    symbolSize: 7,
                                    value: 0,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(222, 141, 11 ,0.2)',
                                        backgroundColor: 'transparent',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(222, 141, 11 ,0.5)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(222, 141, 11 , 0.1)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 786.0437420698134,
                                    y: 255.28443103540292,
                                },
                                {
                                    inShips: false,
                                    name: '测试22',
                                    id: '1372375832596619270',
                                    symbolSize: 7,
                                    value: 0,
                                    textAlign: 'right',
                                    tooltip: {},
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'rgba(222, 141, 11 ,0.2)',
                                        backgroundColor: 'transparent',
                                        padding: 4,
                                        borderRadius: 4,
                                    },
                                    itemStyle: {
                                        color: 'rgba(222, 141, 11 ,0.5)',
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            borderColor: 'rgba(222, 141, 11 , 0.1)',
                                            borderWidth: 12,
                                        },
                                    },
                                    x: 982.7940349951161,
                                    y: 315.51431392149675,
                                },
                            ],
                            links: [
                                {
                                    source: '1042993941294616578',
                                    target: '1042993609097351173',
                                    sourceName: '太原市住键局改改改改改改啊啊',
                                    targetName: '太原市环保局',
                                    count: 324,
                                    symbol: ['arrow', 'none'],
                                    symbolSize: [10, 0],
                                    tooltip: {
                                        backgroundColor: 'rgb(0,0,0)',
                                        borderWidth: 0,
                                        borderRadius: 4,
                                        padding: 5,
                                        textStyle: {
                                            color: '#fff',
                                        },
                                    },
                                    lineStyle: {
                                        width: 4,
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: 'rgba(255,255,255,0.7)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(1, 191, 124, 0.3)',
                                                },
                                            ],
                                        },
                                    },
                                },
                                {
                                    source: '1042993941294616590',
                                    target: '1042993941294616578',
                                    sourceName: '太原市气象局',
                                    targetName: '太原市住键局改改改改改改啊啊',
                                    count: 55,
                                    symbol: ['arrow', 'none'],
                                    symbolSize: [10, 0],
                                    tooltip: {
                                        backgroundColor: 'rgb(0,0,0)',
                                        borderWidth: 0,
                                        borderRadius: 4,
                                        padding: 5,
                                        textStyle: {
                                            color: '#fff',
                                        },
                                    },
                                    lineStyle: {
                                        width: 3,
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: 'rgba(255,255,255,0.7)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(1, 191, 124, 0.3)',
                                                },
                                            ],
                                        },
                                    },
                                },
                                {
                                    source: '1042993941294616578',
                                    target: '1042993941294616590',
                                    sourceName: '太原市住键局改改改改改改啊啊',
                                    targetName: '太原市气象局',
                                    count: 23,
                                    symbol: ['arrow', 'none'],
                                    symbolSize: [10, 0],
                                    tooltip: {
                                        backgroundColor: 'rgb(0,0,0)',
                                        borderWidth: 0,
                                        borderRadius: 4,
                                        padding: 5,
                                        textStyle: {
                                            color: '#fff',
                                        },
                                    },
                                    lineStyle: {
                                        width: 2,
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: 'rgba(255,255,255,0.7)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(1, 191, 124, 0.3)',
                                                },
                                            ],
                                        },
                                    },
                                },
                            ],
                            style: {
                                color: '#fff',
                            },
                            lineStyle: {
                                curveness: 0.2,
                            },
                            edgeSymbolSize: 5,
                        },
                        {
                            name: 'A',
                            type: 'lines',
                            z: 4,
                            effect: {
                                show: true,
                                trailLength: 0,
                                symbol: 'arrow',
                                color: '#12b5d0',
                                symbolSize: 8,
                            },
                            lineStyle: {
                                normal: {
                                    curveness: 0,
                                },
                            },
                            data: [
                                {
                                    coords: [
                                        [
                                            [1009.4929170037823, 446.1304577337756],
                                            [765.0928694926632, 378.25856324552564],
                                        ],
                                    ],
                                },
                                {
                                    coords: [
                                        [
                                            [967.6694907825655, 193.13253022645864],
                                            [1009.4929170037823, 446.1304577337756],
                                        ],
                                    ],
                                },
                                {
                                    coords: [
                                        [
                                            [1009.4929170037823, 446.1304577337756],
                                            [967.6694907825655, 193.13253022645864],
                                        ],
                                    ],
                                },
                            ],
                        },
                    ],
                };

                myChart.setOption(option);

                window.onresize = myChart.resize;
            });

        </script>
    </body>
</html>