智一面

数据可视化

数据可视化主要目的:借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

常见的数据可视化库：

  • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)

  • ECharts.js 百度出品的一个开源 Javascript 数据可视化库

  • Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用

  • AntV 蚂蚁金服全新一代数据可视化解决方案 等等

  • Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

大白话：

官网地址：https://echarts.apache.org/zh/index.html

ECharts入门

ECharts初体验

ECharts入门教程整理来自于B站的UP主。

使用步骤：

1、引入echarts 插件文件到html页面中

选择合适版本进行下载

然后引入

<script src="js/echarts.min.js"></script>
 

2、准备一个具备大小的DOM容器

基本语法：


 
  1.  
    <div id="main" style="width: 600px;height:400px;"></div>
  2.  
    <!-- 必须要有宽度和高度 -->
 

示例：

3、初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));
 

4、指定配置项和数据(option)


 
  1.  
    var option = {
  2.  
    xAxis: {
  3.  
    type: 'category',
  4.  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  5.  
    },
  6.  
    yAxis: {
  7.  
    type: 'value'
  8.  
    },
  9.  
    series: [{
  10.  
    data: [820, 932, 901, 934, 1290, 1330, 1320],
  11.  
    type: 'line'
  12.  
    }]
  13.  
    };
 

5、将配置项设置给echarts实例对象

myChart.setOption(option);
 

完整实例：


 
  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>数据可视化-ECharts</title>
  6.  
    <style type="text/css">
  7.  
    .echarts-box {
  8.  
    widows: 400px;
  9.  
    height: 400px;
  10.  
    background-color: #B3D8FF;
  11.  
    }
  12.  
    </style>
  13.  
    </head>
  14.  
    <body>
  15.  
    <!-- 1.准备一个带长度和宽度的盒子 -->
  16.  
    <div class="echarts-box"></div>
  17.  
    <!-- 2.引入echarts.js -->
  18.  
    <script src="js/echarts.min.js"></script>
  19.  
    <script>
  20.  
    /* 3.初始化实例对象，语法：echarts.init(dom容器) */
  21.  
    var myChart = echarts.init(document.querySelector(".echarts-box"));
  22.  
    /* 4.指定配置项和数据 */
  23.  
    var option = {
  24.  
    title: {
  25.  
    text: "ECharts 入门示例"
  26.  
    },
  27.  
    tooltip: {},
  28.  
    legend: {
  29.  
    data: ["销量"]
  30.  
    },
  31.  
    xAxis: {
  32.  
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  33.  
    },
  34.  
    yAxis: {},
  35.  
    series: [{
  36.  
    name: "销量",
  37.  
    type: "bar",
  38.  
    data: [5, 20, 36, 10, 10, 20]
  39.  
    }]
  40.  
    };
  41.  
    /* 把配置项给实例对象 */
  42.  
    myChart.setOption(option);
  43.  
    </script>
  44.  
    </body>
  45.  
    </html>
 

浏览器查看结果

ECharts常用基础配置

各配置介绍如下：

  • title：设置图表的标题
  • tooltip：图表的提示框组件。其中trigger表示触发方式。
  • legend：图例组件，提示图表中线代表着什么。
  • toolbox：工具箱组件，可以另存为图片等功能。
  • color：调色盘颜色列表，设置线条的演示，后面跟个数组，设置每条线的颜色。
  • grid：网格配置。控制柱状图等图表的大小。
    • left：图表距离左侧DOM容器的。
    • right：距离右侧DOM容器。
    • bottom：距离下侧DOM容器。
    • containLabel：是否显示刻度标签，如果为true就显示，否则就不显示。
  • xAxis：设置x轴的相关配置
    • type：可以是category、value等。可以设置使数据横轴显示或纵轴显示
    • boundaryGap：是否让我们的线条和坐标轴有缝隙。
    • data：x轴显示的相关信息。
  • yAxis：设置y轴的相关配置
  • series：系列图表配置，决定着显示那种类型的图表。是一个数组，数组里面存放着对象，每一个对象代表一条数据。
    • stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
    • data：每一条线中的数据，是一个数字数组。
    • type：
    • name：series里面有了name值则legend里面的data值可以删除。

参考图：

