前端时常会遇到这样的问题，有一个单独的模块用作统计图，将多个折线或者柱状图，混合使用，下面的例子是用ajax+json模拟了调用接口实现echarts多个统计图显示。
样式布局暂时就不放在上面了，以下是从项目里面复制过来的一个小的demo，代码仅供参考。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page-container">
<!-- 统计图模块 -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2 col-sm-2 col-xs-2" style="width: 21%">
<div class="charts2">
<div id="main1" style="width: 300px;height: 180px;"></div>
</div>
</div>
<div class="col-md-5 col-sm-5 col-xs-5" style="width: 39%;">
<div class="charts4">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px; height: 200px;"></div>
</div>
<div class="charts5">
<div id="main2" style="width: 500px; height: 200px;"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 charts6">
<div id="main3" style="width: 500px;height: 200px;"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 bottom">
<div class="col-md-7 col-sm-7 col-xs-7 charts7">
<div id="main4" style=" height: 200px;"></div>
</div>
<div class="col-md-5 col-sm-5 col-xs-5 charts8">
<div id="main5" style="width: 600px; height: 200px;"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
alert(JSON.stringify(data))
aFun(data.echatX, data.echatY);
bFun(data);
cFun(data.echatX, data.echatY);
dFun(data.echatX, data.echatY);
eFun(data.echatX, data.echatY);
fFun(data.echatX, data.echatY);
},
});
//
var aChart = echarts.init(document.getElementById('main'));
function aFun(x_data, y_data) {
// 指定图表的配置项和数据
aChart.setOption({
title: {},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
splitLine: { show: false },
/* 改变x轴颜色 */
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
data: x_data,
},
yAxis: {
splitLine: { show: false },
type: 'value',
scale: true,
name: '心率值',
max: 150,
min: 0,
splitNumber: 5,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
},
series: [{
name: '巡检达标率',
type: 'bar',
// 设置柱状图大小
barWidth: 20,
// 设置柱状图渐变颜色
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#1268f3" // 0% 处的颜色
}, {
offset: 0.6,
color: "#08a4fa" // 60% 处的颜色
}, {
offset: 1,
color: "#01ccfe" // 100% 处的颜色
}], false)
}
},
data: y_data,
}]
});
}
//
var bChart = echarts.init(document.getElementById('main1'));
function bFun(param) {
// 指定图表的配置项和数据
bChart.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [{
name: '统计人数',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
b: {
fontSize: 16,
lineHeight: 33
},
}
}
},
data: [
/* { value: 12, name: '管理', itemStyle: { color: '#5f4b9c' } },
{ value: 3, name: '炼钢工', itemStyle: { color: '#2e73ba' } },
{ value: 4, name: '操作工', itemStyle: { color: '#7aa83a' } },*/
{
value: param.peopleOutline,
name: '在线',
itemStyle: {
color: '#005eff'
}
},
{ value: param.peopleOnline, name: '离线', itemStyle: { color: '#ff9194' } },
]
}]
});
}
// 基于准备好的dom，初始化echarts实例
var cChart = echarts.init(document.getElementById('main2'));
function cFun(x_data, y_data) {
// 指定图表的配置项和数据
cChart.setOption({
title: {
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['近七日收益']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
splitLine: { show: false },
// 改变x轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
type: 'category',
boundaryGap: false,
data: x_data,
},
yAxis: {
splitLine: { show: false },
type: 'value',
scale: true,
name: '心率值',
max: 150,
min: 0,
splitNumber: 5,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
},
series: [
{
name: '',
type: 'line',
symbol: 'circle', // 折线点设置为实心点
symbolSize: 6, // 折线点的大小
itemStyle: {
normal: {
color: "#1bdaf8", // 折线点的颜色
lineStyle: {
color: "#0d427e" // 折线的颜色
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#0e4b7a" // 0% 处的颜色
}, {
offset: 0.6,
color: "#0d3f70" // 60% 处的颜色
}, {
offset: 1,
color: "#0c3367" // 100% 处的颜色
}], false)
}
},
stack: '总量',
data: y_data
}
]
});
}
// 基于准备好的dom，初始化echarts实例
var dChart = echarts.init(document.getElementById('main3'));
// 指定图表的配置项和数据
function dFun(x_data, y_data) {
dChart.setOption({
title: {
left: 'left',
text: '概率',
show: false
},
tooltip: {
trigger: 'axis',
formatter: '{a}:{c}',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
show: false,
top: '30',
bottom: '60',
right: '60',
left: '60'
},
legend: {
show: true,
selectedMode: 'single', // 设置显示单一图例的图形，点击可切换
bottom: 10,
left: 50,
textStyle: {
color: '#666',
fontSize: 12
},
itemGap: 20,
data: ['设备一', '设备二', '设备三'],
inactiveColor: '#ccc'
},
xAxis: {
splitLine: { show: false },
type: 'category',
data: x_data,
axisPointer: {
type: 'shadow'
},
// 改变x轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
axisTick: {
show: true,
interval: 0
},
},
// 设置两个y轴，左边显示数量，右边显示概率
yAxis: [{
splitLine: { show: false },
type: 'value',
name: '数量',
max: 1000,
min: 0,
show: true,
interval: 500,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
},
// 右边显示概率
{
splitLine: { show: false },
type: 'value',
name: '概率',
min: 0,
max: 100,
interval: 10,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
axisLabel: {
formatter: '{value} %'
}
}
],
// 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
series: [{
name: '设备一',
type: 'bar',
symbol: 'circle', // 折线点设置为实心点
symbolSize: 6, // 折线点的大小
itemStyle: {
normal: {
color: "#1bdaf8", // 折线点的颜色
lineStyle: {
color: "#0d427e" // 折线的颜色
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#0e4b7a" // 0% 处的颜色
}, {
offset: 0.6,
color: "#0d3f70" // 60% 处的颜色
}, {
offset: 1,
color: "#0c3367" // 100% 处的颜色
}], false)
}
},
data: y_data,
barWidth: '50%',
},
{
name: '设备一',
type: 'line',
symbol: 'circle', // 折线点设置为实心点
symbolSize: 6, // 折线点的大小
itemStyle: {
normal: {
color: "#1bdaf8", // 折线点的颜色
lineStyle: {
color: "#0d427e" // 折线的颜色
}
}
},
yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
data: y_data,
symbolSize: 10,
itemStyle: {
normal: {
color: "#DDA0DD"
}
}
},
]
});
}
// 基于准备好的dom，初始化echarts实例
var eChart = echarts.init(document.getElementById('main4'));
// 指定图表的配置项和数据
function eFun(x_data, y_data) {
eChart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['近七日收益']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
splitLine: { show: false },
// 改变x轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
type: 'category',
boundaryGap: false,
data: x_data,
},
yAxis: {
splitLine: { show: false },
type: 'value',
scale: true,
name: '心率值',
max: 150,
min: 0,
splitNumber: 10,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
},
series: [
{
name: '近七日收益',
type: 'line',
symbol: 'circle', // 折线点设置为实心点
symbolSize: 6, // 折线点的大小
itemStyle: {
normal: {
color: "#1bdaf8", // 折线点的颜色
lineStyle: {
color: "#0d427e" // 折线的颜色
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#0e4b7a" // 0% 处的颜色
}, {
offset: 0.6,
color: "#0d3f70" // 60% 处的颜色
}, {
offset: 1,
color: "#0c3367" // 100% 处的颜色
}], false)
}
},
stack: '总量',
data: y_data,
}
]
});
}
var fChart = echarts.init(document.getElementById('main5'));
// 指定图表的配置项和数据
function fFun(x_data, y_data) {
fChart.setOption({
title: {
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
splitLine: { show: false },
// 改变x轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
data: x_data,
},
yAxis: {
splitLine: { show: false },
type: 'value',
scale: true,
name: '心率值',
max: 150,
min: 0,
splitNumber: 10,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
},
series: [{
name: '巡检达标率',
type: 'bar',
// 设置柱状图大小
barWidth: 20,
// 设置柱状图渐变颜色
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#e12251" // 0% 处的颜色
}, {
offset: 0.6,
color: "#df635a" // 60% 处的颜色
}, {
offset: 1,
color: "#e79363" // 100% 处的颜色
}], false)
}
},
data: y_data,
}]
});
}
</script>
</body>
</html>
test.json
{
"echatX": [
"2019-07-02",
"2019-07-03",
"2019-07-04",
"2019-07-05",
"2019-07-06",
"2019-07-07",
"2019-07-08",
"2019-07-09",
"2019-07-10",
"2019-07-11",
"2019-07-12",
"2019-07-13",
"2019-07-14",
"2019-07-15"
],
"echatY": [
501,210,123,333,445,157,151,369,101,101,350,435,153,100
],
"echatY2": [
80,40,13,36,57,77,41,39,61,31,60,73,33,50
],
"peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
}
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。
