eCharts
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 |
|
min | whole number | false | 忽略比该值还小的值。 |
title | text | false | 表头。 |
option | page | false | 指定一个页面,从该页面读取json配置。 |
charttype | text | line |
|
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参数的可选值和效果如图所示:
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() { ... // 加载失败后执行的代码 });
来自灰机wiki