Hexo -23- 使用 ECharts 插件绘制炫酷图表
excerpt: ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，本文介绍如何在 Hexo 博客中使用 ECharts 插件。
ECharts使用
- 安装
hexo-tag-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@4.8.0/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>- 部分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>实例
下面给出一些echarts官方实例，大多数都可以交互。
折线图Line
柱状图Bar
饼图Pie
地理坐标/地图GEO/Map
可进入页面查看
K 线图Candlestick
可进入页面查看
雷达图Radar
关系图Graph
可进入页面查看
树图Tree
日历坐标系Calendar
3D
可进入页面查看
pyecharts
是什么
Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts 诞生了[^2]。
怎么用–py或jupyter
- pip 安装
$ pip install pyecharts -U- 生成 HTML
from pyecharts.charts import Bar
from pyecharts import options as opts
# V1 版本开始支持链式调用
bar = (
Bar()
.add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
.set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
)
bar.render()
# 不习惯链式调用的开发者依旧可以单独调用方法
bar = Bar()
bar.add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
bar.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
bar.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
bar.set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
bar.render()- Demo：pyecharts 画廊[^3]
参考
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021年9月12日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。
腾讯云开发者
