⼤数据可视化技术：可视化技术概述与Echarts⼊⻔

Echarts2.0与3.0的区别

1 . 南丁格尔图设置， 2.0 roseType: ‘radius/area’; 3.0 roseType: ‘angle’,

2 . 拖拽重计算属性 ， 2.0 calculable : true/false; 3.0 已经没有了

3 . ---------------------------------------------- 3.0 echarts小程序版本(没用过)

4 . 百度地图使用方式不同;

5 . 普通样式和鼠标放上去样式写法不同， 2.0 是 lable/itemStyle/lineStyle:{ normal: {普通样式}，emphasis： {鼠标放上去样式}}

                                                            3.0  是单独有个属性emphasis：{鼠标放上去样式}

6 . 3.0可以再option：{}中设置 jquery的media，

media: [ // 这里定义了 media query 的逐条规则。
{
query: {…}, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {…},
…
}
},
{
query: {…}, // 第二个规则。
option: { // 第二个规则对应的option。
legend: {…},
…
}
},
{ // 这条里没有写规则，表示『默认』，
option: { // 即所有规则都不满足时，采纳这个option。
legend: {…},
…
}
}
]
可以多个media 用法和jquery用法相同

1.课程目标

数据可视化概念以及Echarts的基本用法

2.数据可视化概述

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

3.什么是数据可视化？

数据可视化 是指将大型数据集中数据以图形图像形式表示 并利用数据分析和开发工具发现其中未知的信息处理过程。 数据可视化是指将数据以视觉的形式来呈现，如图表或地图，以帮助人们了解这些数据的意义。通过观察数字、统计数据的转换以获得清晰的结论并不是一件容易的事。而人类大脑对视觉信息的处理优于对文本的处理——因此使用图表、图形和设计元素，数据可视化可以帮你更容易的解释数据模式、趋势、统计数据和数据相关性，而这些内容在其他呈现方式下可能难以被发现。

通俗的来讲就是让数据更直观的展示在页面上

4.经典可视化的案例

数据可视化商业案例集萃：http://www.storagelab.org.cn/zhangdi/2015/10/27/

五个历史上最有影响力的数据可视化信息图:https://www.ctocio.com/ccnews/16227.html

5.⼤数据可视化的价值

1.全方位数据解读数据可视化的过程中，企业可以根据数据的特点，360°全方位的将数据指标和维度进行组合，展现数据趋势。能够帮助企业各部门人员更深入的洞察工作中忽视的问题或者风险，将成功的经验引入分享并总结。

2.企业决策0失误企业决策人员通过分析和讨论数据结果能更快的发现数据的共同契合点，从仅有的数据中挖掘出潜在的商机，快速做出适合企业发展的有效决策。而不是通过以往自身对市场的走势判断来下决定。

3.为企业的每个工作人员提供辅助支持酷屏既可以为实施人员提供面向数据仓库的数据分析和丰富的二次开发接口，还可以为业务人员提供几十种能直接拖拉拽操作生成的大屏模板，也能让研发人员自由灵活的实现个性化功能拓展，实现组件样式或功能不受限。

4.展现企业实力企业在进行对外合作的时候，如果能用大屏展现企业现状和优势，能让合作方对企业的软硬件实力认知有很大提升，从而推进合作进程。

5.节约时间以往在进行每月，年中和年底总结的时候，各部门人员总是要花好几倍的时间去整理海量数据，然后用Excel将数据的某一个维度指标进行展示。当然不是说这种方法不好，但总归是麻烦了一些，而且很难从各个角度去分析，这样的总结分析动辄就是五六十页PPT，实在不利于领导理解工作。

6.数据可视化⼯具、案例、书籍

工具: Echarts、Sigma.js、Many Eyes等

书籍：数据可视化之美、数据可视化设计、视不可挡

7. Echarts概述

ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

8. Echarts特性介绍

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

9. 如何快速上⼿开发⼀个Echarts可视化图表

管你使用那种 js 语言，要想实现功能，最核心的就是 下面的三个步骤。引入 Echarts 之前，要引入 jquery 库

1.引入 ECharts

    
   
    


复制代码

2.准备容器

    
    


复制代码

3.绘制图表

通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

10. 如何阅读Echarts官⽅⽂档

进入echarts官网后 上面有个实例 进入官方实例

然后全局引入 之后就可以去找自己所需要的的条形图之类的实例了

11. Echarts学习必备基础知识

一、接口

echarts(enterprise charts 图标库)

二、图类

Bar：柱状图

line：折线图

Scatter：散点图

K：K线图

Pie：饼图

Radar：雷达图

Force：力导布局图

三、组件

Axis：坐标轴 Grid：网络 Polar：极坐标 Title：标题 Tooltip：提示 Legend：图例 data：值

四、基础库

