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	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参数的可选值和效果如图所示：

createchart参数

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

mw.config.get('chartIndex');

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

单独使用eCharts

eCharts零件

ECharts零件：进行了封装的ECharts零件，可以一键安装

在JS中的调用

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

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

目录

示例

参数