JS 数据可视化

Posted A-L-Kun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 数据可视化相关的知识，希望对你有一定的参考价值。

目录

数据可视化

一、 什么是数据可视化

1、 概念

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

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

2、 常见的数据可视化库

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

3、 小结

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

数据可视化在互联网公司中经常用于通用数据报表、移动端图表、大屏可视化、图编辑等

数据可视化库有很多，这里主要学习 ECharts

二、 ECharts

1、 ECharts 简介

ECharts 是一个使用 JS 实现的开源可可视化库，可以流畅的运行在 PC 端和移动端上面，兼容当前绝大多数浏览器，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表

优点：

  • 丰富的可视化类型
  • 多种数据格式支持
  • 流数据的支持
  • 移动端优化
  • 跨平台使用
  • 绚丽的特效
  • 详细的文档说明

ECharts 能满足绝大多数可视化图标实现，使用方便，功能强大，是实现数据可视化的最优选择之一

2、 ECharts 基本使用

2.1 使用五部曲

  1. 下载并引入 echarts.js 文件 --> 图表依赖库

    下载文件地址：https://cdn.staticfile.org/echarts/4.7.0/echarts.js

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

  2. 准备一个具备大小的 DOM 容器 -- > 生成的图片会放入这个容器内

    <div id="main" ></div>

  3. 初始化 echarts 实例对象 --> 实例化 echarts 对象

    // 初始化 echarts 实例化对象
var myChart = echarts.init(document.querySelector("#main"));

  4. 指定配置项和数据 --> 根据具体需求修改配置选项

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

  5. 将配置项设置给 echarts 实例对象 --> 让 echarts 对象根据修好的配置生效

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

2.2 选择不同类型的图表

步骤：

官网 -> 实例 -> 官方实例

只需要把配置数据修改过来就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入文件 -->
    <script src="./dist/js/echarts.js"></script>
</head>

<body>
    <!-- 准备盒子 -->
    <div id="main" ></div>
    <script>
        // 实例化对象
        var mychart = echarts.init(document.querySelector("#main"));
        // 配置数据
        var option = 
            legend: 
                top: \'bottom\'
            ,
            toolbox: 
                show: true,
                feature: 
                    mark:  show: true ,
                    dataView:  show: true, readOnly: false ,
                    restore:  show: true ,
                    saveAsImage:  show: true 
                
            ,
            series: [
                
                    name: \'Nightingale Chart\',
                    type: \'pie\',
                    radius: [50, 250],
                    center: [\'50%\', \'50%\'],
                    roseType: \'area\',
                    itemStyle: 
                        borderRadius: 8
                    ,
                    data: [
                         value: 40, name: \'rose 1\' ,
                         value: 38, name: \'rose 2\' ,
                         value: 32, name: \'rose 3\' ,
                         value: 30, name: \'rose 4\' ,
                         value: 28, name: \'rose 5\' ,
                         value: 26, name: \'rose 6\' ,
                         value: 22, name: \'rose 7\' ,
                         value: 18, name: \'rose 8\' 
                    ]
                
            ]
        ;
        mychart.setOption(option);
    </script>
</body>
</html>

如果需要制作类似的图表，只需要修改相关配置数据

2.3 相关配置

title: 标题组件
tooltip: 提示框组件
legend: 图例组件
toolbox: 工具栏
grid: 直角坐标系内绘制网格
xAxis: 直角坐标系 grid 中的 X 轴
yAxis: 直角坐标系 grid 中的 y 轴
series: 系列列表，每个系列通过 type 决定自己的图表类型
color: 调色盘颜色列表

其他内容请通过查阅文档了解根据需求修改配置

2.4 系列列表

series：系列列表

参数：

  • type：图表类型

  • name：系列名称，用于 tooltip显示，lengend 的图例筛选变化

  • stack：数据堆叠，如果设置相同值，则会数据堆叠

    • 数据堆叠：第二个数据值 = 第一个数据值 + 第二个数据值

      ​ 第三个数据值 = 第二个数据值 + 第三个数据值

      ​ 依次叠加

      如果给 stack 指定不同值或者去掉这个属性则不会发生数据堆叠

  • data：添加的数据

三、 样式处理

1、 边框图片

1.1 使用场景

盒子大小不一，但是边框样式相同，此时就需要边框图片来完成

为了实现丰富多彩的边框效果，在 C3 中，新增了 border-image 属性，这个新增属性允许指定一副图像作为元素的边框

1.2 边框图片切图

把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕

按照顺时针顺序切图

1.3 边框图片语法

属性 描述
border-image-source 用在边框的图片路径
border-image-slice 图片内边框向内偏移（剪裁的尺寸，不要加单位）
border-image-width 图片边框的宽度（需要加单位）（不是边框宽度而是边框图片宽度）
border-image-repeat 图片边框是否应铺平（repeat）、铺满（round）、拉伸（stretch）默认拉伸

本文来自博客园，作者：A-L-Kun，转载请注明原文链接：https://www.cnblogs.com/liuzhongkun/p/15942815.html

以上是关于JS 数据可视化的主要内容，如果未能解决你的问题，请参考以下文章

flexible.js数据可视化

初识 D3.js ：打造专属可视化

前端数据可视化echarts.js使用指南

开源Gio.js：一个基于 Three.js 的 Web3D 地球数据可视化库

前端数据可视化echarts.js使用指南

使用d3.js调用地图api 进行数据可视化