抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

無名小栈

站点重构中

这是什么

ECharts 介绍

ECharts 是一个纯 JavaScript 图表库,底层依赖于轻量级的 Canvas 类库 ZRender,基于 BSD 开源协议,是一款非常优秀的可视化前端框架。

简单使用

  • 安装 hexo-tag-echarts 插件
    1
    npm install hexo-tag-echarts --save
  • 添加js文件

    添加到 </head> 标签前,通常是主题文件夹中名为 head.ejs 的文件

    1
    2
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js">
    </script>
  • 在 Markdown 文件中输入
    1
    2
    3
    {% echarts 400 '85%' %}
    //在此处输入 ECharts 代码
    {% endecharts %}

    参数400指定图表展示的高度为400px,85%则指定图表展示的宽度为85%,如不写明这两项参数则默认值为高度400px,宽度81%

官网链接

折线图 Line

基本折线图

折线图堆叠

雨量流量关系图

函数绘图

柱状图 Bar

堆叠柱状图

动态柱状图

饼图 Pie

基础饼图

南丁格尔玫瑰图

散点图 Scatter

基础散点图

单轴散点图

K 线图 Candlestick

基础 K 线图

雷达图 Radar

基础雷达图

自定义雷达图

漏斗图 Funnel

基础漏斗图

高级漏斗图

仪表盘 Gauge

动态仪表盘

多标题仪表盘

富文本 Rich Text

更多图表 More charts

篇幅所限,若想了解更多图表,可前往我的站点或官网查看更多实例

评论区 请大家友善讨论哦