bootstrap标签页tab切换 每个切换成不同的echarts曲线图
bootstrap标签页和echarts曲线图
项目中遇到的需求是点击不同的气体温度，查看不同的echarts曲线图，用的框架是bootstrap，采用的是框架里面的标签页，先看下效果
html
**
整个的曲线图的数据是从后台获取的数据，一个接口返回了所有的曲线的数据，我设置了一个全局变量去保存，后台返回的数据，后台返回的数据比较多，所以循环遍历。保存了多个变量去保存数据，下面就是js代码，这个也包括了响应式的，这段代码是获取数据的
// 温度的数据
var arrwendu = []
// 水位的数据
var arrshuiwei = []
// 浮球状态
var arrfq = []
// 红外
var arrhongwai = []
// 一氧化碳
var arrco = []
// 甲烷
var arrch4 = []
// 氧气
var arrO2 = []
// 硫化氢
var arrhs = []
// 中继温度
var arrzhong = []
// 中继湿度
var arrshidu = []
var timeO2 = []
var charts = []
$.ajax({//Ajax请求你要展现的数据
url: url,
type: 'post',
cache: false,
dataType: 'json',
async: false, //改为同步
data: {
silonumber: siloNumber,
status: 0
}, //查看方式
success: function (data) {
console.log(data)
if (data.status === 200) {
arrwendu = []
arrshuiwei = []
arrfq = []
arrhongwai = []
arrco = []
arrO2 = []
arrhs = []
arrzhong = []
arrshidu = []
timeO2 = []
arrch4 = []
for (var i = 0; i < data.data.rows.length; i++) {
var newTime = new Date(parseInt(data.data.rows[i].createTime)).toLocaleString().replace(/:\d{1,2}$/, ' ')
timeO2.push(newTime)
var wendu = Number(data.data.rows[i].temperature)
arrwendu.push(wendu)
var shuiwei = Number(data.data.rows[i].level)
arrshuiwei.push(shuiwei)
var fqzt = Number(data.data.rows[i].fq)
arrfq.push(fqzt)
var hongwai = Number(data.data.rows[i].status)
if (hongwai === 3) {
hongwai = 1
} else {
hongwai = 0
}
arrhongwai.push(hongwai)
var co = Number(data.data.rows[i].co)
arrco.push(co)
var hs = Number(data.data.rows[i].h2s)
arrhs.push(hs)
var ch4 = Number(data.data.rows[i].ch4)
arrch4.push(ch4)
var o2 = Number(data.data.rows[i].o2)
arrO2.push(o2)
var zhongji = Number(data.data.rows[i].relayTemperature)
// console.log(zhongji)
arrzhong.push(zhongji)
var shidu = Number(data.data.rows[i].humidity)
arrshidu.push(shidu)
}
// console.log(timeO2)
// console.log(arrhongwai)
// console.log(arrco)
}
}
});
初始化echarts
我是每一个都去初始化创建的echarts，这样操作代码比较多，所以我就复制了两个，道理都是一样的，这个echarts配置项还有拖拽的功能，包括切换柱状图
// 初始化温度
var myChart1 = echarts.init(document.getElementById('temperature'));
// myChart.dispose();
var option1 = {
title: {
text: '温度(℃)',
x: 'center', //主标题居中
subtextStyle: {
color: '#DDE81C',
fontSize: 12,
}
},
color: ['#9CFF00'],
tooltip: {
trigger: 'axis'
},
legend: {
data: [name],
top: 30,
left: 55, //图示显示在左边
},
toolbox: {
show: true,
feature: {
//mark : {show: true},
//dataZoom : {show: true},
//magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
magicType: { show: true, type: ['line', 'bar'] },
dataView: { show: true },
//restore : {show: true},
//saveAsImage : {show: true}
}
},
calculable: true,
dataZoom: {
show: true,
realtime: true,
// start : 20,
// end : 80 //百分比
// startValue: fromTime, //拖拽条开始时间
// endValue: toTime //拖拽条结束时间
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: timeO2
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: name,
type: 'line',
data: arrwendu,
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
// 初始化水位
var myChart2 = echarts.init(document.getElementById('profileQu'));
// myChart.dispose();
var option2 = {
title: {
text: '水位(m)',
x: 'center', //主标题居中
subtextStyle: {
color: '#DDE81C',
fontSize: 12,
}
},
color: ['#5FD4FC'],
tooltip: {
trigger: 'axis'
},
legend: {
data: [name],
top: 30,
left: 55, //图示显示在左边
},
toolbox: {
show: true,
feature: {
//mark : {show: true},
//dataZoom : {show: true},
//magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
magicType: { show: true, type: ['line', 'bar'] },
dataView: { show: true },
//restore : {show: true},
//saveAsImage : {show: true}
}
},
calculable: true,
dataZoom: {
show: true,
realtime: true,
// start : 20,
// end : 80 //百分比
// startValue: fromTime, //拖拽条开始时间
// endValue: toTime //拖拽条结束时间
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: timeO2
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: name,
type: 'line',
data: arrshuiwei,
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);
现在复制的只是两项，具体多少根据需求定义
下面这个就是开启曲线图的响应式了
var charts = []
charts.push(myChart1);
charts.push(myChart2);
$(window).resize(function () {
for (var i = 0; i < charts.length; i++) {
charts[i].resize();
}
});
// 这个是解决tab切换的时候echarts 不显示的问题
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
for (var i = 0; i < charts.length; i++) {
charts[i].resize();
}
});
整个的过程就是这样了，我这种方法比较复杂，代码比较多，也可以把初始化echarts封装成为函数，这样操作就比较方便，直接调用就可以了，但是最下面的解决echarts响应式的问题还有就是切换时候不显示的问题，项目比较急，所以就没去在封装，在找解决办法，后续有时间会去研究。