1.之前的窗口自适应关键代码（window.onresize）分别写到了好几个function中，窗口自适应失效了。代码如下：
$(function() {
// 加载金额、油量、加油笔数、税额
$.ajax({
type:"POST",
url:"Index!getOneAndAll.action",
data: {"sjkd" : 10 , "startTime" : HOMEDATEYM},
dataType:"json",
success: function(data){
// 如果返回是json数据为null，则退出此方法
if(null == data){
return;
}
if(null != data.total){
var je_total = formatThousand2(data.total.je);
var yl_total = formatThousand2(data.total.yl);
var jybs_total = formatThousand(data.total.jybs);
var se_total = formatThousand2(data.total.se);
je_total = je_total.replace(".","<span class=‘point‘>.")+"</span>";
yl_total = yl_total.replace(".","<span class=‘point‘>.")+"</span>";
se_total = se_total.replace(".","<span class=‘point‘>.")+"</span>";
$("#je_total").html(je_total);
$("#yl_total").html(yl_total);
$("#jybs_total").html (jybs_total);
$("#se_total").html(se_total);
}else{
$("#je_total").html("0<span class=‘point‘>.00</span>");
$("#yl_total").html("0<span class=‘point‘>.00</span>");
$("#jybs_total").html("0");
$("#se_total").html("0<span class=‘point‘>.00</span>");
}
createCollectEcharts1(data);
},
error:function(data){
alert("获取首页数据失败！");
}
});
// 加载Top10
$.ajax({
type:"POST",
url:"Index!getTopBar.action",
data: {"sjkd" : 10 , "startTime" : HOMEDATEYM , "topKj" : 10 , "topNum" : 10},
dataType:"json",
success: function(data){
// 如果返回是json数据为null，则退出此方法
if(null == data){
return;
}
createCollectEcharts2(data);
},
error:function(data){
alert("获取首页数据失败！");
}
});
// 加载摘挂枪分析
$.ajax({
type:"POST",
url:"Index!getZgqfxScatter.action",
data: {"sjkd" : 10 , "startTime" : HOMEDATEYM},
dataType:"json",
success: function(data){
// 如果返回是json数据为null，则退出此方法
if(null == data){
return;
}
createCollectEcharts3(data);
},
error:function(data){
alert("获取首页数据失败！");
}
});
});
function createCollectEcharts1(data){
var xAxisData = [];
var jeSeriesData = [];
var ylSeriesData = [];
var jybsSeriesData = [];
var seSeriesData = [];
for (var i = 0, size = data.dataList.length; i < size; i++) {
xAxisData.push(data.dataList[i].sjjc);
jeSeriesData.push(data.dataList[i].je);
ylSeriesData.push(data.dataList[i].yl);
jybsSeriesData.push(data.dataList[i].jybs);
seSeriesData.push(data.dataList[i].se);
}
var data = [‘中石油102‘, ‘大平五一路‘, ‘中通‘, ‘和源‘, ‘德月‘, ‘铭磊‘, ‘高桥‘, ‘大平汽贸城‘, ‘天盈‘, ‘宝光‘, ‘燕港‘, ‘顺达‘, ‘长城‘];
// 散点图声明
var baseNumber = 45000;
var variableNumber = 0;
// 指定图表的配置项和数据
var textBr = function(value) {
// debugger
var ret = ""; // 拼接加\n返回的类目项
var maxLength = 3; // 每项显示文字个数
var valLength = value.length; // X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
if (rowN > 1) // 如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = ""; // 每次截取的字符串
var start = i * maxLength; // 开始截取的位置
var end = start + maxLength; // 结束截取的位置
// 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; // 凭借最终的字符串
}
return ret;
} else {
return value;
}
}
var myChart1, myChart2, myChart3, myChart4;
// 基于准备好的dom，初始化echarts实例
if ($(‘#echarts1‘).length > 0) {
myChart1 = echarts.init(document.getElementById(‘echarts1‘));
}
if ($(‘#echarts2‘).length > 0) {
myChart2 = echarts.init(document.getElementById(‘echarts2‘));
}
if ($(‘#echarts3‘).length > 0) {
myChart3 = echarts.init(document.getElementById(‘echarts3‘));
}
if ($(‘#echarts4‘).length > 0) {
myChart4 = echarts.init(document.getElementById(‘echarts4‘));
}
/* 第一个图表的配置--月销售额 --柱状图 */
var option1 = {
color: [‘#01a1ff‘],
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
}
return res;
}
},
dataZoom: [{
type: ‘inside‘,
}],
grid: {
top: ‘30‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘1%‘,
containLabel: true,
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
type: ‘value‘,
axisTick: {
show: false,
},
}],
series: [{
name: ‘本月销售额‘,
type: ‘bar‘,
barWidth: ‘40%‘,
label: {
normal: {
show: true,
position: ‘top‘,
color: ‘#424242‘,
fontSize: 12,
formatter: function(params) {
return formatThousand2(params.value);
}
}
},
data: jeSeriesData
}],
};
/* 第二个图表的配置--销售量 --折线图 */
var option2 = {
color: [‘#ffa801‘],
dataZoom: [{
type: ‘inside‘,
}],
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘line‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
}
return res;
}
},
grid: {
top: ‘30‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘1%‘,
containLabel: true
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
type: ‘value‘,
axisTick: {
show: false,
},
}],
series: [{
name: ‘本月销售量‘,
type: ‘line‘,
label: {
normal: {
show: true,
position: ‘top‘,
color: ‘#424242‘,
fontSize: 12,
formatter: function(params) {
return formatThousand2(params.value);
}
},
},
clipOverflow: false,
symbolSize: 10,
data: ylSeriesData,
areaStyle: {
color: {
type: ‘linear‘,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: ‘rgba(255,168,1,0.8)‘ // 0% 处的颜色
}, {
offset: 1,
color: ‘rgba(255,168,1,0.2)‘ // 100% 处的颜色
}],
}
}
}]
};
/* 第三个图表的配置--加油笔数 --柱状图 */
var option3 = {
color: [‘#64bf0f‘],
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand(params[i].data);
}
return res;
}
},
dataZoom: [{
type: ‘inside‘,
}],
grid: {
top: ‘30‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘1%‘,
containLabel: true,
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
type: ‘value‘,
axisTick: {
show: false,
},
}],
series: [{
name: ‘本月加油笔数‘,
type: ‘bar‘,
barWidth: ‘26%‘,
data: jybsSeriesData,
itemStyle: {
barBorderRadius: [30, 30, 0, 0],
},
label: {
show: true,
position: ‘top‘,
color: ‘#424242‘,
fontSize: 12,
formatter: function(params) {
return formatThousand(params.value);
}
}
}]
};
/* 第四个图表的配置--税额 --柱状图 */
var option4 = {
color: [‘#ea3c33‘],
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
}
return res;
}
},
dataZoom: [{
type: ‘inside‘,
}],
grid: {
top: ‘30‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘1%‘,
containLabel: true,
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
axisTick: {
show: false,
},
}],
series: [{
name: ‘本月销售额‘,
type: ‘bar‘,
barWidth: ‘30%‘,
label: {
normal: {
show: true,
position: ‘top‘,
rotate: ‘20‘,
color: ‘#424242‘,
fontSize: 12,
formatter: function(params) {
return formatThousand2(params.value);
}
}
},
data: seSeriesData
}]
};
myChart1 && myChart1.setOption(option1, true);
myChart2 && myChart2.setOption(option2, true);
myChart3 && myChart3.setOption(option3, true);
myChart4 && myChart4.setOption(option4, true);
/* 窗口自适应，关键代码 */
window.onresize = function() {
if ($(‘#echarts1‘).length > 0) {
myChart1.resize();
}
if ($(‘#echarts2‘).length > 0) {
myChart2.resize();
}
if ($(‘#echarts3‘).length > 0) {
myChart3.resize();
}
if ($(‘#echarts4‘).length > 0) {
myChart4.resize();
}
};
// 解决tab切换不显示问题 在加载窗口后重新渲染。
$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function(e) {
if ($(‘#echarts1‘).length > 0) {
myChart1.resize();
}
if ($(‘#echarts2‘).length > 0) {
myChart2.resize();
}
if ($(‘#echarts3‘).length > 0) {
myChart3.resize();
}
if ($(‘#echarts4‘).length > 0) {
myChart4.resize();
}
});
}
function createCollectEcharts2(data){
var color1 = "#EA1E1E";
var color2 = "#ED8913";
var color3 = "#57B115";
var xAxisData = [];
var seriesData = [];
var series = [];
for (var i = 0, size = data.dataList.length; i < size; i++) {
xAxisData.push(data.dataList[i].sjjc);
}
for (var i = 0, size = data.dataList.length; i < size; i++) {
if(i == 0){
seriesData.push({
value : data.dataList[i].bq_zje,
itemStyle : {color: color1}
});
}else if(i == 1){
seriesData.push({
value : data.dataList[i].bq_zje,
itemStyle : {color: color2}
});
}else if(i == 2){
seriesData.push({
value : data.dataList[i].bq_zje,
itemStyle : {color: color3}
});
}else{
seriesData.push(data.dataList[i].bq_zje);
}
}
series.push(
{
name: ‘总销售额‘,
type: ‘bar‘,
barWidth: ‘22%‘,
label: {
normal: {
show: false,
position: ‘top‘,
color: ‘#424242‘,
fontSize: 12,
}
},
data: seriesData
}
);
// 指定图表的配置项和数据
var textBr = function(value) {
// debugger
var ret = ""; // 拼接加\n返回的类目项
var maxLength = 3; // 每项显示文字个数
var valLength = value.length; // X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
if (rowN > 1) // 如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = ""; // 每次截取的字符串
var start = i * maxLength; // 开始截取的位置
var end = start + maxLength; // 结束截取的位置
// 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; // 凭借最终的字符串
}
return ret;
} else {
return value;
}
}
var myChart5;
// 基于准备好的dom，初始化echarts实例
if ($(‘#echarts5‘).length > 0) {
myChart5 = echarts.init(document.getElementById(‘echarts5‘));
}
/* 第5个图表的配置--top分析排名 --柱状图 */
var option5 = {
color: [‘#01a1ff‘],
dataZoom: [{
type: ‘inside‘,
}],
tooltip: {
trigger: ‘axis‘,
axisPointer: {
type: ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
}
return res;
}
},
grid: {
top: ‘10‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘20‘,
containLabel: true,
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
type: ‘value‘,
axisTick: {
show: false,
},
}],
series: series,
};
myChart5 && myChart5.setOption(option5, true);
/* 窗口自适应，关键代码 */
window.onresize = function() {
if ($(‘#echarts5‘).length > 0) {
myChart5.resize();
}
};
}
function createCollectEcharts3(data){
var zgqb;
var titleText;
var zgqsSeriesdata = [];
var jybsSeriesdata = [];
if(null != data.total){
zgqb = formatPercent2(data.total.zgqb);
zgqsSeriesdata.push(data.total.zgqs);
jybsSeriesdata.push(data.total.jybs);
}
titleText = "摘挂枪比：" + zgqb;
// 散点图声明
var baseNumber = 45000;
var variableNumber = 0;
var myChart6;
if ($(‘#echarts6‘).length > 0) {
myChart6 = echarts.init(document.getElementById(‘echarts6‘));
}
/* 第6个图表的配置--摘挂枪分析 --单轴散点图 */
var option6 = {
title: {
//text: ‘摘挂枪比：60.00%‘,
text: titleText,
left: ‘center‘,
bottom: ‘20‘,
textStyle: {
fontSize: 13,
fontWeight: ‘bold‘,
color: [‘#ffb888‘],
lineHeight: 12,
},
},
legend: {
data: [‘摘挂枪数‘, ‘加油笔数‘]
},
singleAxis: {
type: ‘category‘,
top: ‘70%‘,
axisLine: {
show: false
},
axisTick: {
show: false
}
},
tooltip: {
trigger: ‘item‘,
},
series: [{
type: ‘scatter‘,
name: ‘摘挂枪数‘,
coordinateSystem: ‘singleAxis‘,
//data: [300000],
data: zgqsSeriesdata,
symbolSize: function(value) {
variableNumber = value;
return Math.sqrt(baseNumber) * .8
},
symbolOffset: [0, ‘-50%‘],
itemStyle: {
opacity: 1,
color: ‘#ac90cc‘
},
label: {
show: true,
position: [‘38%‘, ‘7%‘],
formatter: ‘{c}‘,
color: ‘#fff‘,
formatter: function(params) {
return formatThousand(params.value);
}
}
}, {
type: ‘scatter‘,
name: ‘加油笔数‘,
coordinateSystem: ‘singleAxis‘,
//data: [214400],
data: jybsSeriesdata,
symbolSize: function(value) {
if (value >= variableNumber)
return Math.sqrt(baseNumber) * .8
else
return Math.sqrt(value / variableNumber * baseNumber) * .8
},
symbolOffset: [0, ‘-50%‘],
itemStyle: {
opacity: 1,
color: ‘#ffb888‘
},
label: {
show: true,
position: ‘inside‘,
formatter: ‘{c}‘,
color: ‘#fff‘,
formatter: function(params) {
return formatThousand(params.value);
}
}
}]
};
myChart6 && myChart6.setOption(option6, true);
/* 窗口自适应，关键代码 */
window.onresize = function() {
if ($(‘#echarts6‘).length > 0) {
myChart6.resize();
}
};
}
2.之后将窗口自适应关键代码一起提到了最下边就好使了。代码如下：
$(function() {
// 加载金额、油量、加油笔数、税额
$.ajax({
type:"POST",
url:"Index!getOneAndAll.action",
data: {"sjkd" : 10 , "startTime" : HOMEDATEYM},
dataType:"json",
success: function(data){
// 如果返回是json数据为null，则退出此方法
if(null == data){
return;
}
if(null != data.total){
var je_total = formatThousand2(data.total.je);
var yl_total = formatThousand2(data.total.yl);
var jybs_total = formatThousand(data.total.jybs);
var se_total = formatThousand2(data.total.se);
je_total = je_total.replace(".","<span class=‘point‘>.")+"</span>";
yl_total = yl_total.replace(".","<span class=‘point‘>.")+"</span>";
se_total = se_total.replace(".","<span class=‘point‘>.")+"</span>";
$("#je_total").html(je_total);
$("#yl_total").html(yl_total);
$("#jybs_total").html (jybs_total);
$("#se_total").html(se_total);
}else{
$("#je_total").html("0<span class=‘point‘>.00</span>");
$("#yl_total").html("0<span class=‘point‘>.00</span>");
$("#jybs_total").html("0");
$("#se_total").html("0<span class=‘point‘>.00</span>");
}
createCollectEcharts1(data);
},
error:function(data){
alert("获取首页数据失败！");
}
});
// 加载Top10
$.ajax({
type:"POST",
url:"Index!getTopBar.action",
data: {"sjkd" : 10 , "startTime" : HOMEDATEYM , "topKj" : 10 , "topNum" : 10},
dataType:"json",
success: function(data){
// 如果返回是json数据为null，则退出此方法
if(null == data){
return;
}
createCollectEcharts2(data);
},
error:function(data){
alert("获取首页数据失败！");
}
});
// 加载摘挂枪分析
$.ajax({
type:"POST",
url:"Index!getZgqfxScatter.action",
data: {"sjkd" : 10 , "startTime" : HOMEDATEYM},
dataType:"json",
success: function(data){
// 如果返回是json数据为null，则退出此方法
if(null == data){
return;
}
createCollectEcharts3(data);
},
error:function(data){
alert("获取首页数据失败！");
}
});
});
var myChart1, myChart2, myChart3, myChart4;
function createCollectEcharts1(data){
var xAxisData = [];
var jeSeriesData = [];
var ylSeriesData = [];
var jybsSeriesData = [];
var seSeriesData = [];
for (var i = 0, size = data.dataList.length; i < size; i++) {
xAxisData.push(data.dataList[i].sjjc);
jeSeriesData.push(data.dataList[i].je);
ylSeriesData.push(data.dataList[i].yl);
jybsSeriesData.push(data.dataList[i].jybs);
seSeriesData.push(data.dataList[i].se);
}
var data = [‘中石油102‘, ‘大平五一路‘, ‘中通‘, ‘和源‘, ‘德月‘, ‘铭磊‘, ‘高桥‘, ‘大平汽贸城‘, ‘天盈‘, ‘宝光‘, ‘燕港‘, ‘顺达‘, ‘长城‘];
// 散点图声明
var baseNumber = 45000;
var variableNumber = 0;
// 指定图表的配置项和数据
var textBr = function(value) {
// debugger
var ret = ""; // 拼接加\n返回的类目项
var maxLength = 3; // 每项显示文字个数
var valLength = value.length; // X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
if (rowN > 1) // 如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = ""; // 每次截取的字符串
var start = i * maxLength; // 开始截取的位置
var end = start + maxLength; // 结束截取的位置
// 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; // 凭借最终的字符串
}
return ret;
} else {
return value;
}
}
// 基于准备好的dom，初始化echarts实例
if ($(‘#echarts1‘).length > 0) {
myChart1 = echarts.init(document.getElementById(‘echarts1‘));
}
if ($(‘#echarts2‘).length > 0) {
myChart2 = echarts.init(document.getElementById(‘echarts2‘));
}
if ($(‘#echarts3‘).length > 0) {
myChart3 = echarts.init(document.getElementById(‘echarts3‘));
}
if ($(‘#echarts4‘).length > 0) {
myChart4 = echarts.init(document.getElementById(‘echarts4‘));
}
/* 第一个图表的配置--月销售额 --柱状图 */
var option1 = {
color: [‘#01a1ff‘],
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
}
return res;
}
},
dataZoom: [{
type: ‘inside‘,
}],
grid: {
top: ‘30‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘1%‘,
containLabel: true,
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
type: ‘value‘,
axisTick: {
show: false,
},
}],
series: [{
name: ‘本月销售额‘,
type: ‘bar‘,
barWidth: ‘30%‘,
label: {
normal: {
show: true,
position: ‘top‘,
color: ‘#424242‘,
fontSize: 12,
formatter: function(params) {
return formatThousand2(params.value);
}
}
},
data: jeSeriesData
}],
};
/* 第二个图表的配置--销售量 --折线图 */
var option2 = {
color: [‘#ffa801‘],
dataZoom: [{
type: ‘inside‘,
}],
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘line‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
}
return res;
}
},
grid: {
top: ‘30‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘1%‘,
containLabel: true
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
type: ‘value‘,
axisTick: {
show: false,
},
}],
series: [{
name: ‘本月销售量‘,
type: ‘line‘,
label: {
normal: {
show: true,
position: ‘top‘,
color: ‘#424242‘,
fontSize: 12,
formatter: function(params) {
return formatThousand2(params.value);
}
},
},
clipOverflow: false,
symbolSize: 10,
data: ylSeriesData,
areaStyle: {
color: {
type: ‘linear‘,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: ‘rgba(255,168,1,0.8)‘ // 0% 处的颜色
}, {
offset: 1,
color: ‘rgba(255,168,1,0.2)‘ // 100% 处的颜色
}],
}
}
}]
};
/* 第三个图表的配置--加油笔数 --柱状图 */
var option3 = {
color: [‘#64bf0f‘],
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand(params[i].data);
}
return res;
}
},
dataZoom: [{
type: ‘inside‘,
}],
grid: {
top: ‘30‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘1%‘,
containLabel: true,
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
type: ‘value‘,
axisTick: {
show: false,
},
}],
series: [{
name: ‘本月加油笔数‘,
type: ‘bar‘,
barWidth: ‘26%‘,
data: jybsSeriesData,
itemStyle: {
barBorderRadius: [30, 30, 0, 0],
},
label: {
show: true,
position: ‘top‘,
color: ‘#424242‘,
fontSize: 12,
formatter: function(params) {
return formatThousand(params.value);
}
}
}]
};
/* 第四个图表的配置--税额 --柱状图 */
var option4 = {
color: [‘#ea3c33‘],
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
}
return res;
}
},
dataZoom: [{
type: ‘inside‘,
}],
grid: {
top: ‘30‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘1%‘,
containLabel: true,
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
axisTick: {
show: false,
},
}],
series: [{
name: ‘本月销售额‘,
type: ‘bar‘,
barWidth: ‘30%‘,
label: {
normal: {
show: true,
position: ‘top‘,
rotate: ‘20‘,
color: ‘#424242‘,
fontSize: 12,
formatter: function(params) {
return formatThousand2(params.value);
}
}
},
data: seSeriesData
}]
};
myChart1 && myChart1.setOption(option1, true);
myChart2 && myChart2.setOption(option2, true);
myChart3 && myChart3.setOption(option3, true);
myChart4 && myChart4.setOption(option4, true);
// 解决tab切换不显示问题 在加载窗口后重新渲染。
$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function(e) {
if ($(‘#echarts1‘).length > 0) {
myChart1.resize();
}
if ($(‘#echarts2‘).length > 0) {
myChart2.resize();
}
if ($(‘#echarts3‘).length > 0) {
myChart3.resize();
}
if ($(‘#echarts4‘).length > 0) {
myChart4.resize();
}
});
}
var myChart5;
function createCollectEcharts2(data){
var color1 = "#EA1E1E";
var color2 = "#ED8913";
var color3 = "#57B115";
var xAxisData = [];
var seriesData = [];
var series = [];
for (var i = 0, size = data.dataList.length; i < size; i++) {
xAxisData.push(data.dataList[i].sjjc);
}
for (var i = 0, size = data.dataList.length; i < size; i++) {
if(i == 0){
seriesData.push({
value : data.dataList[i].bq_zje,
itemStyle : {color: color1}
});
}else if(i == 1){
seriesData.push({
value : data.dataList[i].bq_zje,
itemStyle : {color: color2}
});
}else if(i == 2){
seriesData.push({
value : data.dataList[i].bq_zje,
itemStyle : {color: color3}
});
}else{
seriesData.push(data.dataList[i].bq_zje);
}
}
series.push(
{
name: ‘总销售额‘,
type: ‘bar‘,
barWidth: ‘36%‘,
label: {
normal: {
show: false,
position: ‘top‘,
color: ‘#424242‘,
fontSize: 12,
}
},
data: seriesData
}
);
// 指定图表的配置项和数据
var textBr = function(value) {
// debugger
var ret = ""; // 拼接加\n返回的类目项
var maxLength = 3; // 每项显示文字个数
var valLength = value.length; // X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
if (rowN > 1) // 如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = ""; // 每次截取的字符串
var start = i * maxLength; // 开始截取的位置
var end = start + maxLength; // 结束截取的位置
// 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; // 凭借最终的字符串
}
return ret;
} else {
return value;
}
}
// 基于准备好的dom，初始化echarts实例
if ($(‘#echarts5‘).length > 0) {
myChart5 = echarts.init(document.getElementById(‘echarts5‘));
}
/* 第5个图表的配置--top分析排名 --柱状图 */
var option5 = {
color: [‘#01a1ff‘],
dataZoom: [{
type: ‘inside‘,
}],
tooltip: {
trigger: ‘axis‘,
axisPointer: {
type: ‘shadow‘
},
formatter:function(params){
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].value);
}
return res;
}
},
grid: {
top: ‘10‘,
left: ‘1%‘,
right: ‘1%‘,
bottom: ‘20‘,
containLabel: true,
},
xAxis: [{
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
formatter: function(value) {
return textBr(value);
}
}
}],
yAxis: [{
type: ‘value‘,
axisTick: {
show: false,
},
}],
series: series,
};
myChart5 && myChart5.setOption(option5, true);
}
var myChart6;
function createCollectEcharts3(data){
var zgqb;
var titleText;
var zgqsSeriesdata = [];
var jybsSeriesdata = [];
if(null != data.total){
zgqb = formatPercent2(data.total.zgqb);
zgqsSeriesdata.push(data.total.zgqs);
jybsSeriesdata.push(data.total.jybs);
}
titleText = "摘挂枪比：" + zgqb;
// 散点图声明
var baseNumber = 45000;
var variableNumber = 0;
if ($(‘#echarts6‘).length > 0) {
myChart6 = echarts.init(document.getElementById(‘echarts6‘));
}
/* 第6个图表的配置--摘挂枪分析 --单轴散点图 */
var option6 = {
title: {
//text: ‘摘挂枪比：60.00%‘,
text: titleText,
left: ‘center‘,
bottom: ‘20‘,
textStyle: {
fontSize: 13,
fontWeight: ‘bold‘,
color: [‘#ffb888‘],
lineHeight: 12,
},
},
legend: {
data: [‘摘挂枪数‘, ‘加油笔数‘]
},
singleAxis: {
type: ‘category‘,
top: ‘70%‘,
axisLine: {
show: false
},
axisTick: {
show: false
}
},
tooltip: {
trigger: ‘item‘,
},
series: [{
type: ‘scatter‘,
name: ‘摘挂枪数‘,
coordinateSystem: ‘singleAxis‘,
//data: [300000],
data: zgqsSeriesdata,
symbolSize: function(value) {
variableNumber = value;
return Math.sqrt(baseNumber) * .8
},
symbolOffset: [0, ‘-50%‘],
itemStyle: {
opacity: 1,
color: ‘#ac90cc‘
},
label: {
show: true,
position: [‘38%‘, ‘7%‘],
formatter: ‘{c}‘,
color: ‘#fff‘,
formatter: function(params) {
return formatThousand(params.value);
}
}
}, {
type: ‘scatter‘,
name: ‘加油笔数‘,
coordinateSystem: ‘singleAxis‘,
//data: [214400],
data: jybsSeriesdata,
symbolSize: function(value) {
if (value >= variableNumber)
return Math.sqrt(baseNumber) * .8
else
return Math.sqrt(value / variableNumber * baseNumber) * .8
},
symbolOffset: [0, ‘-50%‘],
itemStyle: {
opacity: 1,
color: ‘#ffb888‘
},
label: {
show: true,
position: ‘inside‘,
formatter: ‘{c}‘,
color: ‘#fff‘,
formatter: function(params) {
return formatThousand(params.value);
}
}
}]
};
myChart6 && myChart6.setOption(option6, true);
}
/* 窗口自适应，关键代码 */
window.onresize = function() {
if ($(‘#echarts1‘).length > 0) {
myChart1.resize();
}
if ($(‘#echarts2‘).length > 0) {
myChart2.resize();
}
if ($(‘#echarts3‘).length > 0) {
myChart3.resize();
}
if ($(‘#echarts4‘).length > 0) {
myChart4.resize();
}
if ($(‘#echarts5‘).length > 0) {
myChart5.resize();
}
if ($(‘#echarts6‘).length > 0) {
myChart6.resize();
}
};
原文地址：https://www.cnblogs.com/chuanqi1995/p/11543765.html
时间： 2024-08-01 08:33:40