zrender(canvas类库

12. Echarts3.x与Echarts2.x的区别

1、js文件：
首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需的功能构架类库，使用时只要导入一个echarts.min.js文件就可以。

2、文件导入：
在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句

接下去只要调用接口就可以了。
3、离线地图：
echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县与区县之间基本上不存在衔接问题。

另外，在echarts3中可以根据需要自主构建地图，这个服务给实际使用提供了很大的便利。

4、工具栏：
在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3里面的toolbox更丑了。

5、地图漫游工具：
在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着还是挺不错的，虽然并没有什么用。

6、坐标系:
echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组：

echarts3中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的。echarts3中，支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理坐标系（geo）。

7、Option变动：
1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。

2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。

根据官方说法，在echarts3中以前的用法也是兼容的，只是不推荐。

13. Echarts基础架构与常⻅名词术语

14. Echarts标准开发模板

    
    
    


        




复制代码

15. Echarts 柱状图（bar）详解

mytextStyle={
    color:"#333",               //文字颜色
    fontStyle:"normal",         //italic斜体  oblique倾斜
    fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
    fontFamily:"sans-serif",    //字体系列
    fontSize:18,                  //字体大小
};
mylineStyle={
    color:"#333",               //颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
    shadowColor:"red",          //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离
    shadowBlur:10,              //图形阴影的模糊大小。
    type:"solid",               //坐标轴线线的类型，solid，dashed，dotted
    width:1,                    //坐标轴线线宽
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
};
myareaStyle={
    color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
    shadowColor:"red",          //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离
    shadowBlur:10,              //图形阴影的模糊大小。
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
};
myitemStyle={
    color:"red",                 //颜色
    borderColor:"#000",         //边框颜色
    borderWidth:0,              //柱条的描边宽度，默认不描边。
    borderType:"solid",         //柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
    barBorderRadius:0,          //柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。
    shadowBlur:10,              //图形阴影的模糊大小。
    shadowColor:"#000",         //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离。
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
};
mylabel={
    show:false,                  //是否显示标签。
    position:"inside",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
    offset:[30, 40],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
    formatter:'{b}: {c}',       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
    textStyle:mytextStyle
};
mypoint={
    symbol:"pin",               //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    symbolSize:50,              //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
    symbolRotate:0,             //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
    symbolOffset:[0,0],         //标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置
    silent:false,               //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    itemStyle:{
        normal:myitemStyle,
        emphasis:myitemStyle
    }
};
myline={
    symbol:["pin","circle"],    //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    symbolSize:50,              //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
    precision:2,                //标线数值的精度，在显示平均值线的时候有用。
    silent:false,               //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    lineStyle:{
        normal:mylineStyle,
        emphasis:mylineStyle
    }
};
myarea={
    silent:false,               //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    itemStyle:{
        normal:myitemStyle,
        emphasis:myitemStyle
    }
};
series=[
{
    type:"bar",                 //柱形
    zlevel:0,                   //柱状图所有图形的 zlevel 值。
    z:2,                         //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
    silent:false,               //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
    name:"数据名称",            //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
    legendHoverLink:true,      //是否启用图例 hover 时的联动高亮。
    coordinateSystem:"cartesian2d",'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
    xAxisIndex:0,               //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
    yAxisIndex:0,               //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
    label:{                     //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
        normal:mylabel,
        emphasis:mylabel
    },
    itemStyle:{                 //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
        normal:myitemStyle,
        emphasis:myitemStyle,
    },
    stack:null,                  //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
    cursor:"pointer",           //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
    barGap:"30%",                //柱间距离，可设固定值（如 20）或者百分比（如 '30%'，表示柱子宽度的 30%）。
    barCategoryGap:"20%",       //类目间柱形距离，默认为类目间距的20%，可设固定值
    encode: {                     //可以定义 data 的哪个维度被编码成什么
        x: [3, 1, 5],              // 表示维度 3、1、5 映射到 x 轴。
        y: 2,                       // 表示维度 2 映射到 y 轴。
        tooltip: [3, 2, 4],         // 表示维度 3、2、4 会在 tooltip 中显示。
        label: 3                    // 表示 label 使用维度 3。
    },
    data: [                         //每一列称为一个『维度』。维度下标从0开始
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
    ],
    markPoint:mypoint.data=[
        {name: '最大值', type: 'max'},
        {name: '某个坐标', coord: [10, 20]},
        {name: '固定 x 像素位置', yAxis: 10, x: '90%'},
        {name: '某个屏幕坐标', x: 100, y: 100}],
    markLine:myline.data=[
        {name: '平均线',type: 'average'},                  // 支持 'average', 'min', 'max'
        {name: 'Y 轴值为 100 的水平线',yAxis: 100},
        [
            {name: '最小值到最大值', type: 'min'},         // 起点和终点的项会共用一个 name
            {type: 'max'}
        ],
        [
            {name: '两个坐标之间的标线',coord: [10, 20]},
            {coord: [20, 30]}
        ],
        [
            {yAxis: 'max',x: '90%'},                        // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
            {type: 'max'}
        ],
        [
            { name: '两个屏幕坐标之间的标线',x: 100,y: 100},
            {x: 500,y: 200}
        ]
    ],
    markArea:myarea.data=[
        [
            {name: '平均值到最大值',type: 'average'},
            {type: 'max'}
        ],

        [
            {name: '两个坐标之间的标域',coord: [10, 20]},
            {coord: [20, 30]}
        ],
        [
            {name: '60分到80分',yAxis: 60},
            {yAxis: 80}
        ],
        [
            {name: '所有数据范围区间',coord: ['min', 'min']},
            {coord: ['max', 'max']}
        ],
        [
            {name: '两个屏幕坐标之间的标域',x: 100,y: 100},
            {x: '90%',y: '10%'}
        ]
    ],
    tooltip:tooltip,  
},

];
复制代码

