test/visualMap-layout.html - master - githubmirror/echarts

test/visualMap-layout.html
591 строка20 KB
Wojciech Krakowiak
fix(visualMap): handle label collides with horizontal size visualMap
12 авг 2024, 16:09
12 авг 2024, 16:093ad256a

<!--
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>
        <link rel="stylesheet" href="lib/reset.css">
        <style>
            #main {
                position: relative;
                min-width: 1080px;
            }
            .block {
                text-align: center;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                position: relative;
                height: 400px;
                margin: 20px;
            }
            .block .ec {
                float: left;
                width: 600px;
                height: 100%;
                border: 3px solid #777;
            }
            .block label {
                margin-left: 500px;
                display: block;
                width: 400px;
                height: 100%;
                background: #777;
                color: #fff;
                font-size: 12px;
                line-height: 18px;
                border: 3px solid #777;
                text-align: left;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script>


            require(['echarts'], function (echarts) {
                var zrUtil = echarts.util;
                makeChart({
                    show: true,
                    splitNumber: 7,
                    minOpen: true,
                    maxOpen: true,
                    backgroundColor: '#eee',
                    padding: [10, 30, 5, 40],
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    show: true,
                    splitNumber: 7,
                    minOpen: true,
                    maxOpen: true,
                    showLabel: true,
                    text: ['Number Result'],
                    backgroundColor: '#eee',
                    padding: [10, 30, 5, 40],
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    show: true,
                    pieces: [
                        {min: 10, max: 15, color: 'green'},
                        {min: 15, max: 25, visualValue: 'blue'},
                        {min: 25, max: 35},
                        {min: 35, max: 55},
                        {min: 55}
                    ],
                    left: 200,
                    backgroundColor: '#eee',
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    splitNumber: 5,
                    right: 0,
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'symbol',
                        data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
                    }
                });
                makeChart({
                    splitNumber: 5,
                    right: 0,
                    dimension: 3,
                    text: ['Number Result'],
                    showLabel: true,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'symbol',
                        data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
                    }
                });
                makeChart({
                    splitNumber: 6,
                    top: 0,
                    left: 0,
                    orient: 'horizontal',
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorSaturation'
                    }
                });
                makeChart({
                    splitNumber: 5,
                    top: 20,
                    right: 0,
                    orient: 'horizontal',
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorLightness'
                    }
                });
                makeChart({
                    splitNumber: 5,
                    top: 20,
                    right: 0,
                    text: ['Number \nRe', 'Number \nRe2'],
                    showLabel: true,
                    orient: 'horizontal',
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorLightness'
                    }
                });
                makeChart({
                    splitNumber: 6,
                    top: 40,
                    orient: 'horizontal',
                    align: 'right',
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorAlpha'
                    }
                });

                // -------------------------------------------

                makeChart({
                    show: true,
                    splitNumber: 7,
                    text: ['高1', '低'],
                    inverse: true,
                    backgroundColor: '#eee',
                    padding: [10, 30, 5, 40],
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    show: true,
                    pieces: [
                        {min: 10, max: 15, color: 'green'},
                        {min: 15, max: 25, visualValue: 'blue'},
                        {min: 25, max: 35},
                        {min: 35, max: 55},
                        {min: 55}
                    ],
                    left: 200,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    splitNumber: 5,
                    right: 0,
                    dimension: 3,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'symbol',
                        data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
                    }
                });
                makeChart({
                    splitNumber: 6,
                    top: 0,
                    left: 0,
                    orient: 'horizontal',
                    dimension: 3,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorSaturation'
                    }
                });
                makeChart({
                    splitNumber: 5,
                    top: 20,
                    right: 0,
                    orient: 'horizontal',
                    dimension: 3,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorLightness'
                    }
                });
                makeChart({
                    splitNumber: 6,
                    top: 40,
                    orient: 'horizontal',
                    dimension: 3,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorAlpha'
                    }
                });

                // -------------------------------------------


                makeChart({
                    show: true,
                    splitNumber: 0,
                    backgroundColor: '#eee',
                    padding: [10, 30, 5, 40],
                    calculable: true,
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    left: 200,
                    show: true,
                    pieces: [
                        {min: 10, max: 15, color: 'green'},
                        {min: 15, max: 25, visualValue: 'blue'},
                        {min: 25, max: 35},
                        {min: 35, max: 55},
                        {min: 55}
                    ],
                    inverse: true,
                    calculable: true,
                    backgroundColor: '#eee',
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    right: 0,
                    splitNumber: 5,
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    left: 0,
                    top: 0,
                    orient: 'horizontal',
                    splitNumber: 6,
                    calculable: true,
                    inverse: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        colorSaturation: [0.3, 1]
                    }
                });
                makeChart({
                    right: 0,
                    top: 20,
                    orient: 'horizontal',
                    splitNumber: 5,
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        colorLightness: [0.9, 0.5]
                    }
                });
                makeChart({
                    top: 40,
                    splitNumber: 6,
                    orient: 'horizontal',
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        colorAlpha: [0.3, 1]
                    }
                });
                makeChart({
                    left: 'center',
                    top: 'bottom',
                    orient: 'horizontal',
                    splitNumber: 6,
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        colorAlpha: [0.3, 1]
                    }
                });


                // -------------------------------------------


                makeChart({
                    show: true,
                    splitNumber: 7,
                    text: ['高2', '低'],
                    backgroundColor: '#eee',
                    inverse: true,
                    padding: [10, 30, 5, 40],
                    calculable: true,
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    left: 200,
                    show: true,
                    pieces: [
                        {min: 10, max: 15, color: 'green'},
                        {min: 15, max: 25, visualValue: 'blue'},
                        {min: 25, max: 35},
                        {min: 35, max: 55},
                        {min: 55}
                    ],
                    inverse: true,
                    text: ['高', '低'],
                    calculable: true,
                    backgroundColor: '#eee',
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    right: 0,
                    splitNumber: 5,
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    left: 0,
                    top: 0,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    splitNumber: 6,
                    calculable: true,
                    inverse: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        colorSaturation: [0.3, 1]
                    }
                });
                makeChart({
                    right: 0,
                    top: 20,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    splitNumber: 5,
                    align: 'bottom',
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        colorLightness: [0.9, 0.5]
                    }
                });
                makeChart({
                    top: 40,
                    splitNumber: 6,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        colorAlpha: [0.3, 1]
                    }
                });
                makeChart({
                    left: 'center',
                    bottom: 0,
                    orient: 'horizontal',
                    splitNumber: 6,
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        colorAlpha: [0.3, 1]
                    }
                });


                // -------------------------------------------


                makeChart({
                    show: true,
                    splitNumber: 7,
                    text: ['高2', '低'],
                    backgroundColor: '#eee',
                    inverse: true,
                    padding: [10, 30, 5, 40],
                    calculable: true,
                    inRange: {
                        symbolSize: [10, 20]
                    }
                });
                makeChart({
                    left: 200,
                    show: true,
                    inverse: true,
                    text: ['高', '低'],
                    calculable: true,
                    backgroundColor: '#eee',
                    inRange: {
                        symbolSize: [10, 20]
                    }
                });
                makeChart({
                    right: 0,
                    splitNumber: 5,
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        symbolSize: [10, 20]
                    }
                });
                makeChart({
                    left: 0,
                    top: 0,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    splitNumber: 6,
                    calculable: true,
                    inverse: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        symbolSize: [10, 20]
                    }
                });
                makeChart({
                    right: 0,
                    top: 20,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    splitNumber: 5,
                    align: 'bottom',
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        symbolSize: [10, 20]
                    }
                });
                makeChart({
                    top: 40,
                    splitNumber: 6,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        symbolSize: [10, 20]
                    }
                });
                makeChart({
                    left: 'center',
                    bottom: 0,
                    orient: 'horizontal',
                    splitNumber: 6,
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        symbolSize: [10, 20]
                    }
                });




                function makeChart(opt) {
                    var label = JSON.stringify(opt, null, 4);
                    opt = {visualMap: opt || {}};
                    var containerEl = document.getElementById('main');
                    var el = document.createElement('div');
                    el.className = 'block';
                    el.innerHTML = '<div class="ec"></div><label><pre>' + encodeHTML(label) + '</pre></label>';
                    containerEl.appendChild(el);

                    var chart = echarts.init(el.firstChild, null, { });
                    chart.setOption(zrUtil.merge(opt, getOption()));
                }

                function encodeHTML(source) {
                    return source == null
                        ? ''
                        : String(source)
                            .replace(/&/g, '&amp;')
                            .replace(/</g, '&lt;')
                            .replace(/>/g, '&gt;')
                            .replace(/"/g, '&quot;')
                            .replace(/'/g, '&#39;');
                };

                function getOption() {
                    return {
                        grid: {top: 'center', left: 'center', width: 50, height: 50},
                        xAxis: {type: 'value', splitLine: {show: false}},
                        yAxis: {type: 'value', splitLine: {show: false}},
                        series: [
                            {
                                name: 'scatter',
                                type: 'scatter',
                                itemStyle: {
                                    normal: {
                                        opacity: 0.8,
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                symbolSize: 20,
                                data: [[50, 50, 50, 50, 50]]
                            }
                        ]
                    };
                }



            });


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