test/tooltip-alwaysShowContent.html - master - githubmirror/echarts

test/tooltip-alwaysShowContent.html
264 строки10 KB
姜浩然
<fix>(tooltip): fix alwaysShowContent doesn't work after leaving the tooltip . close #18111
02 фев 2023, 12:23
02 фев 2023, 12:23ac64e3f

<!--
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>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css" />
        <script src="lib/testHelper.js"></script>
        <script src="tooltipTestHelper.js"></script>
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #ddd;
                text-align: center;
                font-weight: bold;
                font-size: 14px;
            }
            .chart {
                height: 350px;
            }
        </style>
        <h1>alwaysShowContent: true</h1>
        <div id="main"></div>


        <h1>alwaysShowContent: true, renderMode: "richText", triggerOn: 'click',</h1>
        <div class="chart" id="rich"></div>

        <script>

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

                var dom = document.getElementById('main');
                if (!dom) {
                    return;
                }
                var chart = echarts.init(dom);

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];
                var data4 = [];

                for (var i = 0; i < 10; i++) {
                    xAxisData.push('类目' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data2.push(-Math.random().toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                    data4.push((Math.random() + 0.3).toFixed(2));
                }

                chart.setOption({
                    legend: {
                        data: ['坐标轴触发1', '坐标轴触发2', '数据项触发', '不显示的数据项触发'],
                        tooltip: {
                            show: true,
                            formatter: null
                        }
                    },
                    tooltip : {         // Option config. Can be overwrited by series or data
                        trigger: 'axis',
                        //show: true,   //default true
                        alwaysShowContent: true, // fix #18111
                        showDelay: 50,
                        hideDelay: 200,
                        transitionDuration:0.2,
                        backgroundColor : 'rgba(255,0,255,0.7)',
                        borderColor : '#f50',
                        borderRadius : 8,
                        borderWidth: 2,
                        enterable: true,
                        padding: 10,    // [5, 10, 15, 20]
                        axisPointer: {
                            type: 'shadow'
                        },
                        position : function(p) {
                            // 位置回调
                            // console.log && console.log(p);
                            return [p[0] + 10, p[1] - 10];
                        },
                        textStyle : {
                            color: 'yellow',
                            decoration: 'none',
                            fontFamily: 'Verdana, sans-serif',
                            fontSize: 15,
                            fontStyle: 'italic',
                            fontWeight: 'bold'
                        },
                        formatter: function (params,ticket,callback) {
                            if (params.componentType === 'legend') {
                                return params.name;
                            }
                            var res = 'Function formatter : <br/>' + params[0].name;
                            for (var i = 0, l = params.length; i < l; i++) {
                                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                            }
                            res += '<br /><a target="_blank" href="http://www.baidu.com">搜索</a>';
                            setTimeout(function (){
                                // 仅为了模拟异步回调
                                callback(ticket, res);
                            }, 1000);
                            return 'loading';
                        }
                        // ,formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : {
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis : {
                        type : 'value'
                    },
                    series : [
                        {
                            name:'坐标轴触发1',
                            type:'bar',
                            data:[
                                {value:320, extra:'Hello~'},
                                332, 301, 334, 390, 330, 320
                            ]
                        },
                        {
                            name:'坐标轴触发2',
                            type:'bar',
                            data:[862, 1018, 964, 1026, 1679, 1600, 157]
                        },
                        {
                            name:'数据项触发',
                            type:'bar',
                            tooltip : {             // Series config.
                                trigger: 'item',
                                backgroundColor: 'black',
                                position : [0, 0],
                                formatter: 'Series formatter: <br/>{a}<br/>{b}:{c}'
                            },
                            stack: '数据项',
                            data:[
                                {
                                    value: 120,
                                    tooltip: '我是一个简单的字符串',
                                    label: {
                                        normal: {show: true, formatter: 'formatter is string', textStyle: {color: '#222'}}
                                    }
                                }, 132,
                                {
                                    value: 301,
                                    itemStyle: {normal: {color: 'red'}},
                                    tooltip : {     // Data config.
                                        backgroundColor: 'blue',
                                        formatter: 'Data formatter: <br/>{a}<br/>{b}:{c}'
                                    }
                                },
                                134, 90,
                                {
                                    value: 230,
                                    label: {
                                        normal: {
                                            show: true,
                                            formatter: '我不显示 tooltip'
                                        }
                                    },
                                    tooltip: {show: false}
                                },
                                210
                            ]
                        },
                        {
                            name:'不显示的数据项触发',
                            type:'bar',
                            tooltip : {
                                show : false,
                                trigger: 'item'
                            },
                            stack: '数据项',
                            data:[150, 232, 201, 154, 190, 330, 410]
                        }
                    ]
                });
            });
        </script>


<script>

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

        var chart = echarts.init(document.getElementById('rich'));

        chart.setOption({
            backgroundColor: '#eee',
            tooltip: {
                show: true,
                renderMode: 'richText',
                enterable: true,
                alwaysShowContent: true, // fix #18111
                // position: [100, 100],
                triggerOn: 'click',
                trigger: 'axis',
                z: 100
            },
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C']
            },
            series: [{
                name: 'bar0',
                type: 'bar',
                data: [2, 3, 6]
            }, {
                name: 'bar1',
                type: 'bar',
                data: [1, 0, 9]
            }, {
                name: 'bar2',
                type: 'bar',
                data: ['-', 2, 1]
            }]
        });

        window.onresize = chart.resize;

    });
</script>

    </body>
</html>