以下是一个简单的示例，演示如何按需引入 ECharts 图表和组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 按需加载</title>
<!-- 引入 ECharts 主文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个包含图表的 DOM 元素 -->
<div id="myChart" style="width: 800px; height: 400px;"></div>
<script>
// 使用 require 方法按需引入图表和组件
require(['echarts', 'echarts/chart/bar', 'echarts/chart/line'], function (ec) {
// 初始化 ECharts 实例
var myChart = ec.init(document.getElementById('myChart'));
// 模拟的数据
var data = [10, 20, 30, 40, 50];
// ECharts 配置项
var option = {
xAxis: {
type: 'category',
data: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: data
}
]
};
// 使用配置项设置 ECharts 图表
myChart.setOption(option);
});
</script>
</body>
</html>
在这个例子中，我们使用 require 函数来按需引入 ECharts 主文件以及需要的图表和组件。在回调函数中，我们使用 echarts.init 方法初始化 ECharts 实例，并进行后续的图表配置和渲染。
请注意，echarts/chart/bar 和 echarts/chart/line 分别是柱状图和折线图的图表模块。你可以根据需要引入其他图表和组件模块，具体模块名称可以在 ECharts 文档中查找。
转载请注明出处：http://www.zyzy.cn/article/detail/5103/ECharts