本文最后更新于:2024年5月7日 下午
excerpt: ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求,本文介绍如何在 Hexo 博客中使用 ECharts 插件。
ECharts使用
- 安装
hexo-tag-echarts
插件
1 |
|
-
注意: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文件
1 |
|
- 在markdown文件下添加echarts,格式如下
1 |
|
<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的格式如下:
1 |
|
- 部分echart需要引入其他js,如
bmap
、jquery
等,请自行添加。 - 使用百度地图的api需要申请密钥(ak),使用格式如下,注意替换
FAKE_AK
。
1 |
|
实例
下面给出一些echarts官方实例,大多数都可以交互。
折线图Line
柱状图Bar
饼图Pie
地理坐标/地图GEO/Map
可进入页面查看
K 线图Candlestick
可进入页面查看
雷达图Radar
关系图Graph
可进入页面查看
树图Tree
日历坐标系Calendar
3D
可进入页面查看
pyecharts
$$
\text{py} + \text{echarts} = \text{pyecharts}
$$
是什么
Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而 Python 是一门富有表达力的语言,很适合用于数据处理。当数据分析遇上数据可视化时,pyecharts 诞生了[^2]。
怎么用–py或jupyter
- pip 安装
1 |
|
- 生成 HTML
1 |
|
- Demo:pyecharts 画廊[^3]
参考
https://pxxyyz.com/posts/15698/
文章链接:
https://www.zywvvd.com/notes/hexo/website/23-hexo-echarts/hexo-echarts/
“觉得不错的话,给点打赏吧 ୧(๑•̀⌄•́๑)૭”
微信支付
支付宝支付