excerpt: ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，本文介绍如何在 Hexo 博客中使用 ECharts 插件。

ECharts使用 {#ECharts使用}

• 安装hexo-tag-echarts插件

• 注意：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文件

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

• <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的格式如下：

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

实例 {#实例}

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

折线图Line {#折线图Line}

• Stacked area chart

• Area Pieces

• Rainfall

• Line Easing Visualizing

柱状图Bar {#柱状图Bar}

• 柱状图动画延迟

• 柱状图框选

• 极坐标系下的堆叠柱状图

饼图Pie {#饼图Pie}

• Texture on Pie Chart

地理坐标/地图GEO/Map {#地理坐标-地图GEO-Map}

• Air Quality - Baidu Map

可进入页面查看

K 线图Candlestick {#K-线图Candlestick}

• Candlestick Brush

可进入页面查看

雷达图Radar {#雷达图Radar}

• Proportion of Browsers

关系图Graph {#关系图Graph}

• Graph Webkit Dep

可进入页面查看

树图Tree {#树图Tree}

• Multiple Trees

日历坐标系Calendar {#日历坐标系Calendar}

• Calendar Heatmap Horizontal

3D {#3D}

• Bar3D - Simplex Noise

可进入页面查看

• Surface Wave

pyecharts {#pyecharts}

$$
\text{py} + \text{echarts} = \text{pyecharts}
$$

是什么 {#是什么}

Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts 诞生了[^2]。

怎么用--py或jupyter {#怎么用–py或jupyter}

• pip 安装

• 生成 HTML

• Demo：pyecharts 画廊[^3]

参考 {#参考}

echarts 官网

pyecharts仓库

pyecharts 画廊

https://pxxyyz.com/posts/15698/

文章链接：
https://www.zywvvd.com/notes/hexo/website/23-hexo-echarts/hexo-echarts/