数据可视化

1 概述

1.1什么是数据可视化

（1）目的

借助于图形化的手段，清晰有效地传达与沟通信息，揭示蕴含在数据中的规律和道理

（2）使用场景

通过报表

移动端图标

大屏可视化

地理可视化

图编辑&图分析

（3）常见的数据可视化库

1.2 数据可视化项目概述

（1）目的

市场需求，学习阶段帮助

（2）技术需要

2 ECharts

2.1 简介

2.2 基本使用

2.2.1 基本步骤

（1）下载并引入echarts.js

（2）准备一个具备大小的DOM容器<div class=".box"></div>

（3）初始化echarts实例对象 var myChart = echarts.init(document.quseySelector(".box"))

（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实例对象 myChart.setOption(option);

2.2.2 定制Charts图表相关配置

（1）grid直角坐标系内绘制网格

图表中x轴y轴绘制的格子，与盒子的大小可以存在差异，通过left，right，top，bottom修改。containLabel表示刻度true/false

//containLabel:当刻度标签溢出的时候，grid区域是否包含坐标轴的刻度标签，如果为true，则显示，当left或right的位置为零，表示溢出,如果left或right位置小于标签大小，隐藏对应的范围（溢出多少隐藏多少）。

（2）xAxis：x轴和yAxis：y轴

type：设置类目类型，通过data设置类目数据/y轴value类型根据数据值自动更改

bounddaryGap：两侧留白策略

（3）color更改线条的颜色：[ ]

（4）series后面直接跟数组，数组内跟多个对象

type：类型，决定是什么类型的图表

name：系列名字，用于tooltip的显示

data：节点数据

stack：数据堆叠，第二个数据的值 = 第一个数据的值 + 第二个数据值；

指定不同的值，或者不写这个配置，就不会产生数据堆叠。

3 数据可视化项目

3.1 边框图片

（1）使用场景

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

（2）css3中，新增了border-image属性，这个属性可以满足此需求

（3）把四个角切出去，切的顺序是上右下左

（4）使用语法;border-image-source路径；

• border-image-slice边框向内偏移（裁剪的尺寸，一定不加单位，上右下左的顺序，只写一个值表示所有位置切割距离一样）；
• border-image-width图片边框的宽度（这个得加单位，这个属性默认的是border的宽度，但是调大这个属性不会挤压文字）；
• border-image-repeat图片边框（被切割后需要拉伸的部分）是否应平铺（repeat）、铺满（round）或拉伸（stretch）默认拉伸
• 边框会被边框图片替换
• 盒子没有宽高的时候，给相对方向的负值，可以拉伸盒子

为了防止变量命名冲突，将代码写在立即执行函数内部（function(){}）

（5）jQuery中clone可以克隆多个节点，会把元素的内容一起克隆

如果传入参数为true会把元素的时间一起克隆

3.2 ES6模板字符

（1）语法规范（没有引号，不容丢掉引号；可以显示换行，并且不报错）

`$(表达式)` （`我的名字是$(star.name)我的年龄是$(star.age)`）

``反勾号,tab键上方。