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

文章描述了如何利用ECharts绘制3D折线图,特别是当数据来自后台接口且无固定函数关系时。为了防止不同折线首尾相连,需要在数据点间插入空值,并在端点重复值以保持端点显示。作者提供了按x轴和y轴顺序整理数据并构建连接点的Python代码示例。
摘要由CSDN通过智能技术生成

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值