利用Echarts画3D线框图一些细节-Toy模板网

这篇具有很好参考价值的文章主要介绍了利用Echarts画3D线框图一些细节。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.使用的类型

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

2..数据构成

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

3.连线方式

按照点的顺序进行连线

4.细节问题

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

由于需要画线框图，所有只需要把点按x轴的顺序整理一遍，再按y轴顺序整体一遍即可，后端接口数据处理部分如下，data是二维的表，表示xy轴，z轴是数据值文章来源地址https://www.toymoban.com/news/detail-531268.html

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画3D线框图一些细节的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！