echarts里显示多个小图表
2021-06-08 本文已影响0人
Frank_Fang
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src='https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js'></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id='demo' style='float: left; width: 1600px; height:600px; margin-right: 50px; border: 1px solid #ddd;'></div>
<script type='text/javascript'>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('demo'));
// demo
var option = {
title: [
{
text: '上海',
left: '12.5%',
textAlign: 'center'
},
{
text: '北京',
left: '37.5%',
textAlign: 'center'
},
{
text: '深圳',
left: '62.5%',
textAlign: 'center'
},
{
text: '香港',
left: '87.5%',
textAlign: 'center'
}
],
tooltip: {
trigger: 'axis'
},
xAxis: [
{
type: 'category',
data: ['DBS', '无限极', '前滩'],
gridIndex: 0
},
{
type: 'category',
data: ['中关村大厦', '北京大厦', '王府井大厦'],
gridIndex: 1
},
{
type: 'category',
data: ['深圳大厦', '深圳大楼', '金融中心'],
gridIndex: 2
},
{
type: 'category',
data: ['香港大楼', '香港大厦'],
gridIndex: 3
}
],
yAxis: [
{
type: 'value',
gridIndex: 0,
max: 500,
axisPointer: {
show: true,
triggerTooltip: false
}
},
{
type: 'value',
gridIndex: 1,
max: 500,
axisPointer: {
show: true,
triggerTooltip: false
}
},
{
type: 'value',
gridIndex: 2,
max: 500,
axisPointer: {
show: true,
triggerTooltip: false
}
},
{
type: 'value',
gridIndex: 3,
max: 500,
axisPointer: {
show: true,
triggerTooltip: false
}
}
],
grid: [
{
width: '21%',
top: 50,
left: '2%',
right: '23%',
bottom: 40
},
{
width: '21%',
top: 50,
left: '27%',
right: '48%',
bottom: 40
},
{
width: '21%',
top: 50,
left: '52%',
right: '73%',
bottom: 40
},
{
width: '21%',
top: 50,
left: '77%',
right: '98%',
bottom: 40
}
],
series: [
{
name: '1楼',
data: ['100', '200', '120'],
xAxisIndex: 0,
yAxisIndex: 0,
type: 'bar',
barWidth: 20,
stack: 'DBS'
},
{
name: '2楼',
data: ['100', '180', '130'],
xAxisIndex: 0,
yAxisIndex: 0,
type: 'bar',
barWidth: 20,
stack: 'DBS'
},
{
name: '1楼',
data: ['100', '170', '130'],
xAxisIndex: 1,
yAxisIndex: 1,
type: 'bar',
barWidth: 20,
stack: '中关村'
},
{
name: '2楼',
data: ['100', '130', '130'],
xAxisIndex: 1,
yAxisIndex: 1,
type: 'bar',
barWidth: 20,
stack: '中关村'
},
{
name: '3楼',
data: ['102', '156', '130'],
xAxisIndex: 1,
yAxisIndex: 1,
type: 'bar',
barWidth: 20,
stack: '中关村'
},
{
name: '1楼 ',
data: ['100', '103', '132'],
xAxisIndex: 2,
yAxisIndex: 2,
type: 'bar',
barWidth: 20,
stack: '北京大厦'
},
{
name: '2楼',
data: ['120', '121', '123'],
xAxisIndex: 2,
yAxisIndex: 2,
type: 'bar',
barWidth: 20,
stack: '北京大厦'
},
{
name: '3楼',
data: ['120', '121', '123'],
xAxisIndex: 2,
yAxisIndex: 2,
type: 'bar',
barWidth: 20,
stack: '北京大厦'
},
{
name: '1楼',
data: ['100', '120', '103'],
xAxisIndex: 2,
yAxisIndex: 2,
type: 'bar',
barWidth: 20,
stack: '深圳金融中心'
},
{
name: '1楼',
data: ['100', '200', '130'],
xAxisIndex: 3,
yAxisIndex: 3,
type: 'bar',
barWidth: 20,
stack: '香港大楼'
},
{
name: '2楼',
data: ['10', '20', '120'],
xAxisIndex: 3,
yAxisIndex: 3,
type: 'bar',
barWidth: 20,
stack: '香港大楼'
},
{
name: '3楼',
data: ['100', '20', '130'],
xAxisIndex: 3,
yAxisIndex: 3,
type: 'bar',
barWidth: 20,
stack: '香港大楼'
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>
</body>
</html>
