如何做出自己的 echarts ?
2017年2月19日

这集来把官方教程给出的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 }
},

结语

这集先做到这里。