DatistEQ之JsChart节点应用

JsChart节点，提供一种高度灵活的自定义绘图功能，JsChart需要用户自己编写配置脚本，脚本遵循EChart代码风格，示例可以参数Charts官网。

下面以西安地铁二号线客流量分析为例，简要说明JsChart节点的使用过程。

流程

数据源由车站、上行、下行人流量三列组成。

数据源

JsChart节点中图形配置如下：

JsChart

运行时，JsChart输出的JS对象数组如下：（不用关心，节点自动生成）

var pdata = [
    {
        "车站": "北客站",
        "上行": 900,
        "下行": 150,
        "总流量": 1050
    },
    {
        "车站": "北苑",
        "上行": 1005,
        "下行": 230,
        "总流量": 1235
    },
    {
        "车站": "运动公园",
        "上行": 1100,
        "下行": 600,
        "总流量": 1700
    },
    {
        "车站": "行政中心",
        "上行": 2000,
        "下行": 1800,
        "总流量": 3800
    },
    {
        "车站": "凤城五路",
        "上行": 2800,
        "下行": 2700,
        "总流量": 5500
    },
    {
        "车站": "市图书馆",
        "上行": 4750,
        "下行": 3200,
        "总流量": 7950
    },
    {
        "车站": "大明宫西",
        "上行": 5100,
        "下行": 4800,
        "总流量": 9900
    },
    {
        "车站": "龙首原",
        "上行": 5150,
        "下行": 5800,
        "总流量": 10950
    },
    {
        "车站": "安远门",
        "上行": 5280,
        "下行": 6430,
        "总流量": 11710
    },
    {
        "车站": "北大街",
        "上行": 5500,
        "下行": 6480,
        "总流量": 11980
    },
    {
        "车站": "钟楼",
        "上行": 5800,
        "下行": 5600,
        "总流量": 11400
    },
    {
        "车站": "永宁门",
        "上行": 5600,
        "下行": 5300,
        "总流量": 10900
    },
    {
        "车站": "南稍门",
        "上行": 5400,
        "下行": 5000,
        "总流量": 10400
    },
    {
        "车站": "体育场",
        "上行": 5350,
        "下行": 4800,
        "总流量": 10150
    },
    {
        "车站": "小寨",
        "上行": 5100,
        "下行": 4550,
        "总流量": 9650
    },
    {
        "车站": "维一街",
        "上行": 4800,
        "下行": 2000,
        "总流量": 6800
    },
    {
        "车站": "会展中心",
        "上行": 4500,
        "下行": 1600,
        "总流量": 6100
    },
    {
        "车站": "三爻",
        "上行": 3100,
        "下行": 1300,
        "总流量": 4400
    },
    {
        "车站": "凤栖原",
        "上行": 1900,
        "下行": 1000,
        "总流量": 2900
    },
    {
        "车站": "航天城",
        "上行": 1500,
        "下行": 800,
        "总流量": 2300
    },
    {
        "车站": "韦曲南",
        "上行": 600,
        "下行": 300,
        "总流量": 900
    }
];

编辑器中的代码，首先通过map函数，将JS对象数组，解析成单个数组以便于后续绘图应用。绘图 option部分的配置文件，可参考Charts官网。

//前节点数据以JSON格式传入;
//当仅有一个节点时，以pdata表示
//当有多个节点时，以pdataN表示，N从0开始，如pdata0表示第一个数据源，pdata1表示第二个数据源
//实例参考：http://echarts.baidu.com/examples.html
var titles=pdata.map(a=>a.车站);
var upCounts=pdata.map(a=>a.上行);
var downCounts=pdata.map(a=>a.下行 * -1);
var totalCounts=pdata.map(a=>a.总流量);

option = {
    title: {
        text: '西安市地铁二号线客流量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['上行流量', '下行流量', '总流量']
    },
 
    yAxis: [
        {
            name: '客流量/(人次*h)',
            nameLocation: 'middle',
            nameGap: 50,
            type: 'value',
            axisLabel: {
                formatter : function(params){
                   return params > 0 ? params : params * -1;
                }
            }
        }
    ],
    grid: {
        left: 50,
        right: 30,
        top:80,
        bottom:50,
        containLabel: true
    },
    xAxis: [
        {
            name: '车站',
            nameLocation: 'middle',
            nameGap:70,
            type: 'category',
            axisTick: {
                show: false
            },
            boundaryGap: true, axisLabel: {rotate: 90, interval: 0},
            data:titles
        }
    ],
    series: [    
        {
            name: '总流量',
            type: 'line',
            step: 'middle',
            symbol: 'none',
            lineStyle: {
                color: 'red',
                width: 1
            },
            data:totalCounts
        },
        {
            name: '上行流量',
            type: 'bar',
            stack: '总量', 
            itemStyle: {
                color: 'green'
            },
            data:upCounts
        },
        {
            name: '下行流量',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                color: 'blue'
            }, 
            barWidth : 10,
            data:downCounts
        }
    ]
};

运行JsChart节点，一个酷炫的效果图就出来了。

效果图

JsChart节点，非常灵活，效果也非常好，但入门门槛相对较高，可在Echarts官网上，调试好后，再粘入JsChart节点，再接入数据即可。