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

最新推荐文章于 2024-08-16 11:13:41 发布
嘿喵-财运旺旺
最新推荐文章于 2024-08-16 11:13:41 发布
阅读量4k
点赞数 2
分类专栏： vue javascript
本文链接：https://blog.csdn.net/sym134/article/details/113249183
版权
javascript 同时被 2 个专栏收录
33 篇文章 0 订阅
订阅专栏
vue
21 篇文章 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 class="Echarts">-->
            <div id="main" style="width: 100%;height:260px;"></div>
            <!--        </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>