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>

 

　　

　　

　　

posted @ 2019-10-30 15:56  前端加油站  阅读(1166)  评论(0)  编辑  收藏  举报