在blog里使用echarts图表

最近使用echarts时踩了好几个坑，让我心态一度蹦极，不过摸爬滚打+搜索引擎算是把问题解决的差不多了。本文做个记录。

0 什么是ECharts

Apache Echarts是基于Javascript的开源可视化图表库，可以让你通过几行代码实现美观优雅的可视化图表构建。ECharts的一个显著特点就是非常美观，也正是这一点，才让我抛弃了Markdown的表格而转用这个（ 主要是Markdown对表格的支持实在不够看的，连合并单元格都不行；ECharts虽然主要是用来做可视化图表的，不过做普通表格也不算大材小用，谁不喜欢花里胡哨的东西呢XD ）

ECharts最早是由百度的团队开发并开源的，所以官方对中文支持非常好，官方的示例和文档都很详细。尤其文档给出的例子都很美观，很酷炫。

1 如何在Hexo中使用ECharts

已经有开发者开发了的ECharts的Hexo插件，所以我们可以简单的安装并按说明操作使用即可。

在Hexo中插入ECharts动态图表 - KChen's Blog

这篇文章说的已经比较清楚了，使用npm命令安装对应插件，然后在文章中使用tag来绘制ECharts图表。

Code

{% echarts 600 '90%' %}
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Email',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      data: [862, 1018, 964, 1026, 1679, 1600, 1570],
      emphasis: {
        focus: 'series'
      },
      markLine: {
        lineStyle: {
          type: 'dashed'
        },
        data: [[{ type: 'min' }, { type: 'max' }]]
      }
    },
    {
      name: 'Baidu',
      type: 'bar',
      barWidth: 5,
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [620, 732, 701, 734, 1090, 1130, 1120]
    },
    {
      name: 'Google',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 290, 230, 220]
    },
    {
      name: 'Bing',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [60, 72, 71, 74, 190, 130, 110]
    },
    {
      name: 'Others',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [62, 82, 91, 84, 109, 110, 120]
    }
  ]
};
{% endecharts %}

可以看到，结果非常不错，动画效果和图表自身的美观度都很好，而且是支持交互的。

上面的表格是我从官方示例里找的一个例子，里面还有更多的例子可供参考。同时上方文章的作者也提到了百度还有一个平台叫图说，是专门用来设计这种可视化动态图表的，使用的技术就是ECharts。可以直接可视化编辑，不用去写代码。

注意：中间tag里填入的代码是 option = {…} ，但是有时候会发现很多复杂图表都是提前定义了一些变量的，这些定义变量的步骤不包括在option内，于是不能简单地复制黏贴使用。

2 具体操作时我遇到的各种问题和解决方法

好吧，这部分才是重点。毕竟教程看起来简明扼要，但是我自己实操时确实麻烦频出。

问题：

已经安装好了 hexo-tag-echarts3 插件，并且教程中给出的示例图表可以正常显示，但在使用日历图时出现问题，加载不出来？

解决方法：

教程中给出的插件版本有点过时了，引用的css文件是版本较老的3.8.0版本，目前的最新版本已经是5.4.1了。同时插件加载的样式文件是简略版（ echarts.common.js ），对一些少用的表格可能不支持，要换为完整版（ echarts.min.js ）才能正常使用所有图表，当然引入更多资源会减慢加载速度，需自行取舍。

打开 /根目录/node_modules/hexo_tag_echarts3/template.html ，把

<script src="https://cdn.bootcdn.net/echarts/3.8.0/echarts.common.js"></script>

修改为

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

然后即可正常使用图表。

问题：

有些图表能使用，有些用不了？

解决方法：

不能使用的图表通常是提前定义变量和使用函数的图表，在使用ECharts图表时会引用一遍上面提到的模板文件，所以md文件里tag里输入的部分是 option={…} 的内容，而 var data=[{…}] 等定义变量的内容不能加到这里面，所以会导致缺乏定义变量报错。

方法是直接使用 <script></script> 来引入option以外的内容，因为md文件是可以直接使用html语言的。例如：

Code

<script type="text/javascript">
## 下面填入函数和定义变量的部分
let xAxisData = [];
let data1 = [];
let data2 = [];
let data3 = [];
let data4 = [];
for (let i = 0; i < 10; i++) {
  xAxisData.push('Class' + i);
  data1.push(+(Math.random() * 2).toFixed(2));
  data2.push(+(Math.random() * 5).toFixed(2));
  data3.push(+(Math.random() + 0.3).toFixed(2));
  data4.push(+Math.random().toFixed(2));
}
var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};
</script>

只要先通过这种方式引入定义变量和函数的部分，再正常地使用echarts的tag输入option以内的内容就可以正常显示图表了。

问题：

怎么更换ECharts的主题？

解决方法：

ECharts提供了多种主题可供选择。当然其实默认配置就挺好看的，不过能整花里胡哨当然要整XD

给的几个主题都很好看，而且不满意还可以自己调整，给的调整项目也是非常细致。

确定之后下载js文件，会给出使用提示：

大致思路没问题，但是在Hexo上使用有一些细节要注意。首先是在html中引用，在 /根目录/node_modules/hexo_tag_echarts3/template.html 中添加：

<script type="text/javascript" src="aaa/xxx.js"></script>

其中src后面的部分就是你刚刚下载的主题js文件的存放地址。

然后还是在这个文件中修改：

var myChart = echarts.init(document.getElementById('<%- id %>'), 'xxx');

后面xxx的部分就是你下载的主题js文件的名字，对应填入。

每当你在文章/页面中加入ECharts图表时，都会套用一遍这个模板，所以相对地址就是从你使用图表的文章/页面到主题js文件的地址。注意别填错了。（ 我填这个地址改了好久:( ）

目前遇到的问题就是这些，折腾了我几乎快大半天的时间。但是成果还是很酷的。

但是如果想做个图出来还是挺麻烦的，目前没找到什么合适的生成器（ 百度图说那个支持的图表种类太少了 ），还是只能去研究代码。