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
// 通过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,如bmapjquery等,请自行添加。
  • 使用百度地图的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

Stacked area chart

Area Pieces

Rainfall

Line Easing Visualizing

柱状图Bar

柱状图动画延迟

柱状图框选

极坐标系下的堆叠柱状图

饼图Pie

Texture on Pie Chart

地理坐标/地图GEO/Map

Air Quality - Baidu Map

可进入页面查看

K 线图Candlestick

Candlestick Brush

可进入页面查看

雷达图Radar

Proportion of Browsers

关系图Graph

Graph Webkit Dep

可进入页面查看

树图Tree

Multiple Trees

日历坐标系Calendar

Calendar Heatmap Horizontal

3D

Bar3D - Simplex Noise

可进入页面查看

Surface Wave

pyecharts

py+echarts=pyecharts

是什么

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

怎么用–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()

参考

系列教程

全部文章RSS订阅

Hexo系列

HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

  • markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe

作者: 夜法之书
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 夜法之书 !
评论
数据加载中 ...
 上一篇

阅读全文

使用nodeppt给hexo博客嵌入PPT演示
使用nodeppt给hexo博客嵌入PPT演示 使用nodeppt给hexo博客嵌入PPT演示
给网页添加PPT演示功能,一定会炫酷到你的小伙伴,这里介绍nodeppt给hexo博客添加PPT演示功能,当然PPT演示也可以独立域名访问
2022-08-11
下一篇 

阅读全文

一大堆寓意深刻的管理故事锦集
一大堆寓意深刻的管理故事锦集 一大堆寓意深刻的管理故事锦集
几十个关于管理,经营的故事。寓教于乐,寓意深刻,在自己遗忘之前,记录保存下来。包括 扁鹊三兄弟,曲突徒薪,猎人与狗等等
2022-08-07
  目录