Echarts数据可视化第11章 Echarts高级功能 11.3 响应式自适应

ゝ一纸荒年。 2024-03-25 20:46 6阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第11章 Echarts高级功能
         *   *  11.3 响应式自适应

> Echarts数据可视化：入门、实战与进阶

#### 第11章 Echarts高级功能 ####

##### 11.3 响应式自适应 #####

在制作可视化时，需要对可视化的各部分进行定位，定位方式只要可以分为3种：

1.  绝对值，用数值型的像素值表示
2.  百分比，字符型的百分比表示
3.  位置描述，用字符型的位置单词

为了设置相关规则，使得Echarts 可视化在DOM容器大小变化时也可以尽量友好展示，可以在option 中设置media 参数。

举个栗子

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="../js/echarts.js"></script>
        
        <script src="https://code.jquery.com/jquery-3.4.1.min.js">
        </script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        $.when(
            // 当导入了该draggable.js完成，则开始初始化
            $.getScript('https://www.runoob.com/static/js/draggable.js')
        ).done(function () {
          
            draggable.init(
                $('div[_echarts_instance_]')[0],
                myChart,
                {
          
                    width: 1000,
                    height: 400
                });
            option = {
          
                // 基础option
                baseOption: {
          
                    title: {
          
                        text: '环形图',
                        x: 'center'
                    },
                    legend: {
          data: ['pie-a', 'pie-b', 'pie-c', 'pie-d']},
                    series: [
                        {
          
                            type: 'pie',
                            data: [
                                {
          value: 10, name: 'pie-a'},
                                {
          value: 50, name: 'pie-b'},
                                {
          value: 30, name: 'pie-c'},
                                {
          value: 20, name: 'pie-d'}]
                        },
                        {
          
                            type: 'pie',
                            data: [
                                {
          value: 30, name: 'pie-a'},
                                {
          value: 50, name: 'pie-b'},
                                {
          value: 15, name: 'pie-c'},
                                {
          value: 25, name: 'pie-d'}]
                        }]
                },
                // 自适应选项
                media: [
                    {
          
                        query: {
           // query中为条件
                            minAspectRatio: 1
                        }, // 当长宽比大于1
                        option: {
          
                            legend: {
          
                                right: 'center',
                                bottom: 0,
                                orient: 'horizontal'
                            }, // 图例水平放置
                            series: [ // 两个圆环图y方向相同
                                {
          
                                    radius: [20, '50%'],
                                    center: ['25%', '50%']
                                },
                                {
          
                                    radius: [30, '50%'],
                                    center: ['75%', '50%']
                                }]
                        }
                    },
                    {
          
                        query: {
          
                            maxAspectRatio: 1
                        }, // 当长宽比小于1
                        option: {
          
                            legend: {
          
                                right: 'center',
                                bottom: 0,
                                orient: 'vertical'
                            }, // 图例竖直放置
                            series: [ // 两个圆环图x方向相同
                                {
          
                                    radius: [20, '50%'],
                                    center: ['50%', '30%']
                                },
                                {
          
                                    radius: [30, '50%'],
                                    center: ['50%', '70%']
                                }]
                        }
                    },
                    {
          
                        query: {
          
                            // 大于等于800的宽度时，执行该option设置
                            maxWidth: 800
                        },
                        option: {
          
                            legend: {
          
                                right: 10,
                                top: '15%',
                                orient: 'vertical'
                            },
                            series: [
                                {
          
                                    radius: [20, '50%'],
                                    center: ['50%', '30%']
                                },
                                {
          
                                    radius: [30, '50%'],
                                    center: ['50%', '75%']
                                }]
                        }
                    },
                    {
           // 注意这个option没有query选项，
                        // 即当以上query都不满足时，执行如下option设置
                        option: {
          
                            legend: {
          
                                right: 'center',
                                bottom: 0,
                                orient: 'horizontal'
                            },
                            series: [
                                {
          
                                    radius: [20, '50%'],
                                    center: ['25%', '50%']
                                },
                                {
          
                                    radius: [30, '50%'],
                                    center: ['75%', '50%']
                                }]
                        }
                    },
                ]
            };
            myChart.setOption(option);
        });
    </script>
    </body>
    </html>

初始渲染效果

![在这里插入图片描述][0467671db37e4435bcb32f8aa4d6ea5b.png_pic_center]

拖动DRAG，来改变区域长宽，效果如下

![在这里插入图片描述][ebbc52910c2248b4b3c2a3dabb26a80b.gif_pic_center]

还不错，根据当前长宽比切换展示效果。

[0467671db37e4435bcb32f8aa4d6ea5b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1ac7f0ffaa154f94afed8a1365479c43.png
[ebbc52910c2248b4b3c2a3dabb26a80b.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b369894e2ff54285bdcb3e17a478e579.png