3D echarts 点位报表展示

最新推荐文章于 2024-12-02 10:31:50 发布

weixin_30698297

最新推荐文章于 2024-12-02 10:31:50 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/Javawang/p/11131328.html

本文详细介绍了如何使用 Echarts 实现 3D Surface 图形，包括准备 Echarts 的多种方式，如从官网下载、GitHub 获取、npm 安装及 cdn 引入等。并提供了一个具体的 3D Surface 图实例代码，展示了如何设置 tooltip、visualMap、xAxis3D、yAxis3D、zAxis3D 和 grid3D 等配置项。

一，准备工作
1）获取Echarts

以下为官网推荐的几种获取 ECharts方式：

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

我是采用的第一种方式，直接去官网下载的。下载页面为http://echarts.baidu.com/download.html

话不多说直接上代码

var option = {
        tooltip: {},
        backgroundColor: '#fff',
        visualMap: {
            show: true,
            dimension: 2,
            min: -10,
            max: 10,
            text:['高','低'],
            calculable : true,
            realtime: true,
            inRange: {
                color: ['#ffcd88','#fabd67','#eba84c','#dc9534','#cf831b','#c07102','#9c5a00']
            }
        },
        xAxis3D: {
            type: 'value',
            name:'X'
        },
        yAxis3D: {
            type: 'value',
            name:'Y'
        },
        zAxis3D: {
            type: 'value',
            name:'Z',
            minInterval: 1,
            min:0,
            max:10
        },
        grid3D: {
            boxWidth:200,
            boxDepth:150,
            viewControl: {
                //projection: 'orthographic',
                rotateSensitivity: [1,1],
                distance:250,
                minAlpha:0,
                alpha:30,
                beta:0
            }
        },
        series: [{
            type: 'surface',
            wireframe: {
                // show: false
            },
            name:'001',
            data:[{
                name:'1,1',
                value:[0,0,5]
            },{
                name:'1,2',
                value:[1,0,5]
            },{
                name:'1,3',
                value:[2,0,5]
            },{
                name:'2,1',
                value:[0,1,5]
            },{
                name:'2,2',
                value:[1,1,5]
            },{
                name:'2,3',
                value:[2,1,5]
            },{
                name:'3,1',
                value:[0,2,5]
            },{
                name:'3,2',
                value:[1,2,5]
            },{
                name:'3,3',
                value:[2,2,5]
            }]
        }]
    };