Echarts多Y轴探索

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

用过好多图表库,还是对Echarts最有好感。:)本文使用Echarts来给出多Y轴的实例。

在给出多Y轴实例前,咱们首先来看一下Echarts实现图形化的基本步骤;单Y轴实例;双Y轴实例。本文采用的ECharts版本为3.2.2,大家可以到ECharts的下载页面下载。

一、ECharts图形化步骤

1.1 引入ECharts

将下载的echarts.min.js文件,使用<script>标签引入。

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

1.2 指定图形展示区域

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

1.3 初始化echarts实例

 // 基于准备好的dom,初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

1.4 指定配置项和数据

// 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

1.5 设置Option显示图表

       // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

一个ECharts官网示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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>

二、单Y轴

如下给出一个2016年每月新增设备数的柱状图,数据纯属虚构。

2.1 代码

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  <div id="main" style="height: 500px; width: 1200px"></div>

  <!-- ECharts单文件引入 -->
  <script src="echarts.min.js"></script>
  <script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));
    option = {
      tooltip : {
        trigger : 'axis'
      },
      grid : {
        right : '20%'
      },
      toolbox : {
        feature : {
          dataView : {
            show : false,
            readOnly : false
          },
          restore : {
            show : false
          },
          saveAsImage : {
            show : false
          }
        }
      },
      legend : {
        data : [ '设备新增数量' ]
      },
      xAxis : [ {
        type : 'category',
        axisTick : {
          alignWithLabel : false
        },
        data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
            '2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
            '2016-11', '2016-12' ]
      } ],
      yAxis : [ {
        type : 'value',
        name : '设备新增数量',
        min : 0,
        max : 11000,
        position : 'left',
        axisLine : {
          lineStyle : {}
        },
        axisLabel : {
          formatter : '{value}'
        }
      } ],
      series : [ {
        name : '设备新增数量',
        type : 'bar',
        data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580,
            5063, 1520, 9000 ]
      } ]
    };

    // 为echarts对象加载数据 
    myChart.setOption(option);
</script>
</body>

2.2 图形展示

三、双Y轴

在上述单Y轴的柱状图中展示了一个2016年每月新增设备数的数据。接下来,我们在上述基础上添加2016年每月新增产品数

假设,一个产品可以有多个设备

但是,可能一个产品包含上百、上千甚至更多的设备数,那么,问题来了

如果使用单轴的柱状图就会产生问题?

设备数图形较为明显、而产品数的图形展示不明显,几乎看不到变化,
因为设备数和产品数不在同一个数量级上。

为了解决这个问题,咱么可以展示两个Y轴,分别表示设备数和产品数即可。

3.1 代码

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  <div id="main" style="height: 500px; width: 1200px"></div>

  <!-- ECharts单文件引入 -->
  <script src="echarts.min.js"></script>
  <script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));
    option = {
      tooltip : {
        trigger : 'axis'
      },
      grid : {
        right : '20%'
      },
      toolbox : {
        feature : {
          dataView : {
            show : false,
            readOnly : false
          },
          restore : {
            show : false
          },
          saveAsImage : {
            show : false
          }
        }
      },
      legend : {
        data : [ '设备新增数量', '产品新增数量' ]
      },
      xAxis : [ {
        type : 'category',
        axisTick : {
          alignWithLabel : false
        },
        data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
            '2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
            '2016-11', '2016-12' ]
      } ],
      yAxis : [ {
        type : 'value',
        name : '设备新增数量',
        min : 0,
        max : 11000,
        position : 'left',
        axisLine : {
          lineStyle : {}
        },
        axisLabel : {
          formatter : '{value}'
        }
      }, {
        type : 'value',
        name : '产品新增数量',
        min : 0,
        max : 200,
        position : 'right',
        axisLine : {
          lineStyle : {}
        },
        axisLabel : {
          formatter : '{value}'
        }
      } ],
      series : [
          {
            name : '设备新增数量',
            type : 'bar',
            data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
                3002, 3580, 5063, 1520, 9000 ]
          },
          {
            name : '产品新增数量',
            type : 'bar',
            yAxisIndex : 1,
            data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
                150 ]
          } ]
    };

    // 为echarts对象加载数据 
    myChart.setOption(option);
</script>
</body>

3.2 图形展示

四、三个Y轴

在上述单Y轴的柱状图中展示了一个2016年每月新增设备数2016年每月新增产品数的数据,这个部分,我们还想在图形上展示2016年每月新增厂商数

设备数和产品数已经占用了两个Y轴,还能再添加一个新的Y轴进去吗?

答案是肯定的。

ECharts为yAxis提供的offset属性,就是为多轴服务的。详情,请参考yAxis配置属性。

