最近在项目中用到了echarts，在处理视图自适应问题上记录一下；同时比较一下和highcharts的区别；

　　　　在echarts中有一个resize的函数，可以直接在监听窗口变化时重新渲染即可；　

//在原生代码中

var myCharts = echarts.init(document.getElementById('#myCharts'))

window.onresize = function (){

     myCharts.resize()

}

　　　　如果是在vue项目中用到（我的项目是vue框架）

//在vue中，将init的函数封装在methods对象中，然后在该方法中调用resize函数

methods:{

     initChart(){

          this.chart = echarts.init(document.getElementById('chart'))

          let options = {}//省略

          this.chart.setOption(options)

　　　　　　//resize的函数可在这里调用


          window.onresize = function (){

              this.chart.resize()

          }

    }

}

　　在HighCharts中，有一个专门的函数可以直接设置。在highCharts的官方文档中，有一个函数reflow()重新适应函数

　　reflow()让图表自适应容器，默认情况下，图表会自动响应window.resize时间来自适应图表容器（默认chart.reflow的配置是true）,在图表中没办法响应事件时，则需要手动调用该函数

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <div id="pieContainer"></div>

        <script src="js/highCharts/highcharts.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/highCharts/exporting.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/highCharts/highcharts-zh_CN.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var chart = Highcharts.chart('pieContainer', {

                chart: {

                    spacing: [40, 0, 40, 0]

                },

                title: {

                    floating: true,

                    text: ' '

                },

                subtitle:{

                    text:'节点总数20个',

                    align:'center',

                    verticalAlign:'middle',

                    y:-10,

                    style:{

                        fontSize:14,

                        color:'#212121'

                    }

                },

                tooltip: {

                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

                },

                plotOptions: {

                    pie: {

                        allowPointSelect: true,

                        cursor: 'pointer',

                        dataLabels: {

                            enabled: true,

                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',

                            style: {

                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'

                            }

                        },

                        point: {

                            events: {

                                mouseOver: function(e) { // 鼠标滑过时动态更新标题

                                    // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle

                                    chart.setTitle({

                                        text: e.target.name + '\t' + e.target.y + ' %'

                                    });

                                }

                                //,

                                // click: function(e) { // 同样的可以在点击事件里处理

                                //     chart.setTitle({

                                //         text: e.point.name+ '\t'+ e.point.y + ' %'

                                //     });

                                // }

                            }

                        },

                        events:{

                            mouseOut:function(e){

                                console.log(e)

                                $('tspan').html('节点总数20个')

                            }

                        }

                    }

                },

                series: [{

                    type: 'pie',

                    innerSize: '80%',

                    name: '市场份额',

                    data: [{

                            name: 'Firefox',

                            y: 45.0,

                            url: 'http://bbs.hcharts.cn'

                        },

                        ['IE', 26.8],

                        {

                            name: 'Chrome',

                            y: 12.8,

                            sliced: true,

                            selected: true,

                            url: 'http://www.hcharts.cn'

                        },

                        ['Safari', 8.5],

                        ['Opera', 6.2],

                        ['其他', 0.7]

                    ]

                }]

            }, function(c) { // 图表初始化完毕后的会掉函数

                // 环形图圆心

                var centerY = c.series[0].center[1],

                    titleHeight = parseInt(c.title.styles.fontSize);

                // 动态设置标题位置

                c.setTitle({

                    y: centerY + titleHeight / 2

                });

            });

        </script>

    </body>

</html>

　　

　　

　　

echarts 视图自适应问题的更多相关文章

  1. Angular echarts图表自适应屏幕指令

    关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...

  2. vue echarts 大小自适应

    窗口大小时候 ,echarts图自适应 在创建图表的方法中直接,用resize方法 let myChart=this.$refs.myChart; let mainChart = echarts.in ...

  3. Echarts图标自适应问题(已解决)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  5. 多个echarts图自适应屏幕大小

    当一个echarts图时,可以这样做 //下面my_charts是html中echarts的ID var myChart= echarts.init(document.getElementById(& ...

  6. echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  7. echarts 图表自适应外部盒子大小

    项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化. 自适应窗口及盒子大小 页面中有一个[放大.缩小]功能,及全屏展示和预览图表 窗口自适应 let m ...

  8. 一起来玩echarts系列（二）------echarts图表自适应问题

    为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表. 最后实现的效果如图: 然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了 ...

  9. swift3 循环滚动视图 自适应横竖屏 reload数据源

    一句话创建banner图,可时时刷新 用到了 SnapKit.SDWebImage两个第三方库 实现步骤------------------------------------------------ ...

随机推荐

  1. 3.jmeter jsr232 脚本获取当前测试的正在活动的线程数

    jsr232 groovy 脚本获取当前测试的正在活动的线程数 (需要选择 groovy类型, 如果使用beanshell或者javascript,请根据其语法稍作修改即可) import org.a ...

  2. js try{}catch(e){}的理解

    程序开发中,编程人员经常要面对的是如何编写代码来响应错误事件的发生,即例外处理(exception handlers).如果例外处理代码设计得周全,那么最终呈现给用户的就将是一个友好的界面.否则,就会 ...

  3. C++中函数模板的深入理解

    1,函数模板深入理解: 1,编译器从函数模板通过具体类型产生不同的函数: 1,模板就是模子,通过这个模子可以产生很多的实物: 2,函数模板就是编译器用来产生具体函数的模子: 2,编译器会对函数模板进行 ...

  4. bzoi1152 [CTSC2006]歌唱王国Singleland

    [CTSC2006]歌唱王国Singleland Time Limit: 30 Sec Memory Limit: 162 MB Description 在歌唱王国,所有人的名字都是一个非空的仅包含整 ...

  5. VMware Converter Standalone迁移概要

    VMware Converter 迁移工具使用:1.基本概念 1.1基本组件: converter standalone server:包含server和worker两个服务,这两个服务经常一起安装 ...

  6. cmd 编码格式

    相当于编辑器的声明为gbk格式编码,输出格式也是gbka = '中文' 就会以gbk编码为str,也只能以gbk解码. reload sys修改默认编码 在不指定编码的时候充当默认解码或者编码格式

  7. nuxt+高德地图实现多边形区域检索

    我已经放弃百度地图了,为什么呢? 原因一: 百度地图api太乱不容易查阅 原因二: 百度给出的案例太少,可参考项太少 第三点也是最重要的,百度地图花钱,百度地图花钱,百度地图花钱, 很荣幸,作为国内唯 ...

  8. Linux中各类程序的配置文件位置

    目录 Linux中各类程序的配置文件位置 1.启动引导程序配置文件 2.系统启动文件核脚本 3.网络配置文件 4.超级服务程序配置文件和目录 5.硬件配置 6.硬件访问文件 7.扫描仪配置文件 8.打 ...

  9. git 初始化提交项目

    Git初始化本地已有项目,并推送到远端Git仓库操作1. 创建本地项目,在项目根目录执行git init命令git init 2. 在git服务器上创建一个仓库,这里使用GitHub创建一个仓库.例如 ...

  10. font-size-adjust属性定义及用法

    font-size-adjust属性定义及用法 在css中,font-size-adjust属性是使用来更好的控制字体大小,当第一个选择的字体不可用时,浏览器使用第二个指定的字体,这可能会导致改变字体 ...