echarts单文件引入 html板本

最新推荐文章于 2025-03-26 10:44:31 发布

原创最新推荐文章于 2025-03-26 10:44:31 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

ECharts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在非模块化或CMD环境下，通过HTML script标签轻松引入ECharts。通过引入`echarts-all.js`压缩文件，可以获得完整的ECharts库，包括世界地图、中国地图及所有省份、市级地图数据。在IE8-浏览器中，需注意将引用脚本放在body底部以避免Canvas支持问题。

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

标签式引入环境中，常用模块的引用可通过命名空间直取

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

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