Echarts可视化教程（二）——柱状图的绘制

我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！其中第二步是最核心的，在这一步中，我们通过设置柱状图的横轴、纵轴、图例、数据内容等来绘制柱状图。同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。堆积柱状图的程序和标准柱状图差不多，区别是其中的。

fh8uuc

5040人浏览 · 2023-10-21 16:31:05

fh8uuc · 2023-10-21 16:31:05 发布

任务描述

本关任务：按照要求绘制堆积柱状图。

编程要求

根据提示，在右侧编辑器Begin和End之间补充代码，将如下所示的数据绘制为柱状图：

港口名\集装箱吞吐量	周一	周二	周三	周四	周五
A港口	37	35	38	36	37
B港口	47	48	47	46	48
C港口	32	33	32	34	35
D港口	61	63	61	62	63

数据地址为：http://127.0.0.1:8080/static/data.txt 绘制出来的图需要和如下的相同：

图 1

图 4 结果图

要点（以图片为准，这里仅为提示作用）：

标题为“港口集装箱吞吐量”；
港口A和港口B在一个柱子上，港口C和港口D分别为一个柱子；
柱子的样式（itemStyle）为：{ normal: {label : {show: true, position: 'insideRight'}}}

测试说明

我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！”

同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。

测试输入：预期输出：图像对比一致，恭喜通关

代码文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type="text/JavaScript" src="../static/jquery.min.js"></script>
    <script type="text/JavaScript" src="../static/echarts.min.js"></script>

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

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        url = "http://127.0.0.1:8080/static/data.txt";
        /********* Begin *********/
         myChart.setOption({
        title : {
            text : "港口集装箱吞吐量"//标题
        },
        tooltip : {                      
        },
        legend: {
            data:['A港口', 'B港口','C港口','D港口']//图例
        },
        xAxis : [
          {
              type : 'category',//表示x轴的每一项由几组数据组成
              data : ['周一','周二','周三','周四','周五']//x轴标题
          }
        ],
        yAxis : [
          {
              type : 'value'//每一项都是数据
          }
        ],
        series : [
             {
                 name:'A港口',//数据的名字
                 type:'bar',//表示柱状图
                 stack: '总量',//数据系列的名字，stack相同的数据才会堆到一个柱子上
                 itemStyle : { normal: {show: true, position: 'insideRight'}},//柱子样式
                 data:[37, 35, 38, 36, 37]//数据
             },
             {
                 name:'B港口',
                 type:'bar',
                 stack: '总量',
                itemStyle : { normal: {show: true, position: 'insideRight'}},
                 data:[47, 48, 47, 46, 48]
             },
             {
                 name:'C港口',
                 type:'bar',
                 stack: '总量2',
                 itemStyle : { normal: {show: true, position: 'insideRight'}},
                 data:[32, 33, 32, 34, 35]
             },
             {
                 name:'D港口',
                 type:'bar',
                 stack: '总量3',
                itemStyle : { normal: {show: true, position: 'insideRight'}},
                 data:[61, 63, 61, 62, 63]
             }
         ]
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
        /********* End *********/
    </script>
</body>

</html>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

从民办本科到AI元认知：我的2025年度创作复盘（附博主的元指导提示词、小胡说技书）

2048 AI社区

自考必备9个降AI率工具，高效避坑指南！

2048 AI社区

compose中 RememberObserver / RetainObserver 是什么

摘要： RememberObserver和RetainObserver是Jetpack Compose中用于管理状态对象生命周期的底层接口，分别通过remember和retain触发回调。它们解决了对象构造与实际使用不同步的问题（如资源泄漏风险），但官方明确反对在业务代码中直接使用。推荐通过DisposableEffect、ViewModel等高层API管理副作用。仅建议在开发基础库、强绑定资源的