在 Hexo 博客中插入 ECharts 动态图表

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

插入 ECharts 动态图表

在 12 Best Charting Libraries for Web Developers - Christopher Watkins 一文中，博主 Christopher Watkins 向我们介绍了 12 款为网页开发者推荐的绘图库。其中不乏大名鼎鼎的 Google Charts，D3.js 和 HighCharts 这样的富图表库，还有不少其他的特型图表库，它们在展示某些特定的图表时，非常出色。百度开发维护的 ECharts 当然也在其中。

ECharts 作为国产工具，在语言上对中文开发者有着天然的优势，官方文档对每一个细节、参数、配置都有详尽的说明，对于新手非常的友好。另外一个重要的方面，就是 ECharts 的图表颜值很高，默认的主题和配色可以呈现出优雅漂亮的图表。所以，我也一直选择 ECharts 作为我的网页图表绘图工具。

Hexo 中的 ECharts

npm install hexo-tag-echarts --save

注意：ECharts官网教程-[5 分钟上手 ECharts]([https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts](https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts))里的npm install echarts --save并不适合hexo博客，这种安装方式无效，请安装hexo-tag-echarts插件。
添加如下js文件

// 通过jsDelivr的CDN引入echarts
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
// 使用GL里的各种组件时需要添加，否则可不需要
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js"></script>

在markdown文件下添加echarts，格式如下

<script>
...
</script>

{% echarts 400 '85%' %}
...
{% endecharts %}

<script>中添加定义的变量和函数，若无设定则可删掉<script></script>
{% echarts 400 '85%' %}和{% endecharts %}之间添加echarts的option 。
- 参数400指定图表展示的高度为400px，85%则指定图表展示的宽度为85%，如不写明这两项参数则默认值为高度400px，宽度81%。
- title：标题组件，包含主标题和副标题。
- legend：图例组件。
- tooltip：提示框组件。
- toolbox：工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
- xAxis、yAxis：直角坐标系 grid 中的 x 轴、y轴。
- series：系列列表。每个系列通过type决定自己的图表类型。
  - series-line：折线/面积图
  - series-bar：柱状/条形图
  - series-pie：饼图
  - series-scatter：散点图
  - series-radar：雷达图
  - series-tree：树图
  - series-boxplot：箱形图
  - series-candlestick：K线图
  - series-heatmap：热力图
  - series-graph：关系图
多个图表的数据和函数可能会冲突，请注意！
直接在html中直接绘制，然后用<iframe></iframe>展示效果更佳。关于hexo的html文件渲染问题，可以参考Fluid+自定义html，主要是去掉head部分的说明。
在html绘图ECharts的格式如下：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    ...
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 刷新调整
  window.onresize = function () {
    myChart.resize();
  }
</script>Copy

部分echart需要引入其他js，如bmap、jquery等，请自行添加。
使用百度地图的api需要申请密钥(ak)，使用格式如下，注意替换FAKE_AK。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FAKE_AK"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=FAKE_AK"></script>Copy

实例

下面给出一些echarts官方实例，大多数都可以交互。

折线图Line

剩余内容已隐藏
查看完整文章以阅读更多

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

插入 ECharts 动态图表

Hexo 中的 ECharts

npm install hexo-tag-echarts --save

注意：ECharts官网教程-[5 分钟上手 ECharts]([https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts](https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts))里的npm install echarts --save并不适合hexo博客，这种安装方式无效，请安装hexo-tag-echarts插件。
添加如下js文件

// 通过jsDelivr的CDN引入echarts
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
// 使用GL里的各种组件时需要添加，否则可不需要
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js"></script>

在markdown文件下添加echarts，格式如下

<script>
...
</script>

{% echarts 400 '85%' %}
...
{% endecharts %}

<script>中添加定义的变量和函数，若无设定则可删掉<script></script>
{% echarts 400 '85%' %}和{% endecharts %}之间添加echarts的option 。
- 参数400指定图表展示的高度为400px，85%则指定图表展示的宽度为85%，如不写明这两项参数则默认值为高度400px，宽度81%。
- title：标题组件，包含主标题和副标题。
- legend：图例组件。
- tooltip：提示框组件。
- toolbox：工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
- xAxis、yAxis：直角坐标系 grid 中的 x 轴、y轴。
- series：系列列表。每个系列通过type决定自己的图表类型。
  - series-line：折线/面积图
  - series-bar：柱状/条形图
  - series-pie：饼图
  - series-scatter：散点图
  - series-radar：雷达图
  - series-tree：树图
  - series-boxplot：箱形图
  - series-candlestick：K线图
  - series-heatmap：热力图
  - series-graph：关系图
