若依bootstrap跟echarts整合发生图表变形
若依整合echarts框架之后，切换到其他的菜单栏，按F5刷新之后，回到主页echarts统计图就发生了变形
使用过 resize方法但是没有解决问题
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('图表组合')"/>
<th:block th:include="include :: echarts-js"/>
<meta charset="UTF-8">
<title>主要指标</title>
</head>
<style>
h2 {
font-size: 28px;
font-weight: bold;
}
</style>
<body>
<div class="container-div">
<div class="row">
<!--上半部分-->
<div class="col-sm-4" style="width: 33.3%;height:50%;margin-top: 20px">
<div class="panel panel-default">
<div class="panel-heading">
一般公共预算支出
</div>
<div id="A" style="width:100%;height:350px"></div>
</div>
</div>
<div class="col-sm-4" style="width: 33.3%;height:50%;margin-top: 20px">
<div class="col-sm-6">
<h2 style="color: black;text-align: center">GDP总量</h2>
</div>
<div class="col-sm-6">
<h2 style="color: black;text-align: center" id="sum"></h2>
</div>
<div id="B" style="width: 100%;height:360px;margin-top: 25px"></div>
</div>
<div class="col-sm-4" style="width: 33.3%;height: 50%;margin-top: 20px">
<div class="panel panel-default">
<div class="panel-heading">
进出口总额
</div>
<div id="C" style="width: 100%;height:350px"></div>
</div>
</div>
<!-- 下半部分 -->
<div class="col-sm-3" style="width: 24%;height: 50%">
<div class="panel panel-default">
<div class="panel-heading">
全社会用电量
</div>
<div id="D" style="width: 100%;height:350px"></div>
</div>
</div>
<div class="col-sm-6" style="width: 52%;height: 50%">
<div class="panel panel-default">
<div class="panel-heading">
综合趋势
</div>
<div id="E" style="width: 100%;height:350px"></div>
</div>
</div>
<div class="col-sm-3" style="width: 24%;height: 50%">
<div class="panel panel-default">
<div class="panel-heading">
商品房销售面积
</div>
<div id="F" style="width: 100%;height:350px"></div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
let myCharts1 = document.getElementById("A");
let from1 = echarts.init(myCharts1);
var xdata1 = [];
var ydata1 = [];
var ydataa1 = [];
$.ajax({
type: "GET",
url: "/data/getDataFromOne",
dataType: "json",
async: false,
success: function (result) {
for (var i = result.length - 1; i >= 0; i--) {
ydata1.push(result[i].valuess);
xdata1.push(result[i].times);
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
$.ajax({
type: "GET",
url: "/data/getDataFromOnes",
dataType: "json",
async: false,
success: function (result) {
for (var i = result.length - 1; i >= 0; i--) {
ydataa1.push(result[i].valuess);
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
let option1;
option1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
}, grid: {
left: '8%',
right: '6%',
bottom: '15%',
top: '10%'
},
toolbox: {},
legend: {
top: 'bottom',
data: ['累计总量(亿元)', '累计增速(%)']
},
xAxis: [
{
type: 'category',
data: xdata1,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
interval: 0,
rotate: 20,
fontSize: 12
}
}
],
yAxis: [
{
type: 'value',
name: '金额(亿元)',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '增速',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '累计总量(亿元)',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + '亿元';
}
},
data: ydata1
},
{
name: '累计增速(%)',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '%';
}
},
data: ydataa1
}
]
};
from1.setOption(option1);
let myCharts3 = document.getElementById("B");
let from3 = echarts.init(myCharts3);
var xdata3 = [];
var num = 0;
$.ajax({
type: "GET",
url: "/data/getDataFromThree",
dataType: "json",
async: false,
success: function (result) {
console.log(result);
$.each(result, function (index, item) {
xdata3.push({
value: item.valuess,
name: item.times,
})
});
//判断是在第几季度
for (var i = 0; i < xdata3.length; i++) {
if (xdata3[i].name.indexOf("1季度") != -1) {
//控制最后一次不相减
} else if (i != xdata3.length - 1) {
xdata3[i].value = xdata3[i].value - xdata3[i + 1].value;
xdata3[i].value = xdata3[i].value.toFixed(2);
}
num += parseFloat(xdata3[i].value)
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
$("#sum").text(num.toFixed(2) + "(亿元)");
let option3;
option3 = {
tooltip: {
trigger: 'item'
},
legend: {
top: '14%',
left: 'center',
right: '50%',
},
series: [
{
name: 'GDP',
type: 'pie',
radius: ['100%', '60%'],
avoidLabelOverlap: false,
top: '30%',
label: {
show: false,
position: 'center',
formatter: '{c}亿元'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: xdata3
}
]
};
from3.setOption(option3);
let myCharts2 = document.getElementById("C");
let from2 = echarts.init(myCharts2);
var xdata2 = [];
var ydata2 = [];
$.ajax({
type: "GET",
url: "/data/getDataFromTow",
dataType: "json",
async: false,
success: function (result) {
for (var i = result.length - 1; i >= 0; i--) {
ydata2.push(result[i].valuess);
xdata2.push(result[i].times);
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
let option2;
option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
}, grid: {
left: '9%',
right: '5%',
bottom: '15%',
top: '10%'
// containLabel: true
},
toolbox: {},
legend: {
top: 'bottom',
data: ['累计总量(亿美元)']
},
xAxis: [
{
type: 'category',
data: xdata2,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
interval: 0,
rotate: 20,
fontSize: 12
}
}
],
yAxis: [
{
type: 'value',
name: '金额(亿美元)',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '累计总量(亿美元)',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + '亿元';
}
},
data: ydata2
}]
};
from2.setOption(option2);
let myCharts4 = document.getElementById("D");
let from4 = echarts.init(myCharts4);
var xdata4 = [];
$.ajax({
type: "GET",
url: "/data/getDataFromFour",
dataType: "json",
async: false,
success: function (result) {
$.each(result, function (index, item) {
//将实时数据传到数组
xdata4.push({
value: item.valuess,
name: item.times
})
});
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
let option4;
option4 = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '用电量(亿千瓦时)',
type: 'pie',
radius: [60, 100],
center: ['50%', '50%'],
itemStyle: {
borderRadius: 50
},
data: xdata4,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
//引导线设置
normal: {
length: 6,
length2: 7,
show: true //引导线显示
}
},
}
]
};
from4.setOption(option4);
let myCharts5 = document.getElementById("E");
let from5 = echarts.init(myCharts5);
var xdatas = [];
var adatas = [];
var bdatas = [];
var cdatas = [];
$.ajax({
type: "GET",
url: "/data/test",
dataType: "json",
async: false,
success: function (result) {
for (var i = 0; i < result.length; i++) {
xdatas.push(result[i]);
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
$.ajax({
type: "GET",
url: "/data/getDataFromTriadOne",
dataType: "json",
async: false,
success: function (result) {
for (var i = 0; i < result.length; i++) {
adatas.push(result[i].valuess.toFixed(2));
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
$.ajax({
type: "GET",
url: "/data/getDataFromTriadTow",
dataType: "json",
async: false,
success: function (result) {
for (var i = 0; i < result.length; i++) {
bdatas.push(result[i].valuess.toFixed(2));
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
$.ajax({
type: "GET",
url: "/data/getDataFromTriadThree",
dataType: "json",
async: false,
success: function (result) {
for (var i = 0; i < result.length; i++) {
cdatas.push(result[i].valuess.toFixed(2));
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
let option5;
option5 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: '5%',
right: '2%',
bottom: '10%'
// containLabel: true
},
toolbox: {},
legend: {
data: ['规上工业总产值', '全社会固定资产投资', '社会消费品零售总额']
},
xAxis: [
{
type: 'category',
data: xdatas,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
interval: 0,
rotate: 20,
fontSize: 12
}
}
],
yAxis: [
{
type: 'value',
name: '金额(亿元)',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '规上工业总产值',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + '亿元';
}
},
data: adatas
},
{
name: '全社会固定资产投资',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + '亿元';
}
},
data: bdatas
},
{
name: '社会消费品零售总额',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + '亿元';
}
},
data: cdatas
}
]
};
from5.setOption(option5);
let myCharts6 = document.getElementById("F");
let from6 = echarts.init(myCharts6);
var xdata5 = [];
$.ajax({
type: "GET",
url: "/data/getDataFromSix",
dataType: "json",
async: false,
success: function (result) {
$.each(result, function (index, item) {
xdata5.push({
value: item.valuess,
name: item.times
})
});
for (var i = 0; i < xdata5.length; i++) {
//判断是在第几季度
if (xdata5[i].name.indexOf("1季度") != -1) {
//控制最后一次不相减
} else if (i != xdata5.length - 1) {
xdata5[i].value = xdata5[i].value - xdata5[i + 1].value;
xdata5[i].value = xdata5[i].value.toFixed(2);
}
}
},
error: function () {
alert("数据获取失败！请联系管理员")
}
});
xdata5.length--;
var option6;
option6 = {
tooltip: {
trigger: 'item'
},
legend: {
top: '8%',
},
series: [
{
name: '面积(万平方米)',
type: 'pie',
radius: '80%',
top: '20%',
label: {
normal: {
show: false
}
},
data: xdata5,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
from6.setOption(option6);
window.addEventListener('resize', function () {
from1.resize();
from2.resize();
from3.resize();
from4.resize();
from5.resize();
from6.resize();
});
</script>
</body>
</html>
使用一下，缓存机制