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

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

示例

参数

参数 类型 默认值 解释
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所返回的数据信息。

抛开SMW单独使用eCharts

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

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

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

1年
avatar
0

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

1年
avatar
Reasno
0

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

1年
avatar
Reasno
0

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

1年
avatar
0

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

1年
avatar
Honestleaf
0

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

1年
avatar
Honestleaf
0

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

1年
avatar
Reasno
0

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

1年
avatar
Reasno
1

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

1年