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" style="width: 600px; height: 400px;background-color: pink;"></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" style="width: 600px; height: 400px;background-color: pink;"></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）默认拉伸
posted @ 2022-02-27 17:20  Kenny_LZK  阅读(331)  评论(0)  编辑  收藏  举报