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节点，再接入数据即可。
网友评论