最近在实习期间，接手了一个数据搜索项目，需要我从后台调取数据，并将之用折线图直方图显示出来，并且可以将多组数据绘制在同一张图表上进行比对。部门大佬推荐我使用Echarts.js这个库，原因是它免费、好学、功能齐全，作者是百度团队，有中文API中文社区可以参考。这么漂亮的库，不学一下也太亏了⑧

官网教程附在这里：5 分钟上手 ECharts

一、引入Echarts.js与初始化一个简单的图表

1、引入echarts.min.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2、创建一个放置图标的容器，需要确定好宽高哦

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="chartBox" style=" width : 600px ;  height : 500px ; border : 1px solid #aaa"></div>
</body>

3、在<script>中调用echarts.init('dom元素')来初始化一个echarts实例。

<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('myChart'));

4、接着创建一个对象option，里面存放着实例myChart的数据与配置

        var option = {
            title: {
                text: '我的第一个Echarts图表'    //图表的title
            },
            legend: {
                data:['销量','收入']     //图例,可以通过点击图例控制图表隐藏或显示某一指标
            },
            xAxis: {  //横坐标轴配置
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},   //纵坐标轴配置
            series: [{   //系列，这个数组可以存放多个对象，每个对象就是一组同质的数据，如销量、收入、支出。
                name: '销量',   //当前这组数据的名称
                type: 'bar',   //当前这组数据以什么样的形式展现。bar：条形图；line：折线图；pie：饼图，除此之外还有散点图、雷达图等等很多
                data: [5, 20, 36, 10, 10, 20]  //当前组数据具体值
            },{
                name : '收入',
                type : 'line',
                data : [10 , 20 , 40 , 20 , 25 , 15] 
            }]
        };

5、调用实例myChart的setOption()方法，将option这个对象指定到自己身上

        myChart.setOption(option);

6、接下来，一个简单的条形图就绘制成功了！

我的第一个Echarts图表

二、学习方式

下图是Echarts官网的实例库。比起翻看密密麻麻的文档，我更喜欢直接看实例，遇到不懂得配置再去查文档，这样比较有针对性的学习。

官网实例

实例网址奉上：
进入官方实例
 进入用户上传实例
这上面两个网页中，每一个实例都可以打开，分析/修改源代码，查看效果，非常好用。

三、下面就进入实例分析环节吧~

实例分析一、某地区降水量与蒸发量统计图

点我进入实例地址
先介绍一下这份统计图要学习的内容：

1、title配置
2、提示框配置
3、图例配置
4、工具栏配置
5、X轴与Y轴配置
6、系列series配置

下面是这幅图表的演示：

某地区降水量与蒸发量统计图

代码：

option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};

分析：

1、title：标题组件。可以为图表设置主标题副标题。是一个对象，可以存放以下属性：

show：boolean类型，是否显示标题，默认为true。
text：string类型，设置主标题内容，支持/n换行。
subtext：string类型，设置副标题内容，也支持/n换行。
link、sublink：string类型，为标题/副标题添加超链接。
target、subtarget：string类型，指定窗口打开标题/副标题的链接。默认值：blank，新窗口打开；可改为self，在当前窗口打开。
textStyle、subtextStyle：设置标题/副标题样式，是一个对象，主要有以下属性：
- color：设置字体颜色
- fontStyle：设置字体风格，string类型，默认为'normal'，可以改为：'italic'斜体字体、'oblique'如果文字没有斜体时，使用这个使其显示倾斜效果。（'italic'是一种字体，但是这种字体的设计可能没有包含某些生僻字。这时要使用'oblique'。'italic'是斜体字体；'oblique'是倾斜的文字。）
- fontWeight：设置字体粗细,string类型，默认normal，可以改为：bold、bolder、lighter、100、200、300、400...
- fontFamily：设置字体系列，string类型，默认' sans-serif '，还可以改为 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei'...
- fontSize：设置字体大小，number类型，默认为12 。
- align、verticalAlign：设置水平/垂直对齐方式，string类型，默认值为auto，可修改为：left center right / top middle bottom
- lineHeight：设置行高，number类型。
- ...还有设置边框、阴影等不是很常用的属性
itemGap：设置主标题与副标题的间距，number类型
left、top、right、bottom：设置标题的位置，string或number类型。值可以是数值，代表像素；也可以是字符串 ' 20% ' 。另外left与top也支持 'left' 'center' 'right' / 'top' 'middle' 'bottom'
backgroundColor：设置标题背景颜色，类型为color，默认为'transparent' 透明。
...还有一些边框、阴影等不常用属性

