echarts往ssh项目中引入

最新推荐文章于 2022-04-20 10:31:06 发布

原创

最新推荐文章于 2022-04-20 10:31:06 发布 · 823 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

这篇博客介绍了如何在非模块化和模块化的环境中，通过标签式或单文件引入方式将ECharts集成到SSH项目中。对于非模块化项目，推荐使用script标签式引入，注意文件位置对IE8-的影响。对于模块化项目，建议使用经过合并压缩的单文件，通过AMD环境动态加载所需图表。

标签式单文件引入

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="example/www2/js/dist/echarts-all.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            ...
        }
        myChart.setOption(option);
    </script>
</body>

可以直接引入的单文件如下：