首页 新闻 赞助 找找看

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

0
悬赏园豆: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 indices = {
name: 0,
group: 1,
id: 16
};
var schema = [
{name: 'name', index: 0},
{name: 'group', index: 1},
{name: 'protein', index: 2},
{name: 'calcium', index: 3},
{name: 'sodium', index: 4},
{name: 'fiber', index: 5},
{name: 'vitaminc', index: 6},
{name: 'potassium', index: 7},
{name: 'carbohydrate', index: 8},
{name: 'sugars', index: 9},
{name: 'fat', index: 10},
{name: 'water', index: 11},
{name: 'calories', index: 12},
{name: 'saturated', index: 13},
{name: 'monounsat', index: 14},
{name: 'polyunsat', index: 15},
{name: 'id', index: 16}];
var data=[
["Beverage, instant breakfast powder, chocolate, not reconstituted","Dairy and Egg Products",19.9,0.285,0.385,0.4,0.07690000000000001,0.947,66.2,65.8,1.4,7.4,357,0.56,0.314,0.278,27481 ],
["Beverage, instant breakfast powder, chocolate, sugar-free, not reconstituted","Dairy and Egg Products",35.8,0.5,0.717,2,0.138,1.705,41,39,5.1,7.4,358,2.162,1.189,1.027,27482 ],
["Beverage, milkshake mix, dry, not chocolate","Dairy and Egg Products",23.5,0.88,0.78,1.6,0.0012,2.2,52.9,51.3,2.6,12.8,329,2.059,0.332,0.06,27483 ],
["Butter oil, anhydrous","Dairy and Egg Products",0.28,0.004,0.002,null,0,0.005,null,null,99.48,0.24,876,61.924,28.732,3.694,27484 ],
["Butter, salted","Dairy and Egg Products",0.85,0.024,0.714,null,0,0.024,0.06,0.06,81.11,15.87,717,51.368,21.021,3.043,27485 ],
["Butter, whipped, with salt","Dairy and Egg Products",0.85,0.024,0.827,null,0,0.026,0.06,0.06,81.11,15.87,717,50.489,23.426,3.012,27486 ],
["Butter, without salt","Dairy and Egg Products",0.85,0.024,0.011,null,0,0.024,0.06,0.06,81.11,17.94,717,51.368,21.021,3.043,27487 ],
["Cheese fondue","Dairy and Egg Products",14.23,0.476,0.132,null,0,0.105,3.77,null,13.47,61.61,229,8.721,3.563,0.484,27488 ],
["Cheese food, cold pack, american","Dairy and Egg Products",19.66,0.497,0.966,null,0,0.363,8.32,null,24.46,43.12,331,15.355,7.165,0.719,27489 ],
["Cheese food, imitation","Dairy and Egg Products",22.4,0.552,1.239,null,0,0.336,8.8,8.21,1.3,63.8,137,0.81,0.38,0.048,27490 ],
["Cheese food, pasteurized process, american, with di sodium phosphate","Dairy and Egg Products",19.61,0.574,1.596,null,0,0.279,7.29,7.43,24.6,43.15,328,15.443,7.206,0.723,27491 ],
["Cheese food, pasteurized process, american, without di sodium phosphate","Dairy and Egg Products",18.4,0.57,1.265,null,0,0.291,7.83,7.43,25.18,43.21,330,14.895,7.214,1.108,27492 ],
["T.G.I. FRIDAY'S, Mac & Cheese, from kid's menu","Restaurant Foods",5.84,0.114,0.417,1,0,0.135,16.42,2.74,4.47,71.48,129,1.579,1.014,1.323,35114 ],
["T.G.I. FRIDAY'S, chicken fingers, from kids' menu","Restaurant Foods",21.52,0.038,0.524,0.9,0,0.335,12.08,0.29,13.91,49.88,260,2.656,3.448,6.874,35115 ],
["T.G.I. FRIDAY'S, classic sirloin steak","Restaurant Foods",30.61,0.007,0.194,null,0,0.382,null,null,6.95,61.04,185,2.839,2.945,0.551,35116 ],
["T.G.I. FRIDAY'S, fried mozzarella","Restaurant Foods",15.73,0.362,0.656,1.9,0,0.11,24.55,1.66,19.63,37.05,338,7.204,5.031,5.328,35117 ]];

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);

function getMaxOnExtent(data) {
var colorMax = -Infinity;
var symbolSizeMax = -Infinity;
for (var i = 0; i < data.length; i++) {
var item = data[i];
var colorVal = item[fieldIndices[config.color]];
var symbolSizeVal = item[fieldIndices[config.symbolSize]];
colorMax = Math.max(colorVal, colorMax);
symbolSizeMax = Math.max(symbolSizeVal, symbolSizeMax);
}
return {
color: colorMax,
symbolSize: symbolSizeMax
};
}

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
< >
分享
最佳答案
1

示例使用了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)
0

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

aimengyu | 园豆:202 (菜鸟二级) | 2019-09-29 14:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册