利用Echarts画3D线框图一些细节

1.使用的类型

3D折线图,可以去官网上下载示例改一下就行

2..数据构成

数据实际上是三维点的集合,所以我的点是从后台接口传过来的,而且我的z和xy没有函数关系,所以不能像示例那样写function,但是看示例的代码,其实就是一堆点的列表

3.连线方式

按照点的顺序进行连线

4.细节问题

由于线框图中可能出现多条折线,所以不同折线之间不能首尾相连,于是需要在数据点中间插入空值,而且echart的识别方式是必须两端都有值他才会画出来这个点,所以在插入空值之后还需要在折线的端点处再插入一个端点的重复值,这样才不会丢失端点

由于需要画线框图,所有只需要把点按x轴的顺序整理一遍,再按y轴顺序整体一遍即可,后端接口数据处理部分如下,data是二维的表,表示xy轴,z轴是数据值

def draw_data(h,all):
    data = pd.DataFrame()
    for i in range(len(h)):
        for j in range(len(all[i])):
            data.loc[i,'节点'+str(j+1)]=all[i][j][0]
    # 将数据转换为三元组
    result0 = []#按x轴连接
    for j in range(data.shape[1]):
        for i in range(data.shape[0]):
            value = data.iloc[i,j]
            if i == 0:#echart默认只连接两边都不为空的点,这边是为了补充右边的点
                result0.append((i + 2, j + 1, value))
            result0.append((i + 2, j + 1, value))
            if i == data.shape[0]-1:#echart默认只连接两边都不为空的点,这边是为了补充左边的点
                result0.append((i + 2, j + 1, value))
        result0.append((None, None, None))
    result1 = []#按y轴连接
    for i in range(data.shape[0]):
        for j in range(data.shape[1]):
            value = data.iloc[i,j]
            if j == 0:#echart默认只连接两边都不为空的点,这边是为了补充右边的点
                result1.append((i + 2, j + 1, value))
            result1.append((i + 2, j + 1, value))
            if j == data.shape[1]-1:#echart默认只连接两边都不为空的点,这边是为了补充左边的点
                result1.append((i + 2, j + 1, value))
        result1.append((None, None, None))#加空是为了将两条线的前后之间多余的连线断开

    # 输出结果
    return result0,result1

你可能感兴趣的:(echarts,前端,javascript)