echarts 视图自适应问题

　　　　最近在项目中用到了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>