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: ,
group: 1,
id: 16
};
var schema = [
{name: 'name', index: },
{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 = ; 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>
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/430/viewspace-3156501/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
json字符串修改
下一篇：
js 如何获取手机的设备信息
请登录后发表评论
登录
全部评论