2、tooltip：提示框组件。当鼠标悬停在图表某一位置时，弹出气泡框显示当前位置的数据。

提示框组件

tooltip对象可以设置以下属性：

show：是否显示提示框组件，boolean类型，默认为true
trigger：设置触发类型，可选值有：'item' 'axis' 'none' ，默认为none（不触发）。
- item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
- axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。（两者区别看下图）

trigger设置为item时

trigger设置为axis时

trigger：'axis' 的正确操作

3、legend：图例组件

图例组件展现了不同系列（即不同组数据，如支出系列、收入系列等）的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
下图功能就是通过legend配置的：

legend控制哪些系列不显示

legend对象中配置的最重要的属性就是data，它是一个数组，用于存放图例所需数据，如图例的名字、图标：

如果不对样式做自定义，可以直接data : [ '蒸发量' , '降水量' ] ,图例中的这些名字与系列的name一致。（‘系列’在后面讲到）
如果想要更换图例图标、更换颜色等，可以采用
data : [ {name: xxx , icon: xxx, textStyle: xxx },{ name: xxx , icon: xxx, textStyle: xxx }... ]这种对象数组的形式。
- name ：图例项的名称，应等于某系列的name值
- icon：图例项的 icon。ECharts 提供了：
  - 'circle'：圆角正方形（不是正圆）
  - 'rect' ：矩形
  - 'roundRect'：圆角矩形
  - 'triangle'：三角
  - 'diamond'：菱形
  - 'pin'：正圆
  - 'arrow'：箭头形
  - 'none'：无icon
  - 还可以自定义图片路径、矢量路径，但是不是太懂这种路径怎么来~不过预设的应该够用啦！

与data属性平行的还有：

left 、top、right、left: 控制图例组件的位置。值可以是固定数值、字符串'20%'百分比，left 与 top 还可以设置 left center right / top middle bottom
orient：用于控制图例列表的布局方向。有两个值可选：
- 'horizontal' 水平排布
- 'vertical' 垂直排布
itemGap：图例之间的间隔。水平排布的横向间隔，垂直排布的是纵向间隔。
backgroundColor：图例组件背景色
除此之外还有对多页图例、特殊样式的设置。具体用法等遇到再查文档呗

4、toolBox：工具栏组件，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

下图功能就是通过配置toolBox实现的：

toolBox实现工具栏

toolBox对象可以设置下面这些属性：

show：是否显示工具栏组件
orent：工具栏 icon 的布局朝向。可选值也是： 'horizontal' 水平排布； 'vertical' 垂直排布
itemSize：工具栏icon的大小，默认15px
showTitle：是否在鼠标悬停的时候显示每个工具 icon 的title。默认为true
left、top、right、left：控制工具栏位置，用法与之前的相同。
feature： 各工具配置项。 feature是一个对象，可配置如下属性：
1. saveAsImage：保存为图片工具。类型为object：
- show：是否显示该工具，默认为true
- type: 保存的图片格式。支持 'png' 和 'jpeg'。默认值为'png'
- name: 保存的文件名称，默认使用title标题组件中的text作为名称。
- pixelRatio: 保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2。
1. restore: 配置项还原工具。类型为object：
  - show：是否显示该工具，默认为true
2. dataView：数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新（修改完数据点击数据视图下面的刷新按钮）。类型为object：
  - show：是否显示该工具，默认为true
  - readOnly：是否不可编辑（只读）。默认为false
3. dataZoom：数据区域缩放工具。目前只支持直角坐标系的缩放。类型为object：
  - show：是否显示该工具
  - xAxisIndex / yAxisIndex : 通过设置false，使dataZoom工具不控制x轴/y轴，什么意思呢？看图看图：

