数据可视化是研究如何将数据以图片或图形的方式展现的科学。
主要专注于展现，以连贯和简短的形式把大量的信息展现出来。
尽管数据可视化也能处理书面信息，它的重点还是用图片和图像的形式向观众传递信息。
ECharts是百度开发的一款可视化的开源js（JavaScript）框架
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯JavaScript的图表库
底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
丰富的图表类型
多个坐标系的支持
移动端的优化
深度的交互式数据探索
大数据量的展现
多维数据的支持以及丰富的视觉编码手段
动态数据
绚丽的特效
?
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="utf-8">
? ?<title>ECharts</title>
? ?<!--引入ECHarts文件-->
? ?<script src="echarts.js">
? ?
? ?</script>
</head>
<body>
? ?<!--为ECharts准备一个具备大小（宽高）的DOM -->
? ?<div ?id="main" style="width: 600px;height: 400px; "></div>
? ?<script type="text/javascript">
? ? ? ?//基于准备好的DOM，初始化ECharts实例
? ? ? ?var myEchart = echarts.init(document.getElementById('main'));
?
? ? ? ?//指定图表的配置项和数据
? ? ? ?var option = {
? ? ? ? ? ?title:{
? ? ? ? ? ? ? ?text:'我的第一幅ECHarts可视化图'
? ? ? ? ? },
? ? ? ? ? ?tooltip:{},
? ? ? ? ? ?legend:{
? ? ? ? ? ? ? ?data:['各产品销量情况']
? ? ? ? ? ? ? ?
? ? ? ? ? },
? ? ? ? ? ?xAxis:{
? ? ? ? ? ? ? ?data:["产品A","产品B","产品C","产品D","产品E",]
? ? ? ? ? },
? ? ? ? ? ?yAxis:{},
? ? ? ? ? ?series:[{
? ? ? ? ? ? ? ?name : '销量',
? ? ? ? ? ? ? ?type : 'bar',
? ? ? ? ? ? ? ?data:[900,700,550,1000,200]
? ? ? ? ? }]
? ? ? };
? ? ? ?//使用刚指定的配置项和数据显示图表
? ? ? ?myEchart.setOption(option);
? ?</script>
</body>
</html> ?
?title //标题设置，包括主标题和副标题
legend //图例控制
tooltip //提示框控件，它作用是在合适时机向用户提供相关信息
toolbox //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域 缩放，重置五个工具。
grid //图例内网格控制
textStyle //全局的字体样式。常常会用到文字展示，此时选择一种合适字体的样式与可视化搭配显得尤为重要。
xAxis //X轴
xAxis: {
id: '',
show: true, //是否显示x轴
gridIndex: 0, //轴所在grid索引，默认位于第一个grid
alignTicks: false, //在多个轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效
?
position: 'top', //轴的位置（top/bottom）
?
offset: 0, //轴相对于默认位置的偏移，在相同的position上有多个轴时有用
?
type: 'category', //坐标轴类型，值category/value，与y轴呼应，若x轴配置category则y轴配置value
//可选参数有四种：
//”value“,表示数值类型的轴，适用于连续型数据；
//”category“,表示类别类型的轴，适用于离散的类别型数据；
//”time“,表示时间类型的轴，适用于连续的时间序列数据；
//”log“，表示对数类型的轴，使用对数数据。
?
name: '', //坐标轴名称
?
nameLocation: 'end', //坐标轴名称显示位置，”start“,开始位置；”middle”或者“center”,中间位置；“end”，结束位置。
nameTextStyle: {}, //一般样式也很少直接修改且内容过多待更新... ...
nameGap: 15, //坐标轴名称与轴线间距离
nameRotate: 10, //坐标轴名字旋转，角度值
inverse: false, //是否是反向坐标轴
boundaryGap: ['20%', '20%'], ? // 坐标轴两边留白策略，也可以使用布尔值，true居中
min: '', //刻度最小值
max: '', //刻度最大值
scale: false, //只在数值轴中type: 'value'有效, 设置min和max后无效。是否是脱离 0 值比例。设置成true后坐标刻度不会强制包含零刻度。在双数值轴的散点图中较有用
splitNumber: 5, //坐标轴的分割段数（预估值）
minInterval: 0, //自动计算坐标轴最小间隔，例：设置成1，刻度没有小数
maxInterval: '', //自动计算坐标轴最大间隔
axisLine: {
? show: true, ? // 是否显示坐标轴轴线
? symbol: ['none', 'arrow'], ? ? // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
? symbolSize: [10, 15], ? ? // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
? lineStyle: {
? ? color: '#333', ? // 坐标轴线线的颜色
? ? width: '5', ? // 坐标轴线线宽
? ? type: 'solid', ? // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
? },
},
axisTick: {
? show: true, ? // 是否显示坐标轴刻度
? inside: true, ? ? // 坐标轴刻度是否朝内，默认朝外
? length: 5, ? //坐标轴刻度的长度 ? ? ? ?
? lineStyle: {
? ? color: '#FFF', ? ? //刻度线的颜色
? ? width: 10, ? //坐标轴刻度线宽
? ? type: 'solid', ? //坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
? },
},
axisLabel: {
? show: true, //是否显示刻度标签
? interval: '0', //坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
? inside: true, //刻度标签是否朝内，默认朝外
? rotate: 90, //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
? margin: 10, //刻度标签与轴线之间的距离
? // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
? color: '#FFF', ? // 刻度标签文字的颜色
? fontStyle: 'normal', // 字体的风格（normal无样式；italic斜体；oblique倾斜字体） ? ? ? ?
? fontWeight: 'normal', // 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
? fontSize: '20', //文字字体大小
? align: 'left', ? ? // 文字水平对齐方式，默认自动（left/center/right）
? verticalAlign: 'left', ? // 文字垂直对齐方式，默认自动（top/middle/bottom)
? lineHeight: '50', ? // 行高
? backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
},
splitLine: {
? show: true, ? // 是否显示分隔线。默认数值轴显示，类目轴不显示
? interval: '0', ? // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有 ? ? ? ?
? color: ['#ccc'], //color分隔线颜色，可设置单个颜色，也可设置颜色数组，分隔线会按数组中颜色顺序依次循环设置颜色
? width: 3, // 分隔线线宽
? type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
splitArea: {
? show: true, // 是否显示分隔区域
? interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
? areaStyle: { ? ? ? ? ?
? ? color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
? ? opacity: 1, // 图形透明度。支持从0到1的数字，为0时不绘制该图形
? },
},
data: {
? textStyle: {
? ? color: '#FFF', // 文字的颜色
? ? fontStyle: 'normal', // 文字字体的风格（normal无样式；italic斜体；oblique倾斜字体） ? ? ? ? ? ?
? ? fontWeight: 'normal', //字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
? ? fontSize: '20', // 文字字体大小
? ? align: 'left', // 文字水平对齐方式，默认自动（left/center/right）
? ? verticalAlign: 'left', // 文字垂直对齐方式，默认自动（top/middle/bottom）
? ? lineHeight: '50', // 行高
? ? backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
? }
}
}
?
?series //系列列表。每个系列通过 type 决定自己的图表类型、
color //调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
backgroundColor //背景
yAxis //Y轴
polar //极坐标
radiusAxis //极坐标系径向轴
angleAxis //极坐标系的角度轴。
radar //雷达图坐标系组件
dataZoom //图表缩放控件
dataZoom=[ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //区域缩放
? {
? ? ? id: 'dataZoomX',
? ? ? show:true, ? ? ? ? ? ? ? ? ? ? ? ? ? ? //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
? ? ? backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
? ? ? type: 'slider', ? ? ? ? ? ? ? ? ? ? ? ? //slider表示有滑动块的，inside表示内置的
? ? ? dataBackground:{ ? ? ? ? ? ? ? ? ? ? ? //数据阴影的样式。
? ? ? ? ? lineStyle:mylineStyle, ? ? ? ? ? ? //阴影的线条样式
? ? ? ? ? areaStyle:myareaStyle, ? ? ? ? ? ? //阴影的填充样式
? ? ? },
? ? ? fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
? ? ? borderColor:"#ddd", ? ? ? ? ? ? ? ? ? ? //边框颜色。
? ? ? filterMode: 'filter', ? ? ? ? ? ? ? ? ? //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //'none': 不过滤数据，只改变数轴范围。
? ? ? xAxisIndex:0, ? ? ? ? ? ? ? ? ? ? ? ? ? //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
? ? ? yAxisIndex:[0,2], ? ? ? ? ? ? ? ? ? ? ? //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
? ? ? radiusAxisIndex:3, ? ? ? ? ? ? ? ? ? ? ? //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
? ? ? angleAxisIndex:[0,2], ? ? ? ? ? ? ? ? ? //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
? ? ? ?
? ? ? ?start: 30, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //数据窗口范围的起始百分比,表示30%
? ? ? end: 70, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //数据窗口范围的结束百分比,表示70%
? ? ? ?
? ? ? startValue:10, ? ? ? ? ? ? ? ? ? ? ? ? ? //数据窗口范围的起始数值
? ? ? endValue:100, ? ? ? ? ? ? ? ? ? ? ? ? ? //数据窗口范围的结束数值。
? ? ? ?
? ? ? orient:"horizontal", ? ? ? ? ? ? ? ? ? //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
? ? ? zoomLock:false, ? ? ? ? ? ? ? ? ? ? ? ? //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
? ? ? throttle:100, ? ? ? ? ? ? ? ? ? ? ? ? ? ? //设置触发视图刷新的频率。单位为毫秒（ms）。
? ? ? zoomOnMouseWheel:true, ? ? ? ? ? ? ? ? //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
? ? ? moveOnMouseMove:true, ? ? ? ? ? ? ? ? ? //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
? ? ? left:"center", ? ? ? ? ? ? ? ? ? ? ? ? ? //组件离容器左侧的距离,'left', 'center', 'right','20%'
? ? ? ?top:"top", ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
? ? ? right:"auto", ? ? ? ? ? ? ? ? ? ? ? ? ? ? //组件离容器右侧的距离,'20%'
? ? ? bottom:"auto", ? ? ? ? ? ? ? ? ? ? ? ? ? //组件离容器下侧的距离,'20%'
? }
?
] visualMap //视觉映射组件
axisPointer //坐标轴指示器（axisPointer）的全局公用设置，设置图标的坐标轴范围
brush //区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。
geo //地理坐标系组件
parallel //平行坐标系（Parallel Coordinates） 是一种常用的可视化高维数据的图表。
parallelAxis //这个组件是平行坐标系中的坐标轴。
singleAxis //单轴。可以被应用到散点图中展现一维数据
timeline //时间轴控件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
graphic //原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group。
calendar //日历坐标系组件。
dataset //数据集，用于单独的数据集声明
aria //无障碍富互联网应用规范集
animation //是否开启动画
animationThreshold //是否开启动画的阈值，当单个系列显示
的图形数量大于这个阈值时会关闭动画。
animationDuration //初始动画的时长，支持回调函数，可以通
过每个数据返回不同的时长实现更戏剧的初始动画效果：
animationEasing //初始动画的缓动效果。
animationDelay //初始动画的延迟，支持回调函数，
animationDurationUpdate //数据更新动画的时长，支持回调函数
animationEasingUpdate //数据更新动画的缓动效果。
animationDelayUpdate //数据更新动画的延迟，支持回调函
数，
blendMode //图形的混合模式
hoverLayerThreshold //图形数量阈值
useUTC //是否使用 UTC 时间。