码迷,mamicode.com
首页 > 其他好文 > 详细

echarts 视图自适应问题

时间:2019-10-30 16:43:46      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:aci   echarts   data   oat   container   span   class   charset   div   

    最近在项目中用到了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 视图自适应问题

标签:aci   echarts   data   oat   container   span   class   charset   div   

原文地址:https://www.cnblogs.com/bllx/p/11765423.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!