示例：


 
  1.  
    option = {
  2.  
    // color设置我们线条的颜色 注意后面是个数组
  3.  
    color: ['pink', 'red', 'green', 'skyblue'],
  4.  
    // 设置图表的标题
  5.  
    title: {
  6.  
    text: '折线图堆叠123'
  7.  
    },
  8.  
    // 图表的提示框组件
  9.  
    tooltip: {
  10.  
    // 触发方式
  11.  
    trigger: 'axis'
  12.  
    },
  13.  
    // 图例组件
  14.  
    legend: {
  15.  
    // series里面有了 name值则 legend里面的data可以删掉
  16.  
    },
  17.  
    // 网格配置 grid可以控制线形图 柱状图 图表大小
  18.  
    grid: {
  19.  
    left: '3%',
  20.  
    right: '4%',
  21.  
    bottom: '3%',
  22.  
    // 是否显示刻度标签 如果是true 就显示 否则反之
  23.  
    containLabel: true
  24.  
    },
  25.  
    // 工具箱组件 可以另存为图片等功能
  26.  
    toolbox: {
  27.  
    feature: {
  28.  
    saveAsImage: {}
  29.  
    }
  30.  
    },
  31.  
    // 设置x轴的相关配置
  32.  
    xAxis: {
  33.  
    type: 'category',
  34.  
    // 是否让我们的线条和坐标轴有缝隙
  35.  
    boundaryGap: false,
  36.  
    data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
  37.  
    },
  38.  
    // 设置y轴的相关配置
  39.  
    yAxis: {
  40.  
    type: 'value'
  41.  
    },
  42.  
    // 系列图表配置 它决定着显示那种类型的图表
  43.  
    series: [
  44.  
    {
  45.  
    name: '邮件营销',
  46.  
    type: 'line',
  47.  
     
  48.  
    data: [120, 132, 101, 134, 90, 230, 210]
  49.  
    },
  50.  
    {
  51.  
    name: '联盟广告',
  52.  
    type: 'line',
  53.  
     
  54.  
    data: [220, 182, 191, 234, 290, 330, 310]
  55.  
    },
  56.  
    {
  57.  
    name: '视频广告',
  58.  
    type: 'line',
  59.  
     
  60.  
    data: [150, 232, 201, 154, 190, 330, 410]
  61.  
    },
  62.  
    {
  63.  
    name: '直接访问',
  64.  
    type: 'line',
  65.  
     
  66.  
    data: [320, 332, 301, 334, 390, 330, 320]
  67.  
    }
  68.  
    ]
  69.  
    };
 

效果：

柱形图

那么如何来做这个柱形图呢？

第一步：查看官网类似案例

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中

复制里面的option配置到本地文件


 
  1.  
    option = {
  2.  
    xAxis: {
  3.  
    type: 'category',
  4.  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  5.  
    },
  6.  
    yAxis: {
  7.  
    type: 'value'
  8.  
    },
  9.  
    series: [{
  10.  
    data: [120, 200, 150, 80, 70, 110, 130],
  11.  
    type: 'bar',
  12.  
    showBackground: true,
  13.  
    backgroundStyle: {
  14.  
    color: 'rgba(220, 220, 220, 0.8)'
  15.  
    }
  16.  
    }]
  17.  
    };
 

本地运行

根据需求定制图表

  • 设置柱状图的大小

  • 改变X轴标签颜色为红色

  • 不显示X轴的样式

  • 设置y轴的文字标签样式

  • 设置y轴的轴线的样式

  • y轴分割线的样式

  • 修改柱形图的柱子宽度和圆角

  • 修改柱状图的工具提示

  • 更换对应数据

  • 图表随屏幕自适应

