首页 > 其他分享> 文章详细

JS 数据可视化

2022-02-27 17:35:47 阅读：204 来源： 互联网

标签：name ECharts 边框可视化 JS 数据 echarts

数据可视化

数据可视化

一、什么是数据可视化

1、概念

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

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

2、常见的数据可视化库

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

3、小结

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

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

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

二、 ECharts

1、 ECharts 简介

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

优点：

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

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

2、 ECharts 基本使用

2.1 使用五部曲

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

下载文件地址：https://cdn.staticfile.org/echarts/4.7.0/echarts.js
```
<script src="./dist/js/echarts.js"></script>
```
准备一个具备大小的 DOM 容器 -- > 生成的图片会放入这个容器内
```
<div id="main" style="width: 600px; height: 400px;background-color: pink;"></div>
```

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

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

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

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

将配置项设置给 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）默认拉伸

标签：name,ECharts,边框,可视化,JS,数据,echarts
来源： https://www.cnblogs.com/liuzhongkun/p/15942815.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9