javascript - 在angular的指令ng-view中插入echarts，为什么无法显示？急求大神解答！

问题描述

问 题

代码如下：

<div ng-view >

<!--路由跳转的html模板都插入在这里-->
    </div>
    
    以下是插入到ng-view的HTML模板：
    <!--右侧charts开始-->
<main class="main_forms_first">
    <div class="article_first">
        <div class="header_first">报表<i>></i><span>访问量与会话量</span></div>
        <div class="forms_content_first">
            <div class="center_f_first">
                <div class="center_f_one">
                    <div class="center_f_left">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default active">今日</button>
                            <button type="button" class="btn btn-default">昨日</button>
                            <button type="button" class="btn btn-default">本月</button>
                        </div>
                        <div class="btn-group" id="btn-group-two">
                            <button type="button" class="btn btn-default active">全部地区</button>
                        </div>
                    </div>
                    <div class="center_f_right">日期：2016年11月17日</div>
                </div>
                <div class="center_f_two">
                    <div class="data"><span>总访问量：536</span><span>地区：全部</span></div>
                    <div class="chart" id="chart_main"></div>
                </div>
            </div>
        </div>
    </div>
</main>
<!--charts结束-->

以下是我的echarts代码：

/**
 * Created by Administrator on 2016/11/27.
 */
// 基于准备好的dom，初始化echarts实例
$(function () {
    var myChart = echarts.init(document.getElementById('chart_main'));

// 指定图表的配置项和数据
    option = {
        title: {
            text: '折线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['总访问量','会话量']
        },
        grid: {
            left: '1%',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }




        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00点','02点','04点','06点','08点','10点','12点','14点','16点','18点','20点','22点']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'总访问量',
                type:'line',
                stack: '总量',
                data:[200, 150, 100, 60, 150, 430, 560,600,800,850,1000,1050]
            },
            {
                name:'会话量',
                type:'line',
                stack: '总量',
                data:[100, 80, 40, 20, 90, 230, 260,300,400,500,550,600]
            }
        ]
    };
// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
//当浏览器窗口发生变化的时候调用div的resize方法
    window.onresize = function(){
        myChart.resize();
    }
})

解决方案

你这方式太粗放了，我猜测是你的echarts相关代码先行执行于ng-view渲染完成前，那时候还没获取到dom。

我的建议是写个directive。
html模板中直接用

<div class="chart" echart></div>

directive

app.directive('echart', [function() {
  return {
    restrict: 'AE',
    scope: {
      echart: '='
    },
    link: link
  };

  function link(scope, element, attr) {
    var myChart = echarts.init(element[0]);

    // 指定图表的配置项和数据
    var defaultOption = {
      title: {
        text: '折线图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['总访问量', '会话量']
      },
      grid: {
        left: '1%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00点', '02点', '04点', '06点', '08点', '10点', '12点', '14点', '16点', '18点', '20点', '22点']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '总访问量',
        type: 'line',
        stack: '总量',
        data: [200, 150, 100, 60, 150, 430, 560, 600, 800, 850, 1000, 1050]
      }, {
        name: '会话量',
        type: 'line',
        stack: '总量',
        data: [100, 80, 40, 20, 90, 230, 260, 300, 400, 500, 550, 600]
      }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(defaultOption);

    // 双向传值
    // scope.$watch('echart', function(n, o) {
    //  if (n === o || !n) return;
    //  myChart.setOption(n);
    // });
    
    //当浏览器窗口发生变化的时候调用div的resize方法
    window.addEventListener('resize', chartResize);

    scope.$on('$destory', function() {
      window.removeEventListener('resize', chartResize);
    })

    function chartResize() {
      myChart.resize();
    }
  }
}]);

这篇关于javascript - 在angular的指令ng-view中插入echarts，为什么无法显示？急求大神解答！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！