完整代码：


 
  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>数据可视化-ECharts</title>
  6.  
    <style type="text/css">
  7.  
    .echarts-box {
  8.  
    width: 400px;
  9.  
    height: 400px;
  10.  
    background-color: #B3D8FF;
  11.  
    }
  12.  
    </style>
  13.  
    </head>
  14.  
    <body>
  15.  
    <!-- 1.准备一个带长度和宽度的盒子 -->
  16.  
    <div class="echarts-box"></div>
  17.  
    <!-- 2.引入echarts.js -->
  18.  
    <script src="js/echarts.min.js"></script>
  19.  
    <script>
  20.  
    /* 3.初始化实例对象，语法：echarts.init(dom容器) */
  21.  
    var myChart = echarts.init(document.querySelector(".echarts-box"));
  22.  
    /* 4.指定配置项和数据 */
  23.  
    var option = {
  24.  
    // 设置柱状图的颜色
  25.  
    color: ["#2F89CF"],
  26.  
    // 设置工具提示
  27.  
    tooltip: {
  28.  
    trigger: 'axis',
  29.  
    axisPointer: {
  30.  
    // 坐标轴指示器, 坐标轴触发有效
  31.  
    type: "shadow" // 默认为直线,可选为"line"/"shadow"
  32.  
    }
  33.  
    },
  34.  
    // 设置柱状图的大小
  35.  
    grid: {
  36.  
    left: "0%",
  37.  
    top: "10px",
  38.  
    right: '0%',
  39.  
    bottom: "4%",
  40.  
    containLabel: true
  41.  
    },
  42.  
    // X轴的配置
  43.  
    xAxis: {
  44.  
    type: 'category',
  45.  
    data: ['小学生', '初中生', '高中生', '大学生', '研究生', '博士生'],
  46.  
    axisTick: {
  47.  
    alignWithLabel: true
  48.  
    },
  49.  
    // 修改刻度标签相关样式
  50.  
    axisLabel: {
  51.  
    color: 'red',
  52.  
    fontSize: '12'
  53.  
    },
  54.  
    // 显示x坐标轴的样式
  55.  
    show: true
  56.  
    },
  57.  
    // Y轴的配置
  58.  
    yAxis: {
  59.  
    type: 'value',
  60.  
    // y轴文字标签的样式
  61.  
    axisLabel: {
  62.  
    color: "rgba(255, 255, 255, 0.6)",
  63.  
    fontSize: '12'
  64.  
    },
  65.  
    // y轴线的样式
  66.  
    axisLine: {
  67.  
    lineStyle: {
  68.  
    color: "rgba(255, 255, 255, 0.6)",
  69.  
    width: 2,
  70.  
    }
  71.  
    },
  72.  
    // y轴分割线的样式
  73.  
    splitLine: {
  74.  
    lineStyle: {
  75.  
    color: 'rgba(220, 220, 220, 0.8)',
  76.  
    width: 1
  77.  
    }
  78.  
    }
  79.  
    },
  80.  
    series: [{
  81.  
    data: [100, 90, 80, 50, 20, 5],
  82.  
    type: 'bar',
  83.  
    showBackground: true,
  84.  
    backgroundStyle: {
  85.  
    color: 'rgba(220, 220, 220, 0.8)'
  86.  
    },
  87.  
    // 修改柱形图中柱子的宽度
  88.  
    barWidth: '20%',
  89.  
    itemStyle: {
  90.  
    // 修改柱子圆角
  91.  
    barBorderRadius: 20
  92.  
    }
  93.  
    }]
  94.  
    };
  95.  
    /* 把配置项给实例对象 */
  96.  
    myChart.setOption(option);
  97.  
    /* 让图表跟随屏幕自动的去适应 */
  98.  
    window.addEventListener("resize", function() {
  99.  
    myChart.resize();
  100.  
    })
  101.  
    </script>
  102.  
    </body>
  103.  
    </html>
 

水平柱形图

第一步：查看官网示例

复制option配置


 
  1.  
    option = {
  2.  
    title: {
  3.  
    text: '世界人口总量',
  4.  
    subtext: '数据来自网络'
  5.  
    },
  6.  
    tooltip: {
  7.  
    trigger: 'axis',
  8.  
    axisPointer: {
  9.  
    type: 'shadow'
  10.  
    }
  11.  
    },
  12.  
    legend: {
  13.  
    data: ['2011年', '2012年']
  14.  
    },
  15.  
    grid: {
  16.  
    left: '3%',
  17.  
    right: '4%',
  18.  
    bottom: '3%',
  19.  
    containLabel: true
  20.  
    },
  21.  
    xAxis: {
  22.  
    type: 'value',
  23.  
    boundaryGap: [0, 0.01]
  24.  
    },
  25.  
    yAxis: {
  26.  
    type: 'category',
  27.  
    data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
  28.  
    },
  29.  
    series: [
  30.  
    {
  31.  
    name: '2011年',
  32.  
    type: 'bar',
  33.  
    data: [18203, 23489, 29034, 104970, 131744, 630230]
  34.  
    },
  35.  
    {
  36.  
    name: '2012年',
  37.  
    type: 'bar',
  38.  
    data: [19325, 23438, 31000, 121594, 134141, 681807]
  39.  
    }
  40.  
    ]
  41.  
    };
 

引入后，运行

自定义定制

  • 修改图表大小

  • 不显示x轴相关信息

  • 不显示y轴线条和刻度

  • 设置刻度标签的文本颜色

  • 设置嵌套柱形图

设置成如下图的样式：

首先将第一组柱子设置样式

设置数据显示在柱子里面

不同的柱子设置不同的颜色

设置两组y轴，将yAxis设置为一个数组，数组是两个对象，分别表示两组y轴。

完成嵌套柱形图

