带柱状图折线图饼状图为一体的综合展示图形报表###
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./js/echarts.min.js"></script>
<style>
.orderBox {
position: relative;
}
.elBtn {
width: 400px;
/* display: flex;
flex-direction: row;
justify-content: space-around; */
position: absolute;
right: 50px;
bottom: 0;
z-index: 999999999;
}
.elBtn>li {
list-style: none;
margin: 20px 0;
width: 50px;
text-align: center;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 2px 4px;
font-size: 12px;
cursor: pointer;
}
.elBtn>li.curt {
background: #1890ff;
color: #fff;
}
.slectFenlei {
position: relative;
left: 30%;
margin: 20px 0;
display: inline-block;
}
#myTable {
position: absolute;
right: 2px;
bottom: 46px;
max-height: 200px;
border-collapse: collapse;
margin: 10px 0;
display: flex;
flex-direction: column;
}
#myTable tbody {
display: block;
max-height: 220px;
overflow-y: scroll;
}
#myTable thead,
#myTable tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
#myTable thead {
width: calc(100% - 1em)
}
#myTable thead th {
background: #ccc;
}
#myTable tr th,
#myTable tr td {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="orderBox">
<div class="slectFenlei">
<span>请选择分类：</span>
<select name="fenLei" id="fenLei">
<option value="2002">分类1</option>
<option value="2003">分类2</option>
<option value="2004">分类3</option>
<option value="2005">分类4</option>
</select>
</div>
<div id="main" style="width: 100%;height:600px;"></div>
<!-- <ul class="elBtn">
<li data-year="2002" class="curt">分类1</li>
<li data-year="2003">分类2</li>
<li data-year="2004">分类3</li>
<li data-year="2005">分类4</li>
</ul> -->
<table width="38%" id="myTable" border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴与四十大盗</td>
</tr>
<tr>
<td>张小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>张三疯子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张刘三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
// 控制渲染的个数（柱状图）
var num = 120
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var dataMap = {};
function dataFormatter(obj) {
var pList = (function () {
var res = [];
var len = 0;
while (len < num) {
res.push((Math.random() * 9999 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
var temp;
for (var year = 2002; year <= 2005; year++) {
var max = 0;
var sum = 0;
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[year][i] = {
name: pList[i],
value: temp[i]
}
}
obj[year + 'max'] = Math.floor(max / 100) * 100;
obj[year + 'sum'] = sum;
}
return obj;
}
dataMap.dataGDP = dataFormatter(getMockData(num));
dataMap.dataPI = dataFormatter(getMockData(num));
dataMap.dataSI = dataFormatter(getMockData(num));
dataMap.dataTI = dataFormatter(getMockData(num));
dataMap.dataEstate = dataFormatter(getMockData(num));
dataMap.dataFinancial = dataFormatter(getMockData(num));
// 造假数据
function getMockData(nums) {
var obj = {}
for (var year = 2002; year <= 2005; year++) {
obj[year] = (function () {
var res = [];
var len = 0;
while (len < nums) {
res.push((Math.random() * 9999 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
return obj
}
option = {
baseOption: {
title: [{
text: '数据来自国家统计局',
x: '35%',
textAlign: 'center'
}, {
text: '主题下载',
x: '75%',
textAlign: 'center'
}, {
text: '表格展示',
x: '80%',
y: '48%',
textAlign: 'center'
}],
tooltip: {
},
legend: {
x: '10%',
data: ['预算', '实发', '预警金额']
},
calculable: true,
grid: {
width: '50%',
top: 80,
bottom: 100,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
formatter: function (params) {
return params.value.replace('\n', '');
}
}
}
}
},
dataZoom: [
{
show: true,
start: 0,
end: 15,
handleSize: 8
},
{
type: 'inside',
start: 0,
end: 100
}
],
xAxis: [
{
'type': 'category',
'axisLabel': {
'interval': 0,
formatter: function (value) {
return value.split("").join("\n");
}
},
nameTextStyle: {
fontSize: 28
},
'data': (function () {
var res = [];
var len = 0;
while (len < num) {
res.push('假数据');
len++;
}
return res;
})(),
splitLine: { show: false }
}
],
yAxis: [
{
type: 'value',
name: 'GDP（亿元）'
}
],
series: [
{ name: '预算', type: 'bar', data: dataMap.dataGDP['2002'] },
{ name: '实发', type: 'bar', data: dataMap.dataFinancial['2002'] },
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '10%'],
center: ['75%', '25%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: '直达', selected: true },
{ value: 679, name: '营销广告' },
{ value: 1548, name: '搜索引擎' }
]
},
{
name: '访问来源',
type: 'pie',
radius: ['15%', '20%'],
center: ['75%', '25%'],
label: {
normal: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
shadowBlur: 3,
shadowOffsetX: 2,
shadowOffsetY: 2,
shadowColor: '#999',
padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
fontSize: 10,
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 22,
borderRadius: [4, 4, 0, 0]
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 10,
lineHeight: 20
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
data: [
{ value: 335, name: '直达' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1048, name: '百度' },
{ value: 251, name: '谷歌' },
{ value: 147, name: '必应' },
{ value: 102, name: '其他' }
]
},
{
name: '预警金额',
type: 'line',
itemStyle: {
color: "#9300ff"
},
data: (function () {
var res = [];
var len = 0;
while (len < num) {
res.push((Math.random() * 9999 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$('#fenLei').on('change', function () {
var val = $(this).val()
option.baseOption.series[0].data = dataMap.dataGDP[val]
option.baseOption.series[1].data = dataMap.dataFinancial[val]
option.baseOption.series[2].data = [
{ value: Math.floor(Math.random() * 999), name: '直达' },
{ value: Math.floor(Math.random() * 999), name: '营销广告' },
{ value: Math.floor(Math.random() * 999), name: '搜索引擎' }
]
option.baseOption.series[3].data = [
{ value: Math.floor(Math.random() * 999), name: '直达' },
{ value: Math.floor(Math.random() * 999), name: '邮件营销' },
{ value: Math.floor(Math.random() * 999), name: '联盟广告' },
{ value: Math.floor(Math.random() * 999), name: '视频广告' },
{ value: Math.floor(Math.random() * 999), name: '百度' },
{ value: Math.floor(Math.random() * 999), name: '谷歌' },
{ value: Math.floor(Math.random() * 999), name: '必应' },
{ value: Math.floor(Math.random() * 999), name: '其他' }
]
option.baseOption.series[4].data = (function () {
var res = [];
var len = 0;
while (len < num) {
res.push((Math.random() * 9999 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
myChart.setOption(option, true)
})
$('.elBtn').on('click', 'li', function () {
$(this).addClass('curt').siblings().removeClass('curt')
var val = $(this).data('year')
option.baseOption.series[0].data = dataMap.dataGDP[val]
option.baseOption.series[1].data = dataMap.dataFinancial[val]
option.baseOption.series[2].data = [
{ value: Math.floor(Math.random() * 999), name: '直达' },
{ value: Math.floor(Math.random() * 999), name: '营销广告' },
{ value: Math.floor(Math.random() * 999), name: '搜索引擎' }
]
option.baseOption.series[3].data = [
{ value: Math.floor(Math.random() * 999), name: '直达' },
{ value: Math.floor(Math.random() * 999), name: '邮件营销' },
{ value: Math.floor(Math.random() * 999), name: '联盟广告' },
{ value: Math.floor(Math.random() * 999), name: '视频广告' },
{ value: Math.floor(Math.random() * 999), name: '百度' },
{ value: Math.floor(Math.random() * 999), name: '谷歌' },
{ value: Math.floor(Math.random() * 999), name: '必应' },
{ value: Math.floor(Math.random() * 999), name: '其他' }
]
option.baseOption.series[4].data = (function () {
var res = [];
var len = 0;
while (len < num) {
res.push((Math.random() * 9999 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
myChart.setOption(option, true)
})
</script>
</body>
</html>
