ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

在SMW中直接使用

示例

使用SMW直接查询

{{#ask:[[Category:更新日志]]
|?版本
|limit=200
|mainlabel=-
|format=echarts
|charttype=bar
|distribution=true
|createchart=true
|title=插件更新次数
}}
{{#ask:[[Category:更新日志]]
|?版本
|mainlabel=-
|format=echarts
|charttype=line
|theme=dark
|distribution=true
|title=插件更新次数
}}
{{#ask:[[Category:更新日志]]
|?版本
|mainlabel=-
|format=echarts
|charttype=pie
|theme=roma
|distribution=true
|title=插件更新次数
}}


{{#ask:[[Category:更新日志]]
|?版本
|mainlabel=-
|format=echarts
|charttype=radar
|distribution=true
|theme=infographic
|title=插件更新次数
}}

参数

参数 类型 默认值 解释
distribution true/false false 不展示所有数值,而是计算并展示每个数值出现的次数。
distributionsort text none 依照出现次数排序。
distributionlimit whole number false 出现次数。
aggregation text subject
  • subject: 把每个结果中所有属性的值加起来。
  • property: 把多个结果中相同属性的值加起来。
min whole number false 忽略比该值还小的值。
title text false 表头。
option page false 指定一个页面,从该页面读取json配置。
charttype text line
  • line:线图
  • bar:柱状图
  • pie:饼图
  • radar:雷达图
theme text 参见下方示例
width whole number 85% 图表宽度。可以是百分比或整数。
height whole number 400 图表高度。
createchart bool true 参见下文。

option参数详解

Echarts在实际使用中还有很多非常复杂的参数,可以实现高度的自定义。但是如果将所有参数罗列至此,则必然十分臃肿。option参数可以指定一个页面,告诉函数解析器去该页面读取更多关于该表的配置。此配置文件为json格式,形如:

{
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "none"
        }
    },
    "xAxis": {
        "data": [
            "驯鹿",
            "火箭",
            "飞机",
            "高铁",
            "轮船",
            "汽车",
            "跑步",
            "步行"
        ],
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "axisLabel": {
            "textStyle": {
                "color": "#e54035"
            }
        }
    },
    "yAxis": {
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "axisLabel": {
            "show": false
        }
    },
    "color": [
        "#e54035"
    ],
    "series": [
        {
            "name": "hill",
            "type": "pictorialBar",
            "barCategoryGap": "-130%",
            "symbol": "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            "itemStyle": {
                "normal": {
                    "opacity": 0.5
                },
                "emphasis": {
                    "opacity": 1
                }
            },
            "data": [
                12,
                60,
                25,
                18,
                12,
                9,
                2,
                1
            ],
            "z": 10
        }
    ]
}

echarts官网上,你还可以找到很多官方配置好的示例,直接拷贝到页面中,用option参数调用就可以了。

theme参数详解

theme参数的可选值和效果如图所示:

Theme-echarts.png

createchart参数

如果觉得还不满足,可以将createchart参数设为false,然后通过javascript自行操作表单绘制。你可以在

mw.config.get('chartIndex');

获得SMW所返回的数据信息。

单独使用eCharts

通过灰机的零件机制,也可以脱离SMW使用ECharts,对mongoDB数据进行封装

eCharts零件

在Lua中调用

需要先require一个module local ECharts = require("Module:ECharts") 然后构造一个符合ECharts标准的table,参考下面的例子

local Example = {}

local ECharts = require("Module:ECharts")

function Example.showECharts(frame)
    return ECharts.build({
        id = "example1",
        title = "ECharts demo (lua)",
        width = "890px",
        option = {
            title = {
                text = "ECharts 入门示例"
            },
            legend = {
                data = {"销量"}
            },
            xAxis = {
                data = {"衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"}
            },
            yAxis = {
                type = "value"
            },
            series = {{
                name = "销量",
                type = "bar",
                data = {5, 20, 36, 10, 10, 20}
            }}
        }
    })
end

return Example

当然,其中的data={}部分,可以来自mongoDB的查询


在JS中的调用

灰机的eCharts只是Semantic result format的扩展之一。抛开SMW,完全可以用JS处理eCharts。需要加载库可以

mw.loader.using('ext.HuijiMiddleware.echarts', function() {
    echarts.init() ... // 加载成功后执行的代码
}, function() {
    ... // 加载失败后执行的代码
});

在MW的wikitext中以模板直接调用

在 MediaWiki 源码编辑器中使用

{{ECharts
|id=example2
|title=ECharts demo (wikitext)
|width=890px
|option=
{
    "title": {
        "text": "ECharts 入门示例"
    },
    "legend": {
        "data": ["销量"]
    },
    "xAxis": {
        "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    "yAxis": {
	    "type": "value"
    },
    "series": [{
        "name": "销量",
        "type": "bar",
        "data": [5, 20, 36, 10, 10, 20]
    }]
}
}}
avatar
avatar
Reasno
0

上边是手误已经改过来了。

5年
avatar
0

@Reasno
.load().done()有问题
.using()则没问题……

5年
avatar
Reasno
0

.load()本来就不返回promise,.using()才返回。可以参见https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.loader

5年
avatar
Reasno
0

上边是手误已经改过来了。

5年
avatar
0

感谢Reasno大大!!!赞美灰机!!!感动QAQQQQQ

5年
avatar
Honestleaf
0

示例显示不出来啊,控制台里有报错说资源加载失败。

5年
avatar
Honestleaf
0

重新加载了几次之后出来了……

5年
avatar
Reasno
0

回复@Honestleaf:刚更新了cdn 需要刷缓存 

5年
avatar
Reasno
1

这个例子比较简单 以后更新一些复杂的

5年