/**
* 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: false,
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对象
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 = 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: 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();
});
},
// 上下两端都有数字的柱状图，算比例
// 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,
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: '打卡',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight'
},
data: yDataList
},
{
name: '未打卡',
type: 'bar',
stack: '总量',
label: {
show: true,
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} <br/>{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} <br/>{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);
});
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',
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: [{
name: yLabel1,
type: 'line',
stack: '总量',
label: {
show: true
},
data: yDataList1
},
{
name: yLabel2,
type: 'bar',
stack: '总量',
label: {
show: true
},
data: yDataList2
}
]
};
if (grid != null && grid != undefined){
option.grid = grid;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
}