在数据分析时代，不能仅仅依靠类似excel表格展现出数据的规律，所以需要另一种能将数据的特点更直观地体现出来的工具，甚至可以与用户交互。这种工具叫可视化工具，它能够把数据变成2D模型（折线图，柱状图...）或者3D 模型，这样这些看似杂乱无序数据就都变成清晰明了的统计结果了。
所以利用可视化工具能做些什么：
(1) 例如制作监控型报表，反应业务的实际情况，并且根据数据进行预测分析。
（2）例如展示动态数据的更新，比如时间序列数据，动态路径数据等。
2.当前的可视化工具百度的echart、蚂蚁金服G2（anv）、D3
二. echart的基本概念这里只介绍2D的简单配置，掌握了基本思路，其他配置也大同小异。
1.echart的基本组成echart 中的内容可以看作是一个个组件拼装起来,通过option这个字段将拼装的内容塞入echart的api渲染就行。
比如折线图，折线图需要 'grid'坐标系，'yAxis'y轴，'xAxis'x轴，'series'系列（这里先看作一条线），
假如要控制这条线的显示隐藏，我们需要额外的图例组件'legend' ，
假如想要得到更详细的信息，在鼠标移到这条线的时候，希望有个气泡框能体现该接触点的信息，就是'tooltip'提示框组件。
假如'xAxis'x轴数据量太大，我们希望看局部内容，可以用'dataZoom'数据区缩放组件。
有时候还需要调整组件的位置，left,right,height,bottom都是相对于dom容器，
数值： left:130表示偏离dom容器左边130px;
百分比：right: '30%表示偏离dom容器右边 ,宽度是dom容器宽度百分之40，height:'40%'是垂直方向的，所以是相对于容器高度
2.基本配置下面讲一下常用的直角坐标系图，比如折线图和柱状图相关的配置,首先将下面代码复制到下方链接的编辑框里面，这样进行参数的调配
https://www.makeapie.com/editor.html?c=xZlbAmIwbc
具体组件内容：两个直角坐标系，一个x轴，多个y轴，一个title, 有多少个series搭配多少个legend,一个dataZoom控制折线图和柱状图
option = { title: { text: '{name|主标题} {val|演示}', // 文本内容 left: 50, // 标题组件的位置 textStyle: { rich: { // 富文本的样式，可以配置对局样式 name: { // 自定义字段 fontSize: 12, color: 'black', val: { // 自定义字段 fontSize: 16, grid: [ // 第一个坐标系 height: 150, // 第二个坐标系,通过top和bottom自动计算出height top: 250, bottom: 50, xAxis: [ gridIndex: 0, // 处于第一个坐标系 // type: 'value' ,可以用min,max定义 // type:'category',type的默认值，数据匹配顺序 当前的data series.data/ dataset.source, data: ['a', 'b', 'c'], // 有data，默认type一定是category。 类目数据，在类目轴（type: 'category'）中有效。不指明data会从series.data中获取 gridIndex: 1, // 处于第2个坐标系 data: ['a', 'b', 'c'], // 有data，默认type一定是category yAxis: [ // type默认为value gridIndex: 0, // 处于第一个坐标系 name: 'y1', // type默认为value gridIndex: 1, // 处于第二个坐标系 name: 'y2', series: [ name: '柱状图1', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 data: [ 150, 224, ], // 作为y轴的数据 type: 'bar', // itemStyle: { // color: 'red' // 一般系列的样式会默认选取主题里面color的配置， // 如果这里定义了会影响到相关系列的颜色，比如legend的颜色 // 然后legend里面有个itemStyle也可以重置这里设置的颜色，最后是legend的data字段里面的itemStye // 所以legend的颜色取色data的itemStyle legend的itemStyle series的itemStyle 默认颜色 // }, xAxisIndex: 0, yAxisIndex: 0, name: '折线2', data: [150, 230, 224], type: 'line', xAxisIndex: 1, yAxisIndex: 1, tooltip: { trigger: 'axis', axisPointer: { //联系所有的x轴 link: { xAxisIndex: 'all' }, legend: { padding: [0, 50], // 设置左右两边的边距为50，上下为0 type: 'scroll', // 超出容器会使用隐藏，变成滚动状态 // itemStyle: { // 针对所有legend样式设置 // color: 'blue' // }, data: [ // 如果需要自定义legend样式才用 name: '柱状图1', // 匹配series中name为'柱状图'的系列 icon: 'rect', // itemStyle: {} // 单个legend样式设置 name: '折线2', // 匹配series中name为'柱状图'的系列 formatter: (name) = { // 可以结合富文本 return `{a|$${name}}{b|随意}`; // es6模板字符串写法，即 'a{|'+name+'}' textStyle: { rich: { a: { fontSize: 12, b: { fontSize: 20, dataZoom: [ // 放置多个dataZoom组件 xAxisIndex: [0, 1], // 控制第一和第二条x轴 type: 'inside', // 表现形式为内置 start: 0, // 一开始的数据范围起点百分比 end: 100, // 一开始的数据范围起点百分比 // startValue:100/"xx" 绝对数值定义窗口范围，如果x轴的type为category,使用100会对应数组的index,"xx"也会自动转成数组index // endValue: // 限制收缩的窗口的大小的最小和最大值 minSpan: 0, maxSpan: 100, // 是否锁定选择区域（或叫做数据窗口）的大小。true只能平移 // zoomLock: true xAxisIndex: 1, // 控制第三条x轴 type: 'slider', // 这个属性 根据不同的场景(数据量小的时候让它false)进行切换 show: true, // zoomLock: true总结一下常见的series.data和xAxis.data的对应
// xAxis为value轴的时候xAxis: { type:"value", min: 1, max: 10yAxis: { name:'y1'series: [ type:"line", data: [[0,10],[1,20],[2,30]] // data:[[x维度，y维度]...],每一个[x维度，y维度]都是一个点的数据，[0,10]代表x轴为0，y轴为10的点// xAxis为category轴的时候xAxis: { type:"category", data:["a","b","c"]yAxis: { name:'y1'series: [ type:"line", /** 等同于data: [[0,10],[1,20],[2,30]] ，此时会与xAxis.data对应 跟上面xAxis.type=value的时候也是data: [ [x维度，y维度]...]形式,每一个[x维度，y维度]代表一个点的数据 但是这里的 x维度 意义不一样， xAxis为category轴时候，如果是数值，就匹配xAxis.data数组的索引，字符串会匹配xAxis.data数组的值。 xAxis为value轴的时候，x维度是代表x轴某个值 所以 data: [10,20,30]可以写成data: [[0,10],[1,20],[2,30]]或者data: [['a',10],['b',20],['c',30]] data: [10,20,30] 3.echart中的事件3.1 echart中的事件的类型（1）一种是用户的鼠标行为，点击click，双击dblclick，鼠标悬停mouseover等，具体事件看
（2） 一种是与组件交互的行为，比如缩放dataZoom，会触发dataZoom事件，而代码中调用
dispatchAction({ type: 'dataZoom' ,start:0,end: 1})也会触发dataZoom事件
3.2 如何监听chart.on(eventName, query, (params) = {});1. chart: echart实例2. eventName: click,dataZoom等3. query：只对指定的组件的图形元素的触发回调query可以为string或者objectchart.on('click', 'series.line', function () {...});chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () { // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。4. params: // 当前点击的图形元素所属的组件名称， // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。 componentType: string, // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。 seriesType: string, // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。 seriesIndex: number, // 系列名称。当 componentType 为 'series' 时有意义。 seriesName: string, // 数据名，类目名 name: string, // 数据在传入的 data 数组中的 index dataIndex: number, value: number|Array