echarts scatter3D 关于nutrients的dome为什么没有右上角的那个box了？

悬赏园豆：20 [已解决问题] 解决于 2019-10-08 13:41

demo网址：https://www.echartsjs.com/examples/zh/editor.html?c=scatter3d&gl=1&theme=dark

我是做科研的代码小白，这个demo与我的需求的别相符，就是可以变换XYZ轴的数据，但我想离线使用。我下下来之后，折腾了好久终于显示出来，可是不知道为什么右上角的那个box不见了，没办法更换XYZ轴的数据了。

请问哪位大神可以帮我看看问题在哪里。。。

代码：（data很多没有全放进去）

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="echarts-gl.js"></script>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript" src="dataTool.min.js"></script>
<script type="text/javascript" src="dark.js"></script>//主题
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,'dark');//黑色主题
var app = {};
option = null;

var fieldIndices = schema.reduce(function (obj, item) {
obj[item.name] = item.index;
return obj;
}, {});

var groupCategories = [];
var groupColors = [];
var data;
var fieldNames = schema.map(function (item) {
return item.name;
});
fieldNames = fieldNames.slice(2, fieldNames.length - 2);

var config = app.config = {
xAxis3D: 'protein',
yAxis3D: 'fiber',
zAxis3D: 'sodium',
color: 'fiber',
symbolSize: 'vitaminc',

onChange: function () {
    var max = getMaxOnExtent(data);
    if (data) {
        myChart.setOption({
            visualMap: [{
                max: max.color / 2
            }, {
                max: max.symbolSize / 2
            }],
            xAxis3D: {
                name: config.xAxis3D
            },
            yAxis3D: {
                name: config.yAxis3D
            },
            zAxis3D: {
                name: config.zAxis3D
            },
            series: {
                dimensions: [
                    config.xAxis3D,
                    config.yAxis3D,
                    config.yAxis3D,
                    config.color,
                    config.symbolSiz
                ],
                data: data.map(function (item, idx) {
                    return [
                        item[fieldIndices[config.xAxis3D]],
                        item[fieldIndices[config.yAxis3D]],
                        item[fieldIndices[config.zAxis3D]],
                        item[fieldIndices[config.color]],
                        item[fieldIndices[config.symbolSize]],
                        idx
                    ];
                })
            }
        });
    }
}

};
app.configParameters = {};
['xAxis3D', 'yAxis3D', 'zAxis3D', 'color', 'symbolSize'].forEach(function (fieldName) {
app.configParameters[fieldName] = {
options: fieldNames
};
});
var data;

var max = getMaxOnExtent(data);
myChart.setOption({
    tooltip: {},
    visualMap: [{
        top: 10,
        calculable: true,
        dimension: 3,
        max: max.color / 2,
        inRange: {
            color: ['#1710c0', '#0b9df0', '#00fea8', '#00ff0d', '#f5f811', '#f09a09', '#fe0300']
        },
        textStyle: {
            color: '#fff'
        }
    }, {
        bottom: 10,
        calculable: true,
        dimension: 4,
        max: max.symbolSize / 2,
        inRange: {
            symbolSize: [10, 40]
        },
        textStyle: {
            color: '#fff'
        }
    }],
    xAxis3D: {
        name: config.xAxis3D,
        type: 'value'
    },
    yAxis3D: {
        name: config.yAxis3D,
        type: 'value'
    },
    zAxis3D: {
        name: config.zAxis3D,
        type: 'value'
    },
    grid3D: {
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        axisPointer: {
            lineStyle: {
                color: '#ffbd67'
            }
        },
        viewControl: {
            // autoRotate: true
            // projection: 'orthographic'
        }
    },
    series: [{
        type: 'scatter3D',
        dimensions: [
            config.xAxis3D,
            config.yAxis3D,
            config.yAxis3D,
            config.color,
            config.symbolSiz
        ],
        data: data.map(function (item, idx) {
            return [
                item[fieldIndices[config.xAxis3D]],
                item[fieldIndices[config.yAxis3D]],
                item[fieldIndices[config.zAxis3D]],
                item[fieldIndices[config.color]],
                item[fieldIndices[config.symbolSize]],
                idx
            ];
        }),
        symbolSize: 12,
        // symbol: 'triangle',
        itemStyle: {
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.8)'
        },
        emphasis: {
            itemStyle: {
                color: '#fff'
            }
        }
    }]
});

if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>

遛个核桃骑个小矮人 | 初学一级 | 园豆：166
提问于：2019-09-29 11:28

< >

最佳答案

示例使用了dat.ui插件。可以自己实现的。
//添加dat.gui引用
<script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/dat.gui.min.js"></script>

app.configParameters = {};
['xAxis3D', 'yAxis3D', 'zAxis3D', 'color', 'symbolSize'].forEach(function (fieldName) {
app.configParameters[fieldName] = {
options: fieldNames
};
});

//查看示例源码后，加入下面的代码可以实现
var gui = new dat.GUI();
$(gui.domElement).css({position:"absolute",right:5,top:0,zIndex:1e3});
$(".right-container").append(gui.domElement);
var configParameters=app.configParameters||{};
for(var name in app.config){
var value=app.config[name];
if("onChange"!==name&&"onFinishChange"!==name){
var isColor=!1,controller;
if(configParameters[name]&&(configParameters[name].options?controller=gui.add(app.config,name,configParameters[name].options):null!=configParameters[name].min&&(controller=gui.add(app.config,name,configParameters[name].min,configParameters[name].max))),"string"==typeof obj)
try{
var colorArr=echarts.color.parse(value);
isColor=!!colorArr,isColor&&(value=echarts.color.stringify(colorArr,"rgba"))
}catch(e){
}
controller||(controller=guiisColor?"addColor":"add"),app.config.onChange&&controller.onChange(app.config.onChange),app.config.onFinishChange&&controller.onFinishChange(app.config.onFinishChange)
}
}

收获园豆：20

super_we | 菜鸟二级 |园豆：222 | 2019-09-29 18:01

可以用了，你真是天使，爱您～

遛个核桃骑个小矮人 | 园豆：166 (初学一级) | 2019-10-08 13:40

其他回答(1)

右上角的control box不是echarts的一部分，需要自己实现。

aimengyu | 园豆：202 (菜鸟二级) | 2019-09-29 14:48

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

echarts scatter3D 关于nutrients的dome为什么没有右上角的那个box了？

欢迎，请先登录或者注册。