导入echart列子简单运行
在主文件引入后你将获得一个AMD环境，配置require.conifg如下：
-
//from echarts example
-
<body>
-
<div id="main" style="height:400px;"></div>
-
...
-
<script src="./js/echarts.js"></script>
-
<script type="text/javascript">
-
require.config({
-
paths: {
-
echarts: './js/dist'
-
}
-
});
-
</script>
-
</body>
require.config配置后就可以通过动态加载使用echarts
-
//from echarts example
-
<body>
-
<div id="main" style="height:400px;"></div>
-
...
-
<script src="./js/echarts.js"></script>
-
<script type="text/javascript">
-
require.config({
-
paths: {
-
echarts: './js/dist'
-
}
-
});
-
require(
-
[
-
'echarts',
-
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
-
'echarts/chart/bar'
-
],
-
function (ec) {
-
var myChart = ec.init(document.getElementById('main'));
-
var option = {
-
...
-
}
-
myChart.setOption(option);
-
}
-
);
-
</script>
-
</body>
总结来说，模块化单文件引入ECharts，你需要如下4步：
- 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
- 通过script标签引入echarts主文件
- 为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
- 动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就
__EOF__
本文作者：stdxxd
本文链接：https://www.cnblogs.com/stdxxd/p/15881505.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
本文链接：https://www.cnblogs.com/stdxxd/p/15881505.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义