/**
* echarts简单封装
* 冯海夫
* 20201008
*/
var ChartsService = {
// 大间隔
getGridSpanBig:function(){
return {
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
}
};
},
// 小间隔
getGridSpanSmall:function(){
return {
grid:{
left:"10%",
right:"10%",
bottom:"15%",
top:"10%"
}
};
},
// 通用的柱状图
// divId:待显示的div id, data：json对象
initCommonBar: function (divId, data, grid) {
var myChart = echarts.init(document.getElementById(divId));
const xDataList = [];
const yDataList = [];
for (var val in data) {
xDataList.push(val);
yDataList.push(data[val]);
}
var option = {
color: ['#37a2da'],
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
},
xAxis: {
type: 'category',
data: xDataList,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
// ,
// interval:0,
// rotate:30
,
//换行显示
formatter: function(value) {
let result = '' //拼接加\n返回的类目项
let maxLength = 5 //每项显示文字个数
let valLength = value.length //X轴类目项的文字个数
let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
if (rowNumber > 1) {
//如果文字大于3,
for (let i = 0; i < rowNumber; i++) {
let temp = '' //每次截取的字符串
let start = i * maxLength //开始截取的位置
let end = start + maxLength //结束截取的位置
temp = value.substring(start, end) + '\n'
result += temp //拼接生成最终的字符串
}
return result
} else {
return value
}
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#37a2da'],
width: 1,
type: 'solid'
}
}
},
series: [{
data: yDataList,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#ffffff'
}
}
}
},
}]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
initCommonBar2: function (divId, data, grid) {
var myChart = echarts.init(document.getElementById(divId));
const xDataList = [];
const yDataList = [];
for (var val in data) {
xDataList.push(val);
yDataList.push(data[val]);
}
var option = {
color: ['#37a2da'],
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
},
xAxis: {
type: 'category',
data: xDataList,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
// ,
// interval:0,
// rotate:30
,
//换行显示
formatter: function(value) {
let result = '' //拼接加\n返回的类目项
let maxLength = 5 //每项显示文字个数
let valLength = value.length //X轴类目项的文字个数
let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
if (rowNumber > 1) {
//如果文字大于3,
for (let i = 0; i < rowNumber; i++) {
let temp = '' //每次截取的字符串
let start = i * maxLength //开始截取的位置
let end = start + maxLength //结束截取的位置
temp = value.substring(start, end) + '\n'
result += temp //拼接生成最终的字符串
}
return result
} else {
return value
}
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
formatter:'{value}%',
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#37a2da'],
width: 1,
type: 'solid'
}
}
},
series: [{
data: yDataList,
type: 'bar',
showBackground: false,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '{c}%',//显示百分号
textStyle: {
color: '#ffffff'
}
}
}
},
}]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
// 带阴影柱状图柱状图
// divId:待显示的div id, data：json对象
initBarWithShade: function (divId, data, grid) {
var myChart = echarts.init(document.getElementById(divId));
const xDataList = [];
const yDataList = [];
for (var val in data) {
xDataList.push(val);
yDataList.push(data[val]);
}
var option = {
color: ['#37a2da'],
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
},
xAxis: {
type: 'category',
data: xDataList,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
// interval:0,
// rotate:30
//换行显示
formatter: function(value) {
let result = '' //拼接加\n返回的类目项
let maxLength = 5 //每项显示文字个数
if(divId==="charts_33"){
maxLength=2
}
let valLength = value.length //X轴类目项的文字个数
let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
if (rowNumber > 1) {
//如果文字大于3,
for (let i = 0; i < rowNumber; i++) {
let temp = '' //每次截取的字符串
let start = i * maxLength //开始截取的位置
let end = start + maxLength //结束截取的位置
temp = value.substring(start, end) + '\n'
result += temp //拼接生成最终的字符串
}
return result
} else {
return value
}
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#37a2da'],
width: 1,
type: 'solid'
}
}
},
series: [{
data: yDataList,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#ffffff'
}
}
}
},
}]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
// 上下两端都有数字的柱状图，算比例
// divId:待显示的div id, data：json数组,label,sum1:下柱数,sum2:总熟
initBarWithTwoNumberRate: function (divId, data, grid) {
var myChart = echarts.init(document.getElementById(divId));
const xDataList = [];
const yDataList = [];
const yDataList2 = []
$.each(data, function (index, item) {
xDataList.push(item.label);
const sum1 = (item.sum1 / item.sum2 * 100).toFixed(0);
yDataList.push(sum1);
yDataList2.push(100 - sum1);
});
var option = {
color: ['#37a2da', '#FF4040'],
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
},
xAxis: {
type: 'category',
data: xDataList,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
// interval:0,
// rotate:30
//换行显示
formatter: function(value) {
let result = '' //拼接加\n返回的类目项
let maxLength = 5 //每项显示文字个数
let valLength = value.length //X轴类目项的文字个数
let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
if (rowNumber > 1) {
//如果文字大于3,
for (let i = 0; i < rowNumber; i++) {
let temp = '' //每次截取的字符串
let start = i * maxLength //开始截取的位置
let end = start + maxLength //结束截取的位置
temp = value.substring(start, end) + '\n'
result += temp //拼接生成最终的字符串
}
return result
} else {
return value
}
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
formatter:'{value}%',
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#37a2da'],
width: 1,
type: 'solid'
}
}
},
series: [{
name: '打卡',
type: 'bar',
stack: '总量',
label: {
show: true,
formatter: '{c}%',//显示百分号
position: 'insideRight'
},
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
data: yDataList
}
// ,
// {
// name: '未打卡',
// type: 'bar',
// stack: '总量',
// label: {
// show: false,
// formatter: '{c}%',//显示百分号
// position: 'insideRight'
// },
// data: yDataList2
// }
]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
// 折线图，带阴影
// divId:待显示的div id, data：json对象
initLineWithShade: function (divId, data, grid) {
var myChart = echarts.init(document.getElementById(divId));
const xDataList = [];
const yDataList = [];
for (var val in data) {
xDataList.push(val);
yDataList.push(data[val]);
}
var option = {
color: ['#37a2da'],
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xDataList,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
interval:0,
rotate:30
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#37a2da'],
width: 1,
type: 'solid'
}
}
},
series: [{
data: yDataList,
type: 'line',
areaStyle: {},
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#ffffff'
}
}
}
}
}]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
// 通用的饼图
// divId:待显示的div id, data：json对象
initCommonPie: function (divId, data, colorList) {
var myChart = echarts.init(document.getElementById(divId));
const chartData = [];
var total = 0;
for (var val in data) {
total += data[val] * 1;
}
for (var val in data) {
//const desc = val + " " + data[val] + " " + (data[val] * 1 / total * 100).toFixed(1) + "%";
const desc = val + " " + (data[val] * 1 / total * 100).toFixed(1) + "%";
chartData.push({
value: data[val],
name: desc
});
}
var option = {
color: ['#37a2da', '#ffd85c', '#67e0e3', '#ff9f7f'],
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
series: [{
name: '',
type: 'pie',
radius: '100%',
center: ['50%', '50%'],
data: chartData,
label: {
normal: {
show: true,
position: 'inner'
}
},
emphasis: {
itemStyle: {
shadowBlur: 0,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
if (colorList != null && colorList != undefined){
option.color = colorList;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
// 仪表盘
// divId:待显示的div id, data：json对象:name,value
initCommonPanel: function (divId, data) {
var myChart = echarts.init(document.getElementById(divId));
const dataList = [];
dataList.push(data);
var option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [{
radius:"100%",
name: '',
type: 'gauge',
detail: {
formatter: '{value}%'
},
data: dataList,
title: {
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
// 柱状图和折线图对吧
// divId:待显示的div id, data：json数组：label-x坐标名称,label1-y1名称，label2-y2名称,sum1-y1数量,sum2-y2数量
initBarAndLine: function (divId, data, grid) {
var myChart = echarts.init(document.getElementById(divId));
if (data.length == 0)
return;
const yLabel1 = data[0].label1;
const yLabel2 = data[0].label2;
const xDataList = [];
const yDataList1 = [];
const yDataList2 = [];
$.each(data, function (index, item) {
xDataList.push(item.label);
yDataList1.push(item.sum1);
yDataList2.push(item.sum2);
});
// option2 = {
// color: ['#ff9f7f', '#ffd85c'],
// grid:{
// left:"20%",
// right:"10%",
// bottom:"25%",
// top:"10%"
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: xDataList,
// axisLabel: {
// show: true,
// textStyle: {
// color: '#ffffff', //更改坐标轴文字颜色
// fontSize: 14 //更改坐标轴文字大小
// },
// // interval:0,
// // rotate:30
// //换行显示
// formatter: function(value) {
// let result = '' //拼接加\n返回的类目项
// let maxLength = 5 //每项显示文字个数
// let valLength = value.length //X轴类目项的文字个数
// let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
// if (rowNumber > 1) {
// //如果文字大于3,
// for (let i = 0; i < rowNumber; i++) {
// let temp = '' //每次截取的字符串
// let start = i * maxLength //开始截取的位置
// let end = start + maxLength //结束截取的位置
// temp = value.substring(start, end) + '\n'
// result += temp //拼接生成最终的字符串
// }
// return result
// } else {
// return value
// }
// }
// },
// axisLine: {
// lineStyle: {
// type: 'solid',
// color: '#37a2da', //左边线的颜色
// width: '1' //坐标线的宽度
// }
// },
// splitLine: {
// show: false
// }
// },
// yAxis: {
// type: 'value',
// axisLabel: {
// show: true,
// textStyle: {
// color: '#ffffff', //更改坐标轴文字颜色
// fontSize: 14 //更改坐标轴文字大小
// }
// },
// axisLine: {
// lineStyle: {
// type: 'solid',
// color: '#37a2da', //左边线的颜色
// width: '1' //坐标线的宽度
// }
// },
// splitLine: {
// show: true,
// lineStyle: {
// color: ['#37a2da'],
// width: 1,
// type: 'solid'
// }
// }
// },
// series: [{
// data: yDataList1,
// type: 'line',
// stack: '总量',
// label: {
// show: true
// },
// },
// {
// data: yDataList2,
// type: 'line',
// label: {
// show: true
// },
// }
// ]
// };
var option = {
color: ['#ff9f7f', '#ffd85c'],
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: [{
name: yLabel1,
textStyle: {
color: '#ffffff'
}
},
{
name: yLabel2,
textStyle: {
color: '#ffffff'
}
}
]
},
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: true
},
data: xDataList,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
// interval:0,
// rotate:30
//换行显示
formatter: function(value) {
let result = '' //拼接加\n返回的类目项
let maxLength = 5 //每项显示文字个数
let valLength = value.length //X轴类目项的文字个数
let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
if (rowNumber > 1) {
//如果文字大于3,
for (let i = 0; i < rowNumber; i++) {
let temp = '' //每次截取的字符串
let start = i * maxLength //开始截取的位置
let end = start + maxLength //结束截取的位置
temp = value.substring(start, end) + '\n'
result += temp //拼接生成最终的字符串
}
return result
} else {
return value
}
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#37a2da'],
width: 1,
type: 'solid'
}
}
},
series: [{
name: yLabel1,
type: 'line',
stack: '总量',
label: {
show: true
}
,
data: yDataList1
},
{
name: yLabel2,
type: 'bar',
stack: '总量2',
label: {
show: true
},
data: yDataList2
}
]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
initBarAndLine2: function (divId, data, grid) {
var myChart = echarts.init(document.getElementById(divId));
if (data.length == 0)
return;
const yLabel1 = data[0].label1;
const yLabel2 = data[0].label2;
const xDataList = [];
const yDataList1 = [];
const yDataList2 = [];
$.each(data, function (index, item) {
xDataList.push(item.label);
yDataList1.push(item.sum1);
yDataList2.push(item.sum2);
});
// option2 = {
// color: ['#ff9f7f', '#ffd85c'],
// grid:{
// left:"20%",
// right:"10%",
// bottom:"25%",
// top:"10%"
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: xDataList,
// axisLabel: {
// show: true,
// textStyle: {
// color: '#ffffff', //更改坐标轴文字颜色
// fontSize: 14 //更改坐标轴文字大小
// },
// // interval:0,
// // rotate:30
// //换行显示
// formatter: function(value) {
// let result = '' //拼接加\n返回的类目项
// let maxLength = 5 //每项显示文字个数
// let valLength = value.length //X轴类目项的文字个数
// let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
// if (rowNumber > 1) {
// //如果文字大于3,
// for (let i = 0; i < rowNumber; i++) {
// let temp = '' //每次截取的字符串
// let start = i * maxLength //开始截取的位置
// let end = start + maxLength //结束截取的位置
// temp = value.substring(start, end) + '\n'
// result += temp //拼接生成最终的字符串
// }
// return result
// } else {
// return value
// }
// }
// },
// axisLine: {
// lineStyle: {
// type: 'solid',
// color: '#37a2da', //左边线的颜色
// width: '1' //坐标线的宽度
// }
// },
// splitLine: {
// show: false
// }
// },
// yAxis: {
// type: 'value',
// axisLabel: {
// show: true,
// textStyle: {
// color: '#ffffff', //更改坐标轴文字颜色
// fontSize: 14 //更改坐标轴文字大小
// }
// },
// axisLine: {
// lineStyle: {
// type: 'solid',
// color: '#37a2da', //左边线的颜色
// width: '1' //坐标线的宽度
// }
// },
// splitLine: {
// show: true,
// lineStyle: {
// color: ['#37a2da'],
// width: 1,
// type: 'solid'
// }
// }
// },
// series: [{
// data: yDataList1,
// type: 'line',
// stack: '总量',
// label: {
// show: true
// },
// },
// {
// data: yDataList2,
// type: 'line',
// label: {
// show: true
// },
// }
// ]
// };
var option = {
color: ['#ff9f7f', '#37a2da'],
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: [{
name: yLabel1,
textStyle: {
color: '#ffffff'
}
},
{
name: yLabel2,
textStyle: {
color: '#ffffff'
}
}
]
},
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: true
},
data: xDataList,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
// interval:0,
// rotate:30
//换行显示
formatter: function(value) {
let result = '' //拼接加\n返回的类目项
let maxLength = 5 //每项显示文字个数
let valLength = value.length //X轴类目项的文字个数
let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
if (rowNumber > 1) {
//如果文字大于3,
for (let i = 0; i < rowNumber; i++) {
let temp = '' //每次截取的字符串
let start = i * maxLength //开始截取的位置
let end = start + maxLength //结束截取的位置
temp = value.substring(start, end) + '\n'
result += temp //拼接生成最终的字符串
}
return result
} else {
return value
}
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
formatter:'{value}%',
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#37a2da'],
width: 1,
type: 'solid'
}
}
},
series: [{
name: yLabel1,
type: 'line',
stack: '总量',
label: {
show: false
}
,
data: yDataList1
},
{
name: yLabel2,
type: 'bar',
stack: '总量2',
label: {
show: true,
formatter: '{c}%',//显示百分号
fontSize:16
},
data: yDataList2
}
]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
initBarAndLine3: function (divId, data, grid) {
var myChart = echarts.init(document.getElementById(divId));
if (data.length == 0)
return;
const yLabel1 = data[0].label1;
const yLabel2 = data[0].label2;
const xDataList = [];
const yDataList1 = [];
const yDataList2 = [];
$.each(data, function (index, item) {
xDataList.push(item.label);
yDataList1.push(item.sum1);
yDataList2.push(item.sum2);
});
// option2 = {
// color: ['#ff9f7f', '#ffd85c'],
// grid:{
// left:"20%",
// right:"10%",
// bottom:"25%",
// top:"10%"
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: xDataList,
// axisLabel: {
// show: true,
// textStyle: {
// color: '#ffffff', //更改坐标轴文字颜色
// fontSize: 14 //更改坐标轴文字大小
// },
// // interval:0,
// // rotate:30
// //换行显示
// formatter: function(value) {
// let result = '' //拼接加\n返回的类目项
// let maxLength = 5 //每项显示文字个数
// let valLength = value.length //X轴类目项的文字个数
// let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
// if (rowNumber > 1) {
// //如果文字大于3,
// for (let i = 0; i < rowNumber; i++) {
// let temp = '' //每次截取的字符串
// let start = i * maxLength //开始截取的位置
// let end = start + maxLength //结束截取的位置
// temp = value.substring(start, end) + '\n'
// result += temp //拼接生成最终的字符串
// }
// return result
// } else {
// return value
// }
// }
// },
// axisLine: {
// lineStyle: {
// type: 'solid',
// color: '#37a2da', //左边线的颜色
// width: '1' //坐标线的宽度
// }
// },
// splitLine: {
// show: false
// }
// },
// yAxis: {
// type: 'value',
// axisLabel: {
// show: true,
// textStyle: {
// color: '#ffffff', //更改坐标轴文字颜色
// fontSize: 14 //更改坐标轴文字大小
// }
// },
// axisLine: {
// lineStyle: {
// type: 'solid',
// color: '#37a2da', //左边线的颜色
// width: '1' //坐标线的宽度
// }
// },
// splitLine: {
// show: true,
// lineStyle: {
// color: ['#37a2da'],
// width: 1,
// type: 'solid'
// }
// }
// },
// series: [{
// data: yDataList1,
// type: 'line',
// stack: '总量',
// label: {
// show: true
// },
// },
// {
// data: yDataList2,
// type: 'line',
// label: {
// show: true
// },
// }
// ]
// };
var option = {
color: ['#37a2da'],
grid:{
left:"20%",
right:"10%",
bottom:"25%",
top:"10%"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: [
// {
// name: yLabel1,
// textStyle: {
// color: '#ffffff'
// }
// },
{
name: yLabel2,
textStyle: {
color: '#ffffff'
}
}
]
},
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: true
},
data: xDataList,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
// interval:0,
// rotate:30
//换行显示
formatter: function(value) {
let result = '' //拼接加\n返回的类目项
let maxLength = 5 //每项显示文字个数
let valLength = value.length //X轴类目项的文字个数
let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
if (rowNumber > 1) {
//如果文字大于3,
for (let i = 0; i < rowNumber; i++) {
let temp = '' //每次截取的字符串
let start = i * maxLength //开始截取的位置
let end = start + maxLength //结束截取的位置
temp = value.substring(start, end) + '\n'
result += temp //拼接生成最终的字符串
}
return result
} else {
return value
}
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
formatter:'{value}%',
textStyle: {
color: '#ffffff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#37a2da', //左边线的颜色
width: '1' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#37a2da'],
width: 1,
type: 'solid'
}
}
},
series: [
// {
// name: yLabel1,
// type: 'line',
// stack: '总量',
// label: {
// show: false
// }
// ,
// data: yDataList1
// },
{
name: yLabel2,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
stack: '总量2',
label: {
show: true,
formatter: '{c}%',//显示百分号
fontSize:16
},
data: yDataList2
}
]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
}