头歌：Echarts开源库实现绘图（第一关）

然后就可以通过echarts.init方法初始化一个echarts实例并通过 setOption方法生成一个简单的柱状图，下面是完整代码。注意：Echarts 有多个版本，你可以根据自己的需要下载精简版或完整版，本实训选用的是ECharts v4.1.0 rc2版。在option中设置柱状图的标题（title），x轴，y轴等数据,series中type属性设置图表类型，bar代表柱状图。为了完成本

2301_81784463

1564人浏览 · 2024-09-29 22:02:28

2301_81784463 · 2024-09-29 22:02:28 发布

第一关：Echarts 的下载与使用

任务描述
本关任务：利用 Echarts 绘制一个简单的图表，效果如下：

相关知识
为了完成本关任务，你需要掌握：1.下载 Echarts，2.如何引入 Echarts，3.绘制一个简单的图表。

下载 Echarts
我们选用的版本是：ECharts v4.1.0 rc2

linux 环境：点击下载

Windows 环境：点击下载

引入 Echarts
ECharts 3 版本以后，引入方式简单了很多，在 HTML 文件中，只需要像普通的 JavaScript 库一样用script标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
</html>

其中src的路径为你自己下载的echarts.xxx.js路径。
注意：Echarts 有多个版本，你可以根据自己的需要下载精简版或完整版，本实训选用的是ECharts v4.1.0 rc2版。

绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过echarts.init方法初始化一个echarts实例并通过 setOption方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

各部分设置如下：

总结，生成柱状图的流程为：

引入echarts.js
为 ECharts 准备一个具备高宽的 DOM 容器
通过echarts.init方法初始化一个echarts实例
在option中设置柱状图的标题（title），x轴，y轴等数据,series中type属性设置图表类型，bar代表柱状图
通过 setOption方法使刚才的设置生效
编程要求
仿造实训中的例子，在右侧编辑器补充代码，绘制柱状图，效果如下图：

图表标题为：Educoder 实训统计
其中实训数量分别为：[300, 280, 386, 180, 210, 50]
测试说明
我会对你编写的代码进行测试：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.simple.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
		<!-- Begin 1 -->
        var myChart = echarts.init(document.getElementById('main'));

		<!-- End 1 -->

        // 指定图表的配置项和数据
		<!-- Begin 2 -->
        var option = {
            title: {
                text: 'Educoder 实训统计'
            },
            tooltip: {},
            legend: {
                data:['实训数量']
            },
            xAxis: {
                data: ["Java","Python","Linux","数据库","HTML","Web"]
            },
            yAxis: {},
            series: [{
                name: '实训数量',
                type: 'bar',
                data: [300,280,386,180,210,50]
            }]
		
        };
		<!-- End 2 -->
        // 使用刚指定的配置项和数据显示图表。
		<!-- Begin 3 -->
         myChart.setOption(option);
		<!-- End 3 -->
    </script>
</body>
</html>

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

14-8 姿势控制：移动（AGI基础理论）

《智能的理论》全书转至目录不同AGI的研究路线对比简化版：《AGI（具身智能）路线对比》，欢迎各位参与讨论、批评或建议。移动表示动物从一个地方独立地和安全地运动到另外一个地方，移动包括步态控制、爬、跑、上\下坡、上\下楼梯，还包括从床上移动，从椅子起来，搬运等内容。其中，步态控制是本文主要的论述内容。移动包括三个要求。第一个要求是行进，通过对上下肢和躯体的控制，确保身体朝着期望的位置或方向移动。第