Echarts可视化教程(二)——柱状图的绘制


任务描述

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

相关知识

本关将介绍Echart中柱状图的绘制,包括标准柱状图、堆积柱状图等。

本关以及后面所有Echars的课程都使用HtmlJavaScript开发,所需要的开发环境仅仅是一个文本编辑器(推荐sublime)和一个浏览器(推荐Google Chrome)。

标准柱状图

标准柱状图就是最常见的一种柱状图,如下所示:

图  1


图 1 标准柱状图

其中x轴表示数据项,比如上面的x轴表示服装的种类。y轴用来表示数据的值。

使用Echarts绘图采用的编程语言是JavaScript,我们把程序放在一个Html文件中。

绘制最简单的标准柱状图的代码如下所示:

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ECharts</title>
  6. <!-- 引入 echarts.js -->
  7. <script type="text/JavaScript" src="../static/echarts.min.js"></script>
  8. <body>
  9. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  10. <div id="main" style="width: 600px;height:400px;"></div>
  11. <!-- 绘制柱状图的javascript代码 -->
  12. <script type="text/javascript">
  13. // 基于准备好的dom,初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17. title: {
  18. text: 'ECharts 入门示例' //柱状图标题
  19. },
  20. tooltip: {}, //提示框
  21. legend: {
  22. data:['销量'] //图例
  23. },
  24. xAxis: {
  25. name: "鞋服种类",//x轴标题
  26. data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]//x轴每一行的内容
  27. },
  28. yAxis: {
  29. name:"销量"//y轴标题
  30. },
  31. series: [{//数据内容
  32. name: '销量',//数据名称
  33. type: 'bar',//数据形式,bar表示柱状图
  34. data: [5, 20, 36, 10, 10, 20]//数据
  35. }]
  36. };
  37. // 使用刚指定的配置项和数据显示图表。
  38. myChart.setOption(option);
  39. </script>
  40. </body>
  41. </html>

上面的每一行代码都给出了注释,总的来说,绘制柱状图分为如下几个步骤:

  • 准备一个dom元素用来放置柱状图;
  • 使用Option设置柱状图的内容;
  • 通过setOption显示柱状图。

其中第二步是最核心的,在这一步中,我们通过设置柱状图的横轴、纵轴、图例、数据内容等来绘制柱状图。

最终绘制出的柱状图如下所示:

图  1


图 2 标准柱状图绘制结果

堆积柱状图

什么是堆积柱状图,就是标准柱状图的每一个柱子由几根小的柱子上下堆叠组成,如下是一个例子:

图  1


图 3 堆积柱状图

堆积柱状图的程序和标准柱状图差不多,区别是其中的series有好几段数据组成,如下的程序就是实现上面的堆积柱状图的:

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ECharts</title>
  6. <!-- 引入 echarts.js -->
  7. <script type="text/JavaScript" src="../static/echarts.min.js"></script>
  8. <body>
  9. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  10. <div id="main" style="width: 600px;height:400px;"></div>
  11. <script type="text/javascript">
  12. var myChart = echarts.init(document.getElementById('main'));
  13. myChart.setOption({
  14. title : {
  15. text : "杭州地铁客流情况"//标题
  16. },
  17. tooltip : {
  18. },
  19. legend: {
  20. data:['1号线', '2号线','4号线','5号线']//图例
  21. },
  22. xAxis : [
  23. {
  24. type : 'category',//表示x轴的每一项由几组数据组成
  25. data : ['周一','周二','周三','周四','周五','周六','周日']//x轴标题
  26. }
  27. ],
  28. yAxis : [
  29. {
  30. type : 'value'//每一项都是数据
  31. }
  32. ],
  33. series : [
  34. {
  35. name:'1号线',//数据的名字
  36. type:'bar',//表示柱状图
  37. stack: '总量',//数据系列的名字,stack相同的数据才会堆到一个柱子上
  38. itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
  39. data:[37, 35, 38, 36, 37, 45, 48]//数据
  40. },
  41. {
  42. name:'2号线',
  43. type:'bar',
  44. stack: '总量',
  45. itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
  46. data:[47, 48, 47, 46, 48, 59, 57]
  47. },
  48. {
  49. name:'4号线',
  50. type:'bar',
  51. stack: '总量',
  52. itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
  53. data:[32, 33, 32, 34, 35, 40, 42]
  54. },
  55. {
  56. name:'5号线',
  57. type:'bar',
  58. stack: '总量',
  59. itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
  60. data:[61, 63, 61, 62, 63, 75, 76]
  61. }
  62. ]
  63. });
  64. // 使用刚指定的配置项和数据显示图表。
  65. myChart.setOption(option);
  66. </script>
  67. </body>
  68. </html>

上面的注释已经很详细了,唯一需要提醒的是,只有当stack的值相同时,数据才会堆到同一个柱子上。比如当我们把1号线的stack改为“总量2”时,表示1号线客流的柱子就会单独被拎出来,如下:

图  1


图 3 stack值不同时,单独被拎出来的1号线

编程要求

根据提示,在右侧编辑器BeginEnd之间补充代码,将如下所示的数据绘制为柱状图:

港口名\集装箱吞吐量周一周二周三周四周五
A港口3735383637
B港口4748474648
C港口3233323435
D港口6163616263

数据地址为: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>

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值