echarts旋转图表、图表横屏显示或是屏幕旋转横屏示例

曾经终败给现在 2023-01-12 01:46 626阅读 0赞

文档：https://echarts.apache.org/zh/option.html\#title

<html>
    <head>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
        <title>Untitled Document</title>
    
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
    <style>
        .chart-container { 
            position: relative;
            margin: auto;
            height: 100%;
            width: 100%;
        }
    
        .rotate { 
            transform: rotate(90deg);
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg); /* Opera */
        }
    </style>
    <div id="app">
        <template>
            <div id="chart-container" :class="[ isFull ? 'rotate':''] ">
                
                <div id="main" style="width: 100%;height:260px;"></div>
                
                <div id="fullScreen" v-bind:class="{ show: isFull, hide: !isFull }"></div>
            </div>
        </template>
    </div>
    </body>
    </html>
    <script>
        var vue = new Vue({ 
            el: '#app',
            data: { 
                isFull: false, // false为放大，true为缩小
                height: '260px',
                option: { 
                    tooltip: { 
                        trigger: 'axis',
                        extraCssText: 'transform: rotate(90deg)'
                    },
                    dataZoom: [{ type: 'inside'}],
                    grid: { 
                        right: '4px'
                    },
                    toolbox: { 
                        show: true,
                        sise: 9,
                        // right: 20,
                        feature: { 
                            magicType: { 
                                type: ['line', 'bar']
                            },
                            myTool1: { }
                        }
                    },
                    xAxis: { 
                        type: 'category',
                        data: ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
                    },
                    yAxis: { 
                        type: 'value'
                    },
                    legend: { 
                        data: ['腾讯乘车码', '支付宝乘车码', '美团乘车码', '银联卡'],
                        x: 'left',
                        y: 'top',
                        // bottom: -5
                    },
                    series: [
                        { type: 'line', smooth: true, name: '腾讯乘车码', data: [23, 107, 121, 124, 91, 133]},
                        { type: 'line', smooth: true, name: '支付宝乘车码', data: [9, 27, 27, 25, 30, 28]},
                        { type: 'line', smooth: true, name: '美团乘车码', data: [5, 15, 8, 5, 8, 2]},
                        { type: 'line', smooth: true, name: '银联卡', data: [3, 10, 2, 4, 3, 4]}
                    ]
                }
            },
            methods: { 
                drawChart(elementId) { 
                    var self = this
                    self.elementId = elementId
                    const element = document.getElementById(elementId)
                    self.charts = echarts.init(element)
                    self.option.toolbox.feature.myTool1 = { 
                        show: true,
                        title: self.isFull === true ? '取消全屏' : '全屏',
                        icon:
                            'path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748',
                        onclick: function () { 
                            var aa = !self.isFull ? '点击全屏' : '关闭全屏'
                            let container = document.getElementById('chart-container')
                            if (!self.isFull) { 
                                container.style.height = document.body.clientWidth + 'px';
                                self.charts.resize({ 
                                    width: String(document.body.clientHeight),
                                    height: String(document.body.clientWidth)
                                });
                            } else { 
                                container.style.height = '';
                                container.style.width = '';
                                element.style.width = document.body.innerWidth + 'px';
                                element.style.height = self.height;
    
                                self.charts.resize({ 
                                    width: document.body.clientWidth,
                                    height: self.height
                                });
                            }
                            self.isFull = !self.isFull
                        }
                    }
                    self.charts.setOption(self.option)
    
                    window.onresize = function () { 
                        let container = document.getElementById('chart-container')
    
                        if (window.orientation===90){ 
                            element.style.width = window.innerWidth+'px';
                            element.style.height = window.innerHeight+'px';
                        }else{ 
                            element.style.width = window.innerWidth+'px';
                            element.style.height = self.height;
                        }
                        self.charts.resize();
                    };
                },
            },
            mounted() { 
                this.drawChart('main')
            }
        })
    </script>