ECharts介绍及使用方法

首先简单介绍一下，ECharts它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

官网地址：echarts.baidu.com/

1.首先在官网 选择合适的下载版本

   http://echarts.baidu.com/download.html

2.数据可视化概述

数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。这里给大家推荐一个网站：www.echartsjs.com/zh/index.ht… JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

实例： 柱状图

option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
    },
    xAxis: [
        {type: 'category', gridIndex: 0},
        {type: 'category', gridIndex: 1}
    ],
    yAxis: [
        {gridIndex: 0},
        {gridIndex: 1}
    ],
    grid: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        // These series are in the first grid.
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // These series are in the second grid.
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
};
1234567891011121314151617181920212223242526272829303132333435

3、数据可视化概述什么是数据可视化?

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

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

4、天数据可视化的价值

数据可视化商业案例集萃：www.storagelab.org.cn/zhangdi/201…

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

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

复制代码 1 2 3 4 5 6 7 8 9 2.准备容器

<div id="main" style="width: 600px;height:400px;"></div>

3.绘制图表

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

ECharts

14、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,  

},

];

15、授⼈以渔01_Echarts 配置项查看技巧

配置项查找方式

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

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

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

16、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) 完成折线图

17、Echarts 折线图（line）详解 动态数据展示

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

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

www.echartsjs.com/zh/index.ht…

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

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

异步和同步的区别：blog.csdn.net/qq_37148705…

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<GoodsSale> goodsSalesList = null;
	try {
		goodsSalesList = goodsSaleService.listAll();
		return goodsSalesList;
	}catch (Exception e){
		logger.debug(e);
		return goodsSalesList;
	}
}

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

<!-- 列表(全部) -->
<select id="listAll" parameterType="String" resultMap="goodsSaleResultMap">
	select * from goods_sale a
</select>

d.数据库信息 goods_name表示商品名字，sales_volume表示销量