4.1 代码

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  <div id="main" style="height: 500px; width: 1200px"></div>

  <!-- ECharts单文件引入 -->
  <script src="echarts.min.js"></script>
  <script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));
    var colors = [ '#5793f3', '#d14a61', '#675bba' ];
    option = {
      color : colors,

      tooltip : {
        trigger : 'axis'
      },
      grid : {
        right : '20%'
      },
      toolbox : {
        feature : {
          dataView : {
            show : false,
            readOnly : false
          },
          restore : {
            show : false
          },
          saveAsImage : {
            show : false
          }
        }
      },
      legend : {
        data : [ '设备新增数量', '产品新增数量', '厂商新增数量' ]
      },
      xAxis : [ {
        type : 'category',
        axisTick : {
          alignWithLabel : false
        },
        data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
            '2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
            '2016-11', '2016-12' ]
      } ],
      yAxis : [ {
        type : 'value',
        name : '设备新增数量',
        min : 0,
        max : 11000,
        position : 'left',
        axisLine : {
          lineStyle : {
            color : colors[2]
          }
        },
        axisLabel : {
          formatter : '{value}'
        }
      }, {
        type : 'value',
        name : '产品新增数量',
        min : 0,
        max : 200,
        position : 'right',
        axisLine : {
          lineStyle : {
            color : colors[0]
          }
        },
        axisLabel : {
          formatter : '{value}'
        }
      }, {
        type : 'value',
        name : '厂商新增数量',
        min : 0,
        max : 200,
        position : 'right',
        offset : 80,
        axisLine : {
          lineStyle : {
            color : colors[1]
          }
        },
        axisLabel : {
          formatter : '{value}'
        }
      } ],
      series : [
          {
            name : '设备新增数量',
            type : 'bar',
            data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
                3002, 3580, 5063, 1520, 9000 ]
          },
          {
            name : '产品新增数量',
            type : 'bar',
            yAxisIndex : 1,
            data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
                150 ]
          },
          {
            name : '厂商新增数量',
            type : 'bar',
            data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
                150 ]
          } ]
    };

    // 为echarts对象加载数据 
    myChart.setOption(option);
</script>
</body>

4.2 图形展示

五、小结

在ECharts的option中,我们可以配置参数来指定用于展示的图形类型、图形数据、图形属性等(如标题、颜色等),具体可以参考配置项。

5.1 四轴

如果还需要展示更多的Y轴数据,那么只要在yAxis选项中,指定不同的Y轴及其相关的位置或者偏移量offset即可。

代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  <div id="main" style="height: 500px; width: 1200px"></div>

  <!-- ECharts单文件引入 -->
  <script src="echarts.min.js"></script>
  <script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));
    option = {
      tooltip : {
        trigger : 'axis'
      },
      grid : {
        right : '20%'
      },
      toolbox : {
        feature : {
          dataView : {
            show : false,
            readOnly : false
          },
          restore : {
            show : false
          },
          saveAsImage : {
            show : false
          }
        }
      },
      legend : {
        data : [ '设备新增数量', '产品新增数量', '厂商新增数量', 'XX新增数量' ]
      },
      xAxis : [ {
        type : 'category',
        axisTick : {
          alignWithLabel : false
        },
        data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
            '2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
            '2016-11', '2016-12' ]
      } ],
      yAxis : [ {
        type : 'value',
        name : '设备新增数量',
        min : 0,
        max : 11000,
        position : 'left',
        axisLine : {
          lineStyle : {}
        },
        axisLabel : {
          formatter : '{value}'
        }
      }, {
        type : 'value',
        name : '产品新增数量',
        min : 0,
        max : 200,
        position : 'right',
        axisLine : {
          lineStyle : {}
        },
        axisLabel : {
          formatter : '{value}'
        }
      }, {
        type : 'value',
        name : '厂商新增数量',
        min : 0,
        max : 200,
        position : 'right',
        offset : 80,
        axisLine : {
          lineStyle : {}
        },
        axisLabel : {
          formatter : '{value}'
        }
      }, {
        type : 'value',
        name : 'XX新增数量',
        min : 0,
        max : 200,
        position : 'right',
        offset : 160,
        axisLine : {
          lineStyle : {}
        },
        axisLabel : {
          formatter : '{value}'
        }
      } ],
      series : [
          {
            name : '设备新增数量',
            type : 'bar',
            data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
                3002, 3580, 5063, 1520, 9000 ]
          },
          {
            name : '产品新增数量',
            type : 'bar',
            yAxisIndex : 1,
            data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
                150 ]
          },
          {
            name : '厂商新增数量',
            type : 'bar',
            data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
                150 ]
          },
          {
            name : 'XX新增数量',
            type : 'bar',
            data : [ 121, 125, 26, 36, 125, 88, 66, 147, 158, 99,
                93, 108 ]
          } ]
    };

    // 为echarts对象加载数据 
    myChart.setOption(option);
