Lopwon Echarts 使用文档

2023-09-25


版本型号:Lopwon Echarts
适用程序:Typecho
皮肤类型:插件
插件作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/lopwon-echarts.html
官方演示:Lopwon Echarts实例

我要购买:6.60元/人

重要提示:付款时别忘了留下邮箱收取文件包,勿留 Gmail 邮箱。


插件说明

插件 Lopwon Echarts 依托 #Echarts 开源项目,实现数据可视化,可以将图表插入文章内容中,可以同时使用多张图表,可以选择使用(折线图、柱形图、饼形图、雷达图)等图表类型。

此外,也对博客的文章类型(分类)和标签云进行可视化图表呈现,可以直观的显示出博客的风格偏好。

Echarts 开源项目,有着非常强大的自定义功能,可以说,能想到的需求,Echarts 都有办法实现,而且,使用文档和示例也是介绍的非常详细,为了操作简便,插件 Lopwon Echarts 的大部分功能和样式,基本沿用 Echarts 的默认设置。

插件更新

2023年09月25日 发布 Lopwon Echarts


使用方法

A 部署文件

1. 将压缩包里的文件夹 LopwonEcharts 及其内部的所有文件,上传至目录 usr/plugins 中。

2. 后台》控制台》插件,找到 Lopwon Echarts 并启用。

B 配置插件

后台》控制台》插件,找到 Lopwon Echarts 并设置,依喜好设置即可。

C 创建图表

后台》管理》文章(或独立页面),打开需要编辑的文章(或独立页面),除以下提到的事项外,其余正常操作即可。

一、新增自定义字段。

1. 新增自定义字段,字段名称必须填入以 ec_ 作为前缀的自定义名称,乱填无效,如:

    ec_a
    ec_love
    ec_888
    ec_自定义名称

2. 其中,在自定义名称时,有两个特殊的字段名称需单独使用,用于引入(文章类型)和(字符云图),以下会提到:

    ec_cate 文章类型
    ec_tags 字符云图

二、输入字段值。

1. 请严格按照以下格式要求输入字段值,才能在前台正确输出:

    图表类型,图表标题,数据单位
    图表类目A,图表类目B,图表类目C
    统计项目甲|项目甲的类目A数据,项目甲的类目B数据,项目甲的类目C数据
    统计项目乙|项目乙的类目A数据,项目乙的类目B数据,项目乙的类目C数据
    统计项目丙|项目丙的类目A数据,项目丙的类目B数据,项目丙的类目C数据

3. 以上格式有上下左右的先后顺序要求:

① 第一行:第一个元素配置图表类型;第二个元素配置图表标题;第三个元素配置数据单位,元素之间使用半角逗号隔开。

② 第二行:配置图表的类目,在二维图表中,通常为横坐标(X轴)的类目名称,名称之间使用半角逗号隔开。

③ 第三行及之后的行:配置图表的项目及数据,在二维图表中,通常为纵坐标(Y轴)的项目数据,每行输出一组数据,项目名称和数据组之间使用竖线 | 隔开,数据之间使用半角逗号隔开。

④ 注意:数据组的数据个数,需要和第二行的类目数量相对应,也有先后顺序要求,见下

2. 示例:

    bar,滇西南行九天八晚,元
    第一天,第二天,第三天,第四天,第五天,第六天,第七天,第八天,第九天
    吃的|131,26,123,109,71,101,85,34,34
    住的|168,168,110,110,98,128,128,128,0
    行的|290,0,73,32,57,44,15,39,273

3. 说明,在(吃的)行中的(109)表示(第四天)的花费是:109元,其他类同。

4. 其中,图表类型有 4 个有效值,分别为:

    折线图 line
    柱形图 bar
    饼形图 pie
    雷达图 radar

5. 其中,通过更换图表类型,可以实现同一数据以不同图表类型呈现,需要注意的是,当图表类型为饼形图(pie)时,只获取一行数据(即第三行),其余行(第四行及之后的行)的数据不被统计。

6. 注意:当自定义字段名称是以上提到的两个特殊的字段名称(ec_cate 和 ec_tags)时,这两个字段的值不用录入内容,留空即可。

三、在文章中引入字段名称。

1. 此编辑页面左侧的“内容文本框”中,在合适位置插入以下指定格式的内容:

2. 格式:(id="ec_自定义名称")

3. 示例:

    (id="ec_a")
    (id="ec_love")
    (id="ec_888")
    (id="ec_cate")
    (id="ec_tags")

4. 其中:

① (id="ec_cate") 引入字段 ec_cate 输出(文章类型)图表;
② (id="ec_tags") 引入字段 ec_tags 输出(字符云图)图表;
③ 其他的对应引入各自的字段输出各自的数据图表。

E 使用技巧

1. 如何自定义图表主题?详见插件 Lopwon Echarts 设置中的(图表换个装)。
Store

6 条评论

  1. 目的地-Destination 52

    标签字符云 有点帅,还能这么用

    1. Lopwon Lopwon 博主
      @ 目的地-Destination

      已经单独把字符云做成插件 Lopwon Tags 详见 http://www.lopwon.com/lopwon-tags.html

    2. Lopwon Lopwon 博主
      @ 目的地-Destination

      这是 Echarts 的扩展功能(字符云),倒是可以单独做成插件。

  2. 点儿 19

    cool 最近发布频繁,何故

    1. Lopwon Lopwon 博主
      @ 点儿

      为人民服务。

      1. 点儿 19
        @ Lopwon

        人民欢迎你

准备下山 准备下山
Snapic Plus v5
使用 Lopwon POP 实现