完整代码：


 
  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>数据可视化-ECharts</title>
  6.  
    <style type="text/css">
  7.  
    .echarts-box {
  8.  
    width: 400px;
  9.  
    height: 400px;
  10.  
    background-color: #B3D8FF;
  11.  
    }
  12.  
    </style>
  13.  
    </head>
  14.  
    <body>
  15.  
    <!-- 1.准备一个带长度和宽度的盒子 -->
  16.  
    <div class="echarts-box"></div>
  17.  
    <!-- 2.引入echarts.js -->
  18.  
    <script src="js/echarts.min.js"></script>
  19.  
    <script>
  20.  
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  21.  
    /* 3.初始化实例对象，语法：echarts.init(dom容器) */
  22.  
    var myChart = echarts.init(document.querySelector(".echarts-box"));
  23.  
    /* 4.指定配置项和数据 */
  24.  
    var option = {
  25.  
    // 修改图表位置
  26.  
    grid: {
  27.  
    top: "10%",
  28.  
    left: "22%",
  29.  
    bottom: "10%",
  30.  
    containLabel: true
  31.  
    },
  32.  
    title: {
  33.  
    text: '世界人口总量',
  34.  
    subtext: '数据来自网络'
  35.  
    },
  36.  
    tooltip: {
  37.  
    trigger: 'axis',
  38.  
    axisPointer: {
  39.  
    type: 'shadow'
  40.  
    }
  41.  
    },
  42.  
    legend: {
  43.  
    data: ['2011年', '2012年']
  44.  
    },
  45.  
    // x轴
  46.  
    xAxis: {
  47.  
    // 不显示x轴样式
  48.  
    show: false
  49.  
    },
  50.  
    // y轴
  51.  
    yAxis: [{
  52.  
    type: 'category',
  53.  
    data: ['巴西', '印尼', '美国', '印度', '中国'],
  54.  
    // 不显示y轴线条
  55.  
    axisLine: {
  56.  
    show: false
  57.  
    },
  58.  
    // 不显示刻度
  59.  
    axisTick: {
  60.  
    show: false
  61.  
    },
  62.  
    // 把刻度标签里面的文字颜色设置为白色
  63.  
    axisLabel: {
  64.  
    color: "#fff"
  65.  
    }
  66.  
    },
  67.  
    {
  68.  
    data: [702, 350, 610, 793, 664],
  69.  
    // 不显示y轴线条
  70.  
    axisLine: {
  71.  
    show: false
  72.  
    },
  73.  
    // 不显示刻度
  74.  
    axisTick: {
  75.  
    show: false
  76.  
    },
  77.  
    // 把刻度标签里面的文字颜色设置为白色
  78.  
    axisLabel: {
  79.  
    color: "#fff"
  80.  
    }
  81.  
    }
  82.  
    ],
  83.  
    series: [
  84.  
    // 第一组数据(即第一个柱子)
  85.  
    {
  86.  
    name: '条',
  87.  
    type: 'bar',
  88.  
    data: [70, 34, 60, 78, 69],
  89.  
    yAxisIndex: 0,
  90.  
    // 修改第一组柱子的圆角
  91.  
    itemStyle: {
  92.  
    barBorderRadius: 20,
  93.  
    // 次数的color可以修改柱子的颜色
  94.  
    // params是传进来的柱子对象
  95.  
    color: function(params) {
  96.  
    // console.log(params);
  97.  
    // dataIndex是当前柱子的索引号
  98.  
    return myColor[params.dataIndex];
  99.  
    }
  100.  
    },
  101.  
    // 柱子之间的距离
  102.  
    barCategoryGap: 50,
  103.  
    // 柱子的宽度
  104.  
    barWidth: 10,
  105.  
    // 显示柱子内的文字
  106.  
    label: {
  107.  
    show: true,
  108.  
    position: "inside",
  109.  
    // {c}会自动解析为数据data里面的数据
  110.  
    formaater: "{c}%"
  111.  
    }
  112.  
    },
  113.  
    // 第二组数据(即第二个柱子)
  114.  
    {
  115.  
    name: '框',
  116.  
    type: 'bar',
  117.  
    data: [100, 100, 100, 100, 100],
  118.  
    yAxisIndex: 1,
  119.  
    barCategoryGap: 50,
  120.  
    barWidth: 15,
  121.  
    itemStyle: {
  122.  
    color: "none",
  123.  
    borderColor: "#00C1DE",
  124.  
    borderWidth: 3,
  125.  
    barBorderRadius: 15
  126.  
    }
  127.  
    }
  128.  
    ]
  129.  
    };
  130.  
     
  131.  
    /* 把配置项给实例对象 */
  132.  
    myChart.setOption(option);
  133.  
    /* 让图表跟随屏幕自动的去适应 */
  134.  
    window.addEventListener("resize", function() {
  135.  
    myChart.resize();
  136.  
    })
  137.  
    </script>
  138.  
    </body>
  139.  
    </html>
 

折线图

第一步：查看官网实例