echarts炫酷统计图

1. 需求描述

需要在BI中实现如下效果的统计图

BI中没有内置这种类型的统计图,需要引用echarts网站的统计图

2. 实现思路

1、js库,echarts官网option内容

2、利用表格生产json中需要的数据

3、再客户端脚本获取表格 内容,赋值

3. 实现步骤

1、js库的上传不再具体讲述,option内容在eachrts官网可以查找到

2、下面主要讲如何实现获取 json,通过官网实例,可以知道,所需要的数据内容如下:

三个数组:

hours=["1h","2h","3h","4h","5h","6h","7h","8h"]

days=["北京","上海","广州","重庆","武汉","深圳","长沙"]

data=[[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1]

通过观察数据可以发现hours和days在界面的规律,data规律如下:二位数组代表内容为:[第一行,第一列,表元值],[第一行,第二列,表元值],[第一行,第三列,表元值]...[第二行,第一列,表元值].....[第七行,第八列,表元值]

所以聚焦 主要难度在于如何生成data二位数组~

数组生产方式如下(先通过 B2$获得C2$,再通过C2$获得C1):

C1表达式:substitute(substitute(GRID1.C2$.join(","),"[",""),"]","").split(",").select(true,asnum(@)).split(3)

C2表达式:GRID1.B2$.select(true,"["^(row()-1)^","^GRID1.B2$.find(@)^","^@^"]").join(",")

3、获取A2$,B1$,C2,赋值option数据

具体客户端脚本内容如下:

 

//自己上传到vfs资源管理器的的echarts库包

include("vfs/root/echarts/echarts.js");

 

//初始化实例

var myChart=echarts.init(document.getElementById("HHH2"));

 

var hours =<#=GRID1.B1$#>;

var days = <#=GRID1.A2$#>;

var itemLen=days.length;  ---该处为了控制页面显示效果,根据days个数,自动控制百分比占比

 

var data = <#=GRID1.C1#>;

option = {

tooltip: {

position: "top"

},

title: [],

singleAxis: [],

series: []

};

 

echarts.util.each(days, function (day, idx) {

option.title.push({

textBaseline: "middle",

top: (idx + 0.5) * 100 / itemLen + "%",

text: day

});

option.singleAxis.push({

left: 150,

type: "category",

boundaryGap: false,

data: hours,

top: (idx * 100 / itemLen + 5) + "%",

height: (100 / itemLen- 10) + "%",

axisLabel: {

interval: 2

}

});

option.series.push({

singleAxisIndex: idx,

coordinateSystem: "singleAxis",

type: "scatter",

data: [],

symbolSize: function (dataItem) {

return dataItem[1]/3 ;

}

});

});

 

echarts.util.each(data, function (dataItem) {

option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);

});

 

myChart.setOption(option);

附件列表

0

文档内容仅供参考
如果您需要解决具体问题,还可以登陆亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇ardb函数在参数联动中的应用

下一篇柱状图继承表元背景色

请先登录

创建词条

词条信息

admin
admin

超级管理员|词条创建者

1415

浏览次数:1541 次

编辑次数:2次 历史版本

更新时间:2019-12-26