多个图表的数据和函数可能会冲突，请注意！
直接在html中直接绘制，然后用<iframe></iframe>展示效果更佳。关于hexo的html文件渲染问题，可以参考Fluid+自定义html，主要是去掉head部分的说明。
在html绘图ECharts的格式如下：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    ...
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 刷新调整
  window.onresize = function () {
    myChart.resize();
  }
</script>Copy

部分echart需要引入其他js，如bmap、jquery等，请自行添加。
使用百度地图的api需要申请密钥(ak)，使用格式如下，注意替换FAKE_AK。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FAKE_AK"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=FAKE_AK"></script>Copy

实例

下面给出一些echarts官方实例，大多数都可以交互。

折线图Line

剩余内容已隐藏
查看完整文章以阅读更多

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

插入 ECharts 动态图表

Hexo 中的 ECharts

npm install hexo-tag-echarts --save

注意：ECharts官网教程-[5 分钟上手 ECharts]([https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts](https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts))里的npm install echarts --save并不适合hexo博客，这种安装方式无效，请安装hexo-tag-echarts插件。
添加如下js文件

// 通过jsDelivr的CDN引入echarts
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
// 使用GL里的各种组件时需要添加，否则可不需要
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js"></script>

在markdown文件下添加echarts，格式如下

<script>
...
</script>

{% echarts 400 '85%' %}
...
{% endecharts %}

<script>中添加定义的变量和函数，若无设定则可删掉<script></script>
{% echarts 400 '85%' %}和{% endecharts %}之间添加echarts的option 。
- 参数400指定图表展示的高度为400px，85%则指定图表展示的宽度为85%，如不写明这两项参数则默认值为高度400px，宽度81%。
- title：标题组件，包含主标题和副标题。
- legend：图例组件。
- tooltip：提示框组件。
- toolbox：工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
- xAxis、yAxis：直角坐标系 grid 中的 x 轴、y轴。
- series：系列列表。每个系列通过type决定自己的图表类型。
  - series-line：折线/面积图
  - series-bar：柱状/条形图
  - series-pie：饼图
  - series-scatter：散点图
  - series-radar：雷达图
  - series-tree：树图
  - series-boxplot：箱形图
  - series-candlestick：K线图
  - series-heatmap：热力图
  - series-graph：关系图
多个图表的数据和函数可能会冲突，请注意！
直接在html中直接绘制，然后用<iframe></iframe>展示效果更佳。关于hexo的html文件渲染问题，可以参考Fluid+自定义html，主要是去掉head部分的说明。
在html绘图ECharts的格式如下：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    ...
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 刷新调整
  window.onresize = function () {
    myChart.resize();
  }
</script>Copy

部分echart需要引入其他js，如bmap、jquery等，请自行添加。
使用百度地图的api需要申请密钥(ak)，使用格式如下，注意替换FAKE_AK。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FAKE_AK"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=FAKE_AK"></script>Copy

实例

下面给出一些echarts官方实例，大多数都可以交互。

在 Hexo 博客中插入 ECharts 动态图表

插入 ECharts 动态图表

Hexo 中的 ECharts

实例

折线图Line

剩余内容已隐藏查看完整文章以阅读更多

在 Hexo 博客中插入 ECharts 动态图表

插入 ECharts 动态图表

Hexo 中的 ECharts

实例

折线图Line

剩余内容已隐藏查看完整文章以阅读更多

在 Hexo 博客中插入 ECharts 动态图表

插入 ECharts 动态图表

Hexo 中的 ECharts

实例

折线图Line

剩余内容已隐藏查看完整文章以阅读更多

剩余内容已隐藏
查看完整文章以阅读更多

剩余内容已隐藏
查看完整文章以阅读更多

剩余内容已隐藏
查看完整文章以阅读更多