这集来把官方教程给出的5分钟案例，改写成我配合我自己页面样式的一个展示我自己技能成熟度的小 chart 。过程中给出各种我总结出来的技巧。

最终达成的效果可能很简单，用 CSS 自己手动写也能行。但是，我今天折腾一天，终于觉得我掌握了 Echarts 的基本技巧了，我觉得收获满满。因为我掌握了一门让数据可视化的图形语言，大数据时代这可是一门实用的手艺。

demo 即手册

Echarts 的作者林峰自己录制过一套课程的，叫 《ECharts基础教》 。我听他讲解的时候，发现很重要的一点就是，echarts 官网上放了很多 demo ，很多很多，目的就是让大家去参考的，因为实际例子比文档其实更直观，形象化的东西，用纯文字有时候说不清楚。所以，对各种参数的使用有疑问，最有效的资源就是看看案例中是怎么用的，比查 API 文档有时候更有效。

另外吐个槽：官方配置项手册 很多选项的说明不是特别清楚，很多也不给 demo ，具体的用法还要到官方的 gallery 中去自己捞例子，比较低效了。

数据驱动

Echarts 的设计思想就是数据驱动 。所谓数据驱动，意思就是所有的东西都由配置项 option 来决定。

设置水平方向

参考：http://gallery.echartsjs.com/editor.html?c=xB1nI9pZ-g

默认柱状图是垂直的，改为水平方向，只需把 xAxis 改为 yAxis ，然后 yAxis 改为 xAxis。

series 是最最重要的一个概念

一个 serie 就是一个”系列“，series 就是多个”系列“，哈哈，复数嘛。然后文档上可以看到后面接受的参数是一个数组，数组中每一项，也就是 series[i] 就是某一个具体的”系列“。

具体每一个 series 都对应啥捏，我们来在原有的基础上添加一个 serie 就知道了。添加代码，series 部分写成这样：

series: [
    {
      type: 'bar',
      data: [100, 100, 100, 100]
    },
    {
      type: 'bar',
      data: [50, 80, 66, 70]
    }
]

每个”系列“要展示成什么效果，用 type 来指定，bar 对应柱形图。其他还有”饼状图“，”河流图“等等十来种选择，文档上都有。

柱间距

柱间距 barGap 不是指的同一个系列的各个 bar 之间的距离，因为这个距离是由 bar 的数量，宽度对应整个 chart 所在的 div 的宽度而自适应出来的。

http://echarts.baidu.com/option.html#series-bar 这里有详细的介绍。barGap 有这样的特点。

在同一坐标系上，此属性会被多个 ‘bar’ 系列共享。此属性应设置于此坐标系中最后一个 ‘bar’ 系列上才会生效

所以，如果我们想要让两个柱系列重合，可以写成这样：

series: [
  {
    type: 'bar',
    data: [100, 100, 100, 100]
  },
  {
    type: 'bar',
    data: [50, 80, 76, 70],
    barGap: '-100%'
  }
]

隐藏 X/Y 轴

yAxis: {
  axisLine: {show: false},
  axisTick: {show: false}
}

对应 X 轴也是一样

xAxis: {
  axisLine: {show: false},
  axisTick: {show: false}
}

隐藏 X 轴的标注，参考 http://echarts.baidu.com/option.html#xAxis 找 axisLabel

隐藏 X 轴上的分割线，就去文档上查 splitLine 这一项。

所以最终这部分代码写成：

yAxis: {
   axisLine: {show: false},
   axisTick: {show: false}
},
xAxis: {
  axisLine: {show: false},
  axisTick: {show: false},
  splitLine: { "show": false },
  axisLabel: { show: false }
},

结语

这集先做到这里。