echarts 視圖自適應問題

時間 2019-11-12

原文原文鏈接

　　　　最近在項目中用到了echarts，在處理視圖自適應問題上記錄一下；同時比較一下和highcharts的區別；javascript

　　　　在echarts中有一個resize的函數，能夠直接在監聽窗口變化時從新渲染便可；　html

//在原生代碼中
var myCharts = echarts.init(document.getElementById('#myCharts'))
window.onresize = function (){
     myCharts.resize()
}

　　　　若是是在vue項目中用到（個人項目是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()從新適應函數java

　　reflow()讓圖表自適應容器，默認狀況下，圖表會自動響應window.resize時間來自適應圖表容器（默認chart.reflow的配置是true）,在圖表中沒辦法響應事件時，則須要手動調用該函數api

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。