html调用echarts 在线资源

要在HTML中调用echarts在线资源，可以按照以下步骤进行：

第一步，首先，在HTML文件的头部添加引用echarts脚本的代码。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

这将从CDN获取最新版本的echarts脚本并添加到HTML中。

第二步，创建一个拥有一个用于显示echarts图表的容器的HTML元素。例如：

<div id="chartContainer" style="width: 600px; height: 400px;"></div>

在这个示例中，我们创建了一个具有600像素宽度和400像素高度的div容器，其id为"chartContainer"。

第三步，创建一个JavaScript脚本来生成echarts图表并将其绑定到之前创建的容器。

<script>
  // 基于准备好的dom，初始化echarts实例
  var chart = echarts.init(document.getElementById('chartContainer'));

  // 指定图表的配置项和数据
  var option = {
    // ... 这里根据需要配置你的图表选项 ...
  };

  // 使用刚指定的配置项和数据显示图表
  chart.setOption(option);
</script>

在这个示例中，我们使用echarts.init方法将echarts与之前创建的容器进行了连接，并定义了图表的配置和数据。

最后一步，根据自己的需求在option中配置echarts图表的样式、数据和交互等。可以参考echarts的官方文档来获得更多详细信息和示例。

完成这些步骤后，当页面加载时，echarts图表将在指定的容器中显示出来，并根据指定的配置项和数据进行渲染。