大数据可视化工具Echarts-(1)引入Echarts

推荐模块化单文件引入

  • dist(文件夹) : 经过合并、压缩的单文件
    • echarts.js : 这是包含AMD加载器的echarts主文件,需要通过script最先引入
    • chart(文件夹) : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件,根据应用需求可实现图表类型按需加载
      • echarts-line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)
      • echarts-bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)
      • echarts-scatter.js : 散点图
      • echarts-k.js : K线图
      • echarts-pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)
      • echarts-radar.js : 雷达图
      • echarts-map.js : 地图
      • echarts-force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)
      • echarts-chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)
      • echarts-funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)
      • echarts-gauge.js : 仪表盘
      • echarts-eventRiver.js : 事件河流图
    source(文件夹) : 经过合并,但并没有压缩的单文件,内容同dist,可用于调试


    首先通过script标签引入echarts主文件

    <body>

    <div  id="main" style="height:400px;"></div>

    ...

    <script src="../Public/echarts-2.2.1/build/dist/echarts.js"></script>

    </body>

    每个人的路径可能放的不一样。

    在主文件引入后将获得一个AMD环境,AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

    配置require.config如下:

    <div id="main" style="height:500px"></div>
     <script src="../Public/echarts-2.2.1/build/dist/echarts.js"></script>
        <script type="text/javascript">
            // 路径配置
            require.config({
                paths: {
                    echarts: '../Public/echarts-2.2.1/build/dist'
                }
            });

    </script>

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

    <div id="main" style="height:500px"></div>
     <script src="../Public/echarts-2.2.1/build/dist/echarts.js"></script>
        <script type="text/javascript">
            // 路径配置
            require.config({
                paths: {
                    echarts: '../Public/echarts-2.2.1/build/dist'
                }
            }); require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = { ... } myChart.setOption(option); } ); </script>

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

    1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)
    2. 通过script标签引入echarts主文件
    3. 为模块加载器配置echarts的路径,从当前页面链接到echarts.js所在目录,见上述说明
    4. 动态加载echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)
    原文:点击打开链接
  • 你可能感兴趣的:(前端,ECharts,大数据可视化)