githubmirror/echarts

test/pie.html
425 строк17 KB
plainheart
test(pie): add a test case to cover #18412
06 май 2023, 21:17
06 май 2023, 21:17bb403c1

<!--
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="data/pie-texture.js"></script>
        <script src="lib/dat.gui.min.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
        <script src="lib/testHelper.js"></script>
    </head>
    <body>
        <style>
        </style>

        <div id="main"></div>
        <div id="main2"></div>
        <div id="main3"></div>
        <div id="main4"></div>

        <script>
            var chart;
            require([
                'echarts'
            ], function (echarts) {

                chart = echarts.init(document.getElementById('main'));

                // Pencil sketch texture
                var patternSrc = window.pieTexture;
                var itemStyle = {
                    normal: {
                        opacity: 0.7,
                        color: {
                            image: patternSrc,
                            repeat: 'repeat'
                        },
                        borderWidth: 3,
                        borderColor: '#235894'
                        // shadowBlur: 10,
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 5,
                        // shadowColor: 'rgba(0, 0, 0, 0.4)'
                    }
                };
                chart.setOption({
                    legend: {
                        data: ['直接访问（初始就被选中）','邮件营销','联盟广告','视频广告','搜索引擎']
                        // data: []
                    },
                    toolbox: {
                        left: 'left',
                        feature: {
                            dataView: {},
                            saveAsImage: {}
                        }
                    },
                    tooltip: {},
                    series: [{
                        name: 'pie',
                        type: 'pie',
                        selectedMode: 'single',
                        selectedOffset: 30,
                        clockwise: true,
                        label: {
                            textStyle: {
                                fontSize: 18,
                                // color: '#333'
                            }
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#333'
                            }
                        },
                        // emphasis: {
                        //     labelLine: {
                        //         lineStyle: {
                        //             color: 'red'
                        //         }
                        //     },
                        //     itemStyle: {
                        //     }
                        // },
                        data:[
                            {
                                value:235,
                                name:'直接访问（初始就被选中）',
                                cursor: 'move',
                                selected: true
                            },
                            {value: 163, name: '标签在内部',
                                label: {
                                    normal: {
                                        position: 'inside'
                                    }
                                }
                            },
                            {value:310, name:'邮件营销', label: {
                                normal: {
                                    textStyle: { // compat
                                        color: 'red'
                                    },
                                    formatter: '{abg|（居右）背景文字 }\n  {b|{b}}{c|}  ',
                                    backgroundColor: 'rgba(0,0,0,0.1)',
                                    borderColor: '#777',
                                    borderWidth: 2,
                                    borderRadius: 3,
                                    rich: {
                                        abg: {
                                            color: '#eee',
                                            fontSize: 14,
                                            backgroundColor: '#333',
                                            width: '100%',
                                            align: 'right',
                                            height: 22,
                                            borderRadius: [4, 4, 0, 0] // 四角的 borderRadius
                                        },
                                        b: {
                                            fontSize: 20,
                                            lineHeight: 46
                                        },
                                        c: {
                                            backgroundColor: {
                                                image: './data/hill-Kilimanjaro.png',
                                            },
                                            height: 30
                                        }
                                    }
                                },
                                emphasis: {
                                }
                            }},
                            {value:234, name:'联盟广告', label: {
                                normal: {
                                    textStyle: { // compat
                                        color: 'red'
                                    },
                                    formatter: '{a|（居中）背景文字顺序上有些 triky}{abg|}\n  {b|{b}}{c|}  ',
                                    backgroundColor: 'rgba(0,0,0,0.1)',
                                    borderColor: '#777',
                                    borderWidth: 2,
                                    borderRadius: 3,
                                    rich: {
                                        a: {
                                            color: '#eee',
                                            fontSize: 14,
                                            align: 'center'
                                        },
                                        abg: {
                                            backgroundColor: '#333',
                                            width: '100%',
                                            align: 'right',
                                            height: 22,
                                            borderRadius: [4, 4, 0, 0] // 四角的 borderRadius
                                        },
                                        b: {
                                            fontSize: 20,
                                            lineHeight: 46
                                        },
                                        c: {
                                            backgroundColor: {
                                                image: './data/hill-Kilimanjaro.png',
                                            },
                                            height: 30
                                        }
                                    }
                                },
                                emphasis: {
                                }
                            }},
                            {value:135, name:'视频广告', label: {
                                normal: {
                                    textStyle: { // compat
                                        color: 'red'
                                    },
                                    formatter: '{abg|（居左）背景文字}\n  {b|{b}}{c|}  ',
                                    backgroundColor: 'rgba(0,0,0,0.1)',
                                    borderColor: '#777',
                                    borderWidth: 2,
                                    borderRadius: 3,
                                    rich: {
                                        abg: {
                                            color: '#eee',
                                            fontSize: 14,
                                            backgroundColor: '#333',
                                            width: '100%',
                                            align: 'left',
                                            height: 22,
                                            borderRadius: [4, 4, 0, 0] // 四角的 borderRadius
                                        },
                                        b: {
                                            fontSize: 20,
                                            lineHeight: 46
                                        },
                                        c: {
                                            backgroundColor: {
                                                image: './data/hill-Kilimanjaro.png',
                                            },
                                            height: 30
                                        }
                                    }
                                },
                                emphasis: {
                                }
                            }},
                            {value:148, name:'搜索引擎', label: {
                                normal: {
                                    textStyle: { // compat
                                        color: 'red'
                                    },
                                    formatter: '{a|富文本：(emphasis 背景改变）}\n{hr|}\n{b|{b}}{c|}',
                                    backgroundColor: 'rgba(0,0,0,0.1)',
                                    borderColor: '#777',
                                    borderWidth: 2,
                                    padding: 5,
                                    borderRadius: 3,
                                    rich: {
                                        a: {
                                            color: '#334499',
                                            align: 'left'
                                        },
                                        b: {
                                            fontSize: 20
                                        },
                                        hr: {
                                            width: '100%',
                                            borderColor: '#999',
                                            borderWidth: 0.5,
                                            height: 0,
                                            lineHeight: 15
                                        },
                                        c: {
                                            backgroundColor: {
                                                image: './data/hill-Kilimanjaro.png',
                                            },
                                            height: 30
                                        }
                                    }
                                },
                                emphasis: {
                                    backgroundColor: 'rgba(0,0,0,0.5)',
                                    shadowOffsetX: 5,
                                    shadowOffsetY: 5,
                                    shadowBlur: 5,
                                    shadowColor: '#333'
                                }
                            }}
                        ],
                        itemStyle: itemStyle
                    }]
                });

                var config = {
                    labelPosition: 'outside',
                    clockwise: true,
                    labelLineLen: 20,
                    labelLineLen2: 5
                };

                function update() {
                    chart.setOption({
                        series: [{
                            name: 'pie',
                            clockwise: config.clockwise,
                            label: {
                                normal: {
                                    position: config.labelPosition
                                }
                            },
                            labelLine: {
                                normal: {
                                    length: config.labelLineLen,
                                    length2: config.labelLineLen2
                                }
                            }
                        }]
                    });
                }

                var gui = new dat.GUI();
                gui.add(config, 'clockwise')
                    .onChange(update);
                gui.add(config, 'labelPosition', ['inside', 'outside'])
                    .onChange(update);
                gui.add(config, 'labelLineLen', 0, 100)
                    .onChange(update);
                gui.add(config, 'labelLineLen2', 0, 100)
                    .onChange(update);
            })

        </script>







        <script>
            require([
                'echarts'
            ], function (echarts) {

                var option = {
                    legend: {},
                    dataset: {
                        source: [
                            {name: 'a', value: 123},
                            {name: 'b', value: 456},
                            {name: 'should be selected', value: 789, selected: true}
                        ]
                    },
                    series: {
                        type: 'pie',
                        selectedMode: 'multiple'
                    }
                };

                testHelper.create(echarts, 'main2', {
                    option: option,
                    info: option
                })

            });
        </script>

        <script>
            require([
                'echarts'
            ], function (echarts) {
                var clockwise = true;

                var option = {
                    series: [
                        {
                            type: "pie",
                            radius: ["40.625%", "100%"],
                            startAngle: 320,
                            clockwise,
                            data: [
                                { value: 0, name: "Search Engine" },
                                { value: 0, name: "Direct" },
                                { value: 0, name: "Email" },
                                { value: 0, name: "Union Ads" }
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'Shouldn\'t be fully annular',
                        'from https://github.com/apache/echarts/issues/16363'
                    ],
                    option
                });

                setTimeout(function () {
                    option.series[0].data = [
                        { value: 21, name: "Search Engine" },
                        { value: 8, name: "Direct" },
                        { value: 1, name: "Email" },
                        { value: 0, name: "Union Ads" }
                    ];
                    chart.setOption(option);
                }, 1e3);
            });
        </script>

        <script>
            require([
                'echarts'
            ], function (echarts) {
                var option = {
                    series: [
                        {
                            type: 'pie',
                            selectedMode: 'single',
                            selectedOffset: 30,
                            radius: [50, 100],
                            hoverAnimation: false,
                            animation: false,
                            data: [
                                { value: 0, name: 'Direct Access' },
                                { value: 310, name: 'Email Marketing' },
                                { value: 234, name: 'Website Ads' },
                                { value: 135, name: 'Video Ads' },
                                { value: 1548, name: 'Search Engine' }
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main4', {
                    title: [
                        'Toggle select a sector and then hover on it',
                        'The response area should be right when applied `selectedOffset` and disabled animation',
                        'See also https://github.com/apache/echarts/issues/18412'
                    ],
                    option
                });
            });
        </script>

    </body>
</html>