什么是数据可视化?

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

数据可视化的应用场景

通用报表、移动端图表、大屏可视化、图编辑&图分析、地理可视化等。

常见的可视化库

  • D3.js 目前Web 端评价最高的 Javascript可视化工具库(入手难)
  • ECharts.js 百度出品的一个开源 Javascript 数据可视化库
  • Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
  • AntV 蚂蚁金服全新一代数据可视化解决方案

Echarts简介

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼

容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形ZRender，

提供直观，交互丰富，可高度个性化定制的数据可视化图表。


Echarts的基本使用

1.下载并引入echarts.js文件

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

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

<div class="box" style="width:500px; height:500px"></div>

3.初始化echarts实例对象

var myCharts = echarts.init(document.querySelector(".box"));

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

var option = {
            title: {
                text: 'ECharts 入门实例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

myCharts.setOption(option)

数据可视化界面 html源码 数据可视化js_数据

在完成以上步骤后,我们还需要定制echarts的相关配置来实现自己的图表需求。这里列举一些常见的配置项,了解更多参考官网。

echarts相关配置项

  • title：标题组件
  • tooltip：提示框组件
  • legend：图例组件
  • toolbox: 工具栏
  • grid：直角坐标系内绘图网格
  • xAxis：直角坐标系 grid 中的 x 轴
  • yAxis：直角坐标系 grid 中的 y 轴
  • series: 系列列表
  • color：调色盘颜色列表

示例:

var option = {

            // 标题组件，包含主标题和副标题
            title: {
                text: '我的折线图'
            },
            // 提示框组件()
            tooltip: {
                trigger: 'axis'
            },
            // 图例组件(图例组件展现了不同系列的标记(symbol)，颜色和名字。)
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            // 直角坐标系内绘图网格
            grid: {
                // 网格的大小(位置)
                left: '3%',
                right: '4%',
                bottom: '3%',
                // 当刻度标签溢出的时候,grid区域是否包含坐标轴的刻度标签
                containLabel: true
            },
            // 工具栏(内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具)
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            // 直角坐标系 grid 中的 x 轴
            xAxis: {
                // 类目轴  可通过 xAxis.data 设置类目数据
                type: 'category',
                // 坐标轴两边留白策略
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            // 直角坐标系 grid 中的 y 轴
            yAxis: {
                // 数值轴，适用于连续数据
                type: 'value'
            },
            // color: 调色盘颜色列表

            // 系列列表
            series: [
                {
                    // 系列名称(用于tooltip显示,legend的图例筛选变化等)
                    name: 'Email',
                    // 图表类型(如:line 折线图 bar柱形图等)
                    type: 'line',
                    // 数据堆叠(如果设置相同,则会数据堆叠) 数据堆叠:第二个数据值 = 第一个数据值 + 第二个数据值  第三个数据值 = 第二个数据值 + 第三个数据值..依次叠加
                    // 如果stack指定不同值或者去掉,则不会发生数据堆叠
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };