echarts希望两个div上下分开放置，但不知道为什么目前两个图表互相重叠，求解！
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<div id="main1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var dom = document.getElementById("main1");
var myChart = echarts.init(dom);
var app = {};
var option;
var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
$.getJSON(ROOT_PATH + '/data/asset/data/house-price-area2.json', function (data) {
var option = {
title: {
text: 'Dispersion of house price based on the area',
left: 'center',
top: 0
},
visualMap: {
min: 15202,
max: 159980,
dimension: 1,
orient: 'vertical',
right: 10,
top: 'center',
text: ['HIGH', 'LOW'],
calculable: true,
inRange: {
color: ['#f2c31a', '#24b7f2']
}
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'value'
}],
series: [{
name: 'price-area',
type: 'scatter',
symbolSize: 5,
// itemStyle: {
// normal: {
// borderWidth: 0.2,
// borderColor: '#fff'
// }
// },
data: data
}]
};
myChart.setOption(option);
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main2'));
var myChart = echarts.init(dom);
var app = {};
var option;
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 fieldIndices = schema.reduce(function (obj, item) {
obj[item.name] = item.index;
return obj;
}, {});
var groupCategories = [];
var groupColors = [];
var data;
// zlevel 为 1 的层开启尾迹特效
myChart.getZr().configLayer(1, {
motionBlur: 0.5
});
$.get(ROOT_PATH + '/data/asset/data/nutrients.json', function (originData) {
data = normalizeData(originData).slice(0, 1000);
myChart.setOption(option = getOption(data));
});
function normalizeData(originData) {
var groupMap = {};
originData.forEach(function (row) {
var groupName = row[indices.group];
if (!groupMap.hasOwnProperty(groupName)) {
groupMap[groupName] = 1;
}
});
originData.forEach(function (row) {
row.forEach(function (item, index) {
if (index !== indices.name
&& index !== indices.group
&& index !== indices.id
) {
// Convert null to zero, as all of them under unit "g".
row[index] = parseFloat(item) || 0;
}
});
});
for (var groupName in groupMap) {
if (groupMap.hasOwnProperty(groupName)) {
groupCategories.push(groupName);
}
}
var hStep = Math.round(300 / (groupCategories.length - 1));
for (var i = 0; i < groupCategories.length; i++) {
groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i));
}
return originData;
}
function getOption(data) {
return {
xAxis: {
name: 'protein',
splitLine: {show: false},
},
yAxis: {
name: 'calcium',
splitLine: {show: false},
},
visualMap: [{
show: false,
type: 'piecewise',
categories: groupCategories,
dimension: 2,
inRange: {
color: groupColors
},
outOfRange: {
color: ['#ccc']
},
top: 20,
textStyle: {
color: '#fff'
},
realtime: false
}, {
show: false,
dimension: 3,
max: 100,
inRange: {
colorLightness: [0.15, 0.6]
}
}],
series: [
{
zlevel: 1,
name: 'nutrients',
type: 'scatter',
data: data.map(function (item, idx) {
return [item[2], item[3], item[1], idx];
}),
animationThreshold: 5000,
progressiveThreshold: 5000
}
],
animationEasingUpdate: 'cubicInOut',
animationDurationUpdate: 2000
};
}
var fieldNames = schema.map(function (item) {
return item.name;
}).slice(2);
app.config = {
xAxis: 'protein',
yAxis: 'calcium',
onChange: function () {
if (data) {
myChart.setOption({
xAxis: {
name: app.config.xAxis
},
yAxis: {
name: app.config.yAxis
},
series: {
data: data.map(function (item, idx) {
return [
item[fieldIndices[app.config.xAxis]],
item[fieldIndices[app.config.yAxis]],
item[1],
idx
];
})
}
});
}
}
};
app.configParameters = {
xAxis: {
options: fieldNames
},
yAxis: {
options: fieldNames
}
};
</script>
</body>
</html>
你这个第二个echart的数据赋值到第一个div上面去了,变量不要用一样的
1.你把84行 var myChart = echarts.init(document.getElementById('main2'));改成 var myChart2 = echarts.init(document.getElementById('main2'));2.删除85行 var myChart = echarts.init(dom);
3.132行 myChart.setOption(option = getOption(data));改成myChart2.setOption(option = getOption(data));
截图
代码
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
function main1(){
var dom = document.getElementById("main1");
var myChart = echarts.init(dom);
var app = {};
var option;
var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
$.getJSON(ROOT_PATH + '/data/asset/data/house-price-area2.json', function (data) {
var option = {
title: {
text: 'Dispersion of house price based on the area',
left: 'center',
top: 0
},
visualMap: {
min: 15202,
max: 159980,
dimension: 1,
orient: 'vertical',
right: 10,
top: 'center',
text: ['HIGH', 'LOW'],
calculable: true,
inRange: {
color: ['#f2c31a', '#24b7f2']
}
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'value'
}],
series: [{
name: 'price-area',
type: 'scatter',
symbolSize: 5,
// itemStyle: {
// normal: {
// borderWidth: 0.2,
// borderColor: '#fff'
// }
// },
data: data
}]
};
myChart.setOption(option);
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
}
main1();
function main2(){
// 基于准备好的dom，初始化echarts实例
// var dom = echarts.init(document.getElementById('main2'));
var dom = document.getElementById("main2");
var myChart = echarts.init(dom);
var app = {};
var option;
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 fieldIndices = schema.reduce(function (obj, item) {
obj[item.name] = item.index;
return obj;
}, {});
var groupCategories = [];
var groupColors = [];
var data;
// zlevel 为 1 的层开启尾迹特效
myChart.getZr().configLayer(1, {
motionBlur: 0.5
});
var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
$.get(ROOT_PATH + '/data/asset/data/nutrients.json', function (originData) {
data = normalizeData(originData).slice(0, 1000);
myChart.setOption(option = getOption(data));
});
function normalizeData(originData) {
var groupMap = {};
originData.forEach(function (row) {
var groupName = row[indices.group];
if (!groupMap.hasOwnProperty(groupName)) {
groupMap[groupName] = 1;
}
});
originData.forEach(function (row) {
row.forEach(function (item, index) {
if (index !== indices.name
&& index !== indices.group
&& index !== indices.id
) {
// Convert null to zero, as all of them under unit "g".
row[index] = parseFloat(item) || 0;
}
});
});
for (var groupName in groupMap) {
if (groupMap.hasOwnProperty(groupName)) {
groupCategories.push(groupName);
}
}
var hStep = Math.round(300 / (groupCategories.length - 1));
for (var i = 0; i < groupCategories.length; i++) {
groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i));
}
return originData;
}
function getOption(data) {
return {
xAxis: {
name: 'protein',
splitLine: {show: false},
},
yAxis: {
name: 'calcium',
splitLine: {show: false},
},
visualMap: [{
show: false,
type: 'piecewise',
categories: groupCategories,
dimension: 2,
inRange: {
color: groupColors
},
outOfRange: {
color: ['#ccc']
},
top: 20,
textStyle: {
color: '#fff'
},
realtime: false
}, {
show: false,
dimension: 3,
max: 100,
inRange: {
colorLightness: [0.15, 0.6]
}
}],
series: [
{
zlevel: 1,
name: 'nutrients',
type: 'scatter',
data: data.map(function (item, idx) {
return [item[2], item[3], item[1], idx];
}),
animationThreshold: 5000,
progressiveThreshold: 5000
}
],
animationEasingUpdate: 'cubicInOut',
animationDurationUpdate: 2000
};
}
var fieldNames = schema.map(function (item) {
return item.name;
}).slice(2);
app.config = {
xAxis: 'protein',
yAxis: 'calcium',
onChange: function () {
if (data) {
myChart.setOption({
xAxis: {
name: app.config.xAxis
},
yAxis: {
name: app.config.yAxis
},
series: {
data: data.map(function (item, idx) {
return [
item[fieldIndices[app.config.xAxis]],
item[fieldIndices[app.config.yAxis]],
item[1],
idx
];
})
}
});
}
}
};
app.configParameters = {
xAxis: {
options: fieldNames
},
yAxis: {
options: fieldNames
}
};
}
main2();
</script>
</body>
</html>
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
title: [
{
text: '在线构建',
subtext: '总计 ' +565324242,
left: '30%',
textAlign: 'center'
},
{
text: '站数量：312\n\n桩数量：991',
left: '30%',
bottom:"20%",
textAlign: 'center'
},
{
text: '主题下载',
subtext:"总计 "+985756,
left: '75%',
textAlign: 'center'
}
],
grid: [
{
width: '38%',
right:0,
// bottom: '45%',
containLabel: true
},
{
containLabel: true
}
],
xAxis: {
type: 'category',
data: ['空开', '电表']
},
yAxis: {
type: 'value'
},
series: [
// 插座 环形图
{
type: 'pie',
radius: [0, '50%'],
center: ['30%', '38%'],
data: [
{
name:"jfhgs",
value:9234,
},
{
name:"sdgdgsdh",
value:3432,
},
{
name:"gdgddfww",
value:2423,
}
]
},
// 空开电电表
{
name: '在线',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [520, 302]
},
{
name: '离线',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120, 534]
},
]
};