</script>
</body>

5.2 自定义

如果对EChart提供的颜色不满意,我们也可以指定图形展示的颜色。 其实,EChart已经提供了好多套主题,用来展示图形。

示例代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  <div id="main" style="height: 500px; width: 1200px"></div>

  <!-- ECharts单文件引入 -->
  <script src="echarts.min.js"></script>
  <script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));
    var colors = [ '#5793f3', '#d14a61', '#675bba' ];
    option = {
      color : colors,

      tooltip : {
        trigger : 'axis'
      },
      grid : {
        right : '20%'
      },
      toolbox : {
        feature : {
          dataView : {
            show : false,
            readOnly : false
          },
          restore : {
            show : false
          },
          saveAsImage : {
            show : false
          }
        }
      },
      legend : {
        data : [ '设备新增数量', '产品新增数量', '厂商新增数量' ]
      },
      xAxis : [ {
        type : 'category',
        axisTick : {
          alignWithLabel : false
        },
        data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
            '2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
            '2016-11', '2016-12' ]
      } ],
      yAxis : [ {
        type : 'value',
        name : '设备新增数量',
        min : 0,
        max : 11000,
        position : 'left',
        axisLine : {
          lineStyle : {
            color : colors[2]
          }
        },
        axisLabel : {
          formatter : '{value}'
        }
      }, {
        type : 'value',
        name : '产品新增数量',
        min : 0,
        max : 200,
        position : 'right',
        axisLine : {
          lineStyle : {
            color : colors[0]
          }
        },
        axisLabel : {
          formatter : '{value}'
        }
      }, {
        type : 'value',
        name : '厂商新增数量',
        min : 0,
        max : 200,
        position : 'right',
        offset : 80,
        axisLine : {
          lineStyle : {
            color : colors[1]
          }
        },
        axisLabel : {
          formatter : '{value}'
        }
      } ],
      series : [
          {
            name : '设备新增数量',
            type : 'bar',
            data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
                3002, 3580, 5063, 1520, 9000 ]
          },
          {
            name : '产品新增数量',
            type : 'bar',
            yAxisIndex : 1,
            data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
                150 ]
          },
          {
            name : '厂商新增数量',
            type : 'bar',
            data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
                150 ]
          } ]
    };

    // 为echarts对象加载数据 
    myChart.setOption(option);
</script>
</body>

自定义颜色的图形展示如下:

至此,使用ECharts完成多Y轴展示的示例就展示完毕了。

ECharts是一个比较丰富的图形展示库,大家可以参考官网的说明和实例,打造属于自己的个性化图形。

本文分享自微信公众号 - 孟君的编程札记(gh_0f0f5e0ae1de),作者:孟君

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Arthas,一个Java诊断工具,你值得拥有

    Arthas支持JDK 6+,支持Linux/Mac/Winodws,采用命令行交互模式,同时提供丰富的 Tab 自动补全功能,进一步方便进行问题的定位和诊断。

    孟君
  • Lombok,简化代码的神器,你值得拥有

    本文给大家介绍一个Java代码简化的神器 -- Lombok。主要从如下几个方面进行展开:

    孟君
  • 还在new对象吗?Builder构建对象了解一下?

    在平时开发中,我们经常需要去new一个对象。如果一个类的属性很多,就要设置较多的setXXX,这样实例化和赋值分开,较为分散。

    孟君
  • 机器学习(3)之最大似然估计

    关键字全网搜索最新排名 【机器学习算法】:排名第一 【机器学习】:排名第二 【Python】:排名第三 【算法】:排名第四 最大似然估计 上一篇(机器学习(2)...

    昱良
  • 【图说】我国重点行业领域大数据应用研究(8大领域)

    全文较长,建议阅读时间4分钟。 往期回顾:【图说】2016年中国云计算产业趋势分析报告 ?

    钱塘数据
  • 英特尔发布三款新软件工具,希望普及FPGA开发

    陈桦 编译自 HPCWire 量子位 出品 | 公众号 QbitAI ? FPGA编程很难,需要用到专业编程语言,例如Verilog和VHDL。 降低编程难度是...

    量子位
  • 简单介绍一下vue2.0

    Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库...

    笔阁
  • YOLO v3有哪些新特点?

    You only look once(你只需看一次),或者YOLO,是目前比较快的目标对象检测算法之一。虽然它不再是最精确的目标对象检测算法,但是当您需要实时检...

    云水木石
  • MVC项目开发中那些用到的知识点(js css优化-- 合并和压缩)

    在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等...

    aehyok
  • 一文看尽目标检测:从 YOLO v1 到 v3 的进化之路

    http://www.mamicode.com/info-detail-2314392.html

    小小詹同学

扫码关注云+社区

领取腾讯云代金券