情形1：当不管xAxisIndex / yAxisIndex时，我们可以用鼠标随意划出一片区域进行放大，即dataZoom既控制X轴也控制Y轴：

xAxisIndex ` / `yAxisIndex 全部默认为true

情形2：当设置xAxisIndex : false 时，dataZoom就不再控制X轴了，鼠标划出的矩形区域宽度固定，高度跟随鼠标

xAxisIndex : false

情形3：当设置yAxisIndex : false 时，dataZoom就不再控制Y轴了，鼠标划出的矩形区域高度固定，宽度跟随鼠标

yAxisIndex : false

magicType：图表类型切换工具。类型为object：
- show：是否显示该工具，默认为true
  -type：启用的图表类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。
  图示折线图与柱状图的堆叠模式 / 平铺模式：

折线图与柱状图的堆叠模式 / 平铺模式

5、xAxis与YAxis ：直角坐标系 grid 中的 X 轴Y轴

show ：是否显示X轴，默认为true
type：坐标轴类型。可选：
- 'value'：数值轴，适用于连续数据。
- 'category'：类目轴，适用于离散的类目数据，为该类型时必须通过data设置类目数据。
- 'time'：时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
- 'log'：对数轴，适用于对数数据。
name：坐标轴名称。如：横坐标表示月份
nameLocation：坐标轴名称位置。默认'end'，可选：'start'、'middle' 或者 'center'
nameTextStyle：坐标轴名称的样式配置。是一个对象，内部可以对字体颜色、风格、粗细等进行配置
nameGap：坐标轴名称与轴线之间的距离，默认15
min ：坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
max：坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
minInterval：自动计算的坐标轴最小间隔大小（注意是这里的间隔不是距离长短，而是两值之间相差的数值）。例如可以设置成1保证坐标轴分割刻度显示成整数。
maxInterval：自动计算的坐标轴最大间隔大小。例如，是时间轴时可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。
axisLine：坐标轴轴线相关设置。都是一些基础样式的设置，很简单，用到的时候直接看文档就好啦，点击进入文档
axisTick：坐标轴刻度相关设置。
axisaxisLabel：坐标轴刻度标签的相关设置。
splitLine：坐标轴在grid区域中的分隔线。
data：类目数据，在类目轴 type：category 时有效。

6、series：系列，它是一个数组，里面的元素是一个对象，每个对象就是一组数据的所有信息。

其实一个'系列'就是一组数据，每个系列通过 type 决定自己的图表类型。例如在一张图表上，同时显示降水量与温度，一般降水量以柱状图表示，温度以折线图表示。那就在series中存放两个对象，一个是降雨量，type设置为bar；一个是温度，type设置为line。
本例中的配置：

series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },{.....}
       ]

name:当前组数据的name（与legend图例一致）
type:当前组数据以哪种图表类型展示，可以是：line 折线图， bar 条形图， pie 饼图， scatter 散点图， radar 雷达图 ....还有很多我见都没见过的类型
data: 具体数据，是一个数组，依次存放与横坐标对应的数据
smooth：是否平滑曲线显示。默认为false
markPoint :图表标注，是一个对象，内部属性如下：
- symbol：标记的图形。可选值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。不过我发现 'pin' 是水滴状，更好看一些，其他形状不搭~~
- symbolSize：标记大小，默认为50
- data：标记的数据数组。通过设置type和name来设置要标记哪些特殊信息。
  也可以通过下面这种形式，把具体的某个坐标作为标记点

markPoint : {
         data : [  { name: '某个坐标' , coord: [10, 20] }  ]
}

markLine与markPoint相似，就不到赘述了。markLine文档位置点这里

第一个实例就写到这儿吧，好像还是罗列了很多文档上的内容......

补充：最近整理了一些教程资源，包括慕课网的实战、金职位等等，当然有关Echarts.js的课程也少不了，如果有需要就联系我吧！wx：nanke951221

WechatIMG14.jpeg

大家加油，好好学习好好工作～

Echarts.js数据可视化插件入门