导入echart列子简单运行

在主文件引入后你将获得一个AMD环境，配置require.conifg如下：

  1.  
    //from echarts example
  2.  
    <body>
  3.  
    <div id="main" style="height:400px;"></div>
  4.  
    ...
  5.  
    <script src="./js/echarts.js"></script>
  6.  
    <script type="text/javascript">
  7.  
    require.config({
  8.  
    paths: {
  9.  
    echarts: './js/dist'
  10.  
    }
  11.  
    });
  12.  
    </script>
  13.  
    </body>

require.config配置后就可以通过动态加载使用echarts

  1.  
    //from echarts example
  2.  
    <body>
  3.  
    <div id="main" style="height:400px;"></div>
  4.  
    ...
  5.  
    <script src="./js/echarts.js"></script>
  6.  
    <script type="text/javascript">
  7.  
    require.config({
  8.  
    paths: {
  9.  
    echarts: './js/dist'
  10.  
    }
  11.  
    });
  12.  
    require(
  13.  
    [
  14.  
    'echarts',
  15.  
    'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
  16.  
    'echarts/chart/bar'
  17.  
    ],
  18.  
    function (ec) {
  19.  
    var myChart = ec.init(document.getElementById('main'));
  20.  
    var option = {
  21.  
    ...
  22.  
    }
  23.  
    myChart.setOption(option);
  24.  
    }
  25.  
    );
  26.  
    </script>
  27.  
    </body>

总结来说，模块化单文件引入ECharts，你需要如下4步：

  1. 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
  2. 通过script标签引入echarts主文件
  3. 为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
  4. 动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就
posted @ 2022-02-10 23:12  stdxxd  阅读(57)  评论(0)    收藏  举报