16. 授⼈以渔01_Echarts 配置项查看技巧

配置项查找方式

 1 在echarts官网，点击顶部菜单【文档】，在下拉菜单中点击【配置项手册】

 2 在“配置项手册”页面，有各种图形的详细配置项与使用方式介绍

 3 当需要使用某种图形，又不知道有哪些属性可以使用时，可以在此页面找到使用方式
复制代码

17. Echarts 折线图（line）详解基本配置

首先引入echarts工具
// vue文件中引入echarts工具
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
// 以下的组件按需引入
require('echarts/lib/component/tooltip')   // tooltip组件
require('echarts/lib/component/title')   //  title组件
require('echarts/lib/component/legend')  // legend组件
option配置
// option将要设置以下字段感觉就足够使用了
option: {
  legend: {},
  xAxis: {},
  yAxis: {},
  label: {},
  tooltip: {},
  series: []
}
legend字段，是为了配置下图的表现的；注意data字段的数组需要对应每条折线的名称
鼠标hover到最顶部的legend标志，可以标志对应的折线图，点击legend标志会隐藏对应的折线图
legend: {
  data: ['招商银行', '浦发银行', '广发银行', '上海银行']
},
legend
xAxis，配置x轴数据、样式、名称
xAxis: {
  type: 'category',   // 还有其他的type，可以去官网喵两眼哦
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x轴数据
  name: '日期',   // x轴名称
  // x轴名称样式
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }
},
xAxis
yAxis，配置y轴名称，样式
yAxis: {
  type: 'value',
  name: '纵轴名称',   // y轴名称
  // y轴名称样式
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }
}
yAxis
tooltip，鼠标放到折线图上展示的数据展示样式
tooltip: {
  trigger: 'axis'   // axis   item   none三个值
},
trigger: 'axis'

trigger: 'item'
series，y轴数据，每条折线的名称
series: [
  {
    name: '招商银行',
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  },
  {
    name: '浦发银行',
    data: [620, 711, 823, 934, 1445, 1456, 1178],
    type: 'line'
  },
  {
    name: '广发银行',
    data: [612, 920, 1140, 1160, 1190, 1234, 1321],
    type: 'line'
  },
  {
    name: '上海银行',
    data: [234, 320, 453, 567, 789, 999, 1200],
    type: 'line'
  }
]
html标签代码，注意要先写好div的宽度和高度，否则这折线图展示不出来
// 折线图显示在这个div中，

渲染折线图
let myChart = echarts.init(document.getElementById('myChart'))
myChart.setOption(this.option)
完成折线图


复制代码

18. Echarts 折线图（line）详解 动态数据展示

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

1、echarts官网地址 上面有很多实例，也可以在线定制你需要的模板，非常方便

https://www.echartsjs.com/zh/index.html

2、使用时需要先引入echarts对应的js（在官网有对应的js包）

 
 

3、使用ajax获取数据并使用echarts工具展示
注意： ajax的async属性 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行，我这里使用的是同步请求。

异步和同步的区别：https://blog.csdn.net/qq_37148705/article/details/102912934

a.前端jsp页面展示

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



    
    <%@ include file="../system/admin/top.jsp"%>
    
    



    
    

    

    




b.controller层，返回list集合

	@RequestMapping(value = { "/getgoodsall" }, method = {RequestMethod.GET }, produces = {JSON_UTF8})
	@ResponseBody
	public List getGoodsAll(){
		List goodsSalesList = null;
		try {
			goodsSalesList = goodsSaleService.listAll();
			return goodsSalesList;
		}catch (Exception e){
			logger.debug(e);
			return goodsSalesList;
		}
	}

c.mapper这里表示查询数据库的全部

	
	
		select * from goods_sale a
	
1
2
3
4
d.数据库信息 goods_name表示商品名字，sales_volume表示销量