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

最新推荐文章于 2024-07-25 09:24:40 发布

fh8uuc

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量2k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/fh8uuc/article/details/133963127

版权

任务描述

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

编程要求

根据提示，在右侧编辑器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>

fh8uuc

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Echarts可视化教程（二）——柱状图的绘制

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

扫一扫