import echarts from 'echarts';
//从左往右颜色渐变
export const GradualChange = (color1, color2) => {
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 1, color: color1 + '' },
{ offset: 0, color: color2 + '' || color1 + '' }
]);
};
export const getColor = ([color1, color2]) => {
// 右 下 左 上
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: color1 + '' },
{ offset: 1, color: color2 + '' || color1 + '' }
]);
};
export const dateType = (date) => {
let val = '';
if (date) {
val = `${date.slice(0, 4)}年${date.slice(4)}月`;
} else {
val = date;
}
return val;
};
//折现波浪线颜色渐变
export const getItemStyle = (c1, c2) => {
return {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: c1 // 0% 处的颜色
},
{
offset: 1,
color: c2 // 100% 处的颜色
}
],
global: false // 缺省为 false
}
};
};
export const defaultMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
export const defaultName = ['name1', 'name2', 'name3'];
const defaultColor = [
GradualChange('#22D8FF', '#00B2FF'),
GradualChange('#F0646C', '#F4994E'),
GradualChange('#5EEDCC ', '#24C3F1'),
GradualChange('#7178FF', '#D2A4FF'),
GradualChange('#884DD2', '#DF63CC')
];
// 饼图
export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}) => {
let legendFcuntionValue = (v) => {
let val = '';
data.map((item) => {
if (item.name == v) {
if (legendFcuntion.type == '%') {
val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
} else {
val = `{a|${v}} · · · · · · {b|${item.value}}`;
}
}
});
return val;
};
return {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
right: 10,
top: 80,
itemGap: 10,
itemWidth: 12, // 图例图形宽度
itemHeight: 8,
type: 'scroll',
formatter: (v) => {
return legendFcuntionValue(v);
},
textStyle: {
rich: {
a: {
fontSize: 12,
color: '#858892',
padding: [0, 5, 0, 0]
},
b: {
fontSize: 14,
color: '#fff',
padding: [0, 0, 0, 5]
}
}
}
},
title,
color: !!color.length ? color : defaultColor,
series: [
{
type: 'pie',
// radius: ['55%', '70%'],
radius: ['55%', '70%'],
center: ['25%', '50%'],
avoidLabelOverlap: false,
// center: ['25%', '50%'],
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: data
}
]
};
};
// 折现波浪
export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
let option = {
tooltip: {
trigger: 'axis',
textStyle: {
fontSize: 12,
color: '#FFFFFF'
}
// formatter(param) {
// let el = ``;
// return el;
// }
},
grid: {
top: 50,
left: 5,
bottom: 0,
right: 5,
containLabel: true
},
legend: {
show: legendShow,
icon: 'circle',
x: 'right', // 可设定图例在左、右、居中
itemWidth: 8, // 图例图形宽度
itemHeight: 8,
itemGap: 20
},
xAxis: {
type: 'category',
axisLine: {
show: false // 不显示坐标轴
},
axisTick: {
show: false // 不显示坐标轴刻度
},
axisLabel: {
formatter: function (params, index) {
return params.slice(5);
},
color: '#9B9DA5',
margin: 16
},
data: xAxis,
axisPointer: {
type: 'shadow',
shadowStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(31,207,245,0)' // 0% 处的颜色
},
{
offset: 0.8,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 0.2,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(31,207,245,0.05)'
}
],
global: false // 缺省为 false
}
}
}
},
yAxis: {
type: 'value',
splitNumber: 4,
axisLine: {
show: false
},
name: name,
axisTick: {
show: false
},
axisLabel: {
color: '#9B9DA5',
margin: 15,
textStyle: {
align: 'right',
baseline: 'middle'
}
},
nameLocation: 'end',
nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
splitLine: {
lineStyle: {
type: 'dotted',
width: 0.2
}
}
},
series: [
{
// name: "设备告警",
type: 'line',
smooth: true,
symbol: 'circle', // 实心
symbolSize: 1, // 设定实心点的大小
itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
data: series,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(36,121,253,0.1)'
},
{
offset: 1,
color: 'rgba(19,194,247,0.3)'
}
])
}
},
lineStyle: {
width: 1
}
}
]
};
return option;
};
//柱状日期
export const columnOptionsChart = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
let defaultData = [
{
name: '',
type: 'bar',
data: []
}
];
let defaultColor = [
['#0EAEFF', '#85E9FF'],
['#F0646C', '#F4994E']
];
let seriesConfiguration = () => {
let seriesData = [];
series.map((item, index) => {
seriesData.push({
name: item.name,
type: 'bar',
data: item.data,
barWidth: barWidth,
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: getColor(color[index] || defaultColor[index])
}
},
barGap: '100%'
});
});
return seriesData;
};
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(31,207,245,0)' // 0% 处的颜色
},
{
offset: 0.8,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 0.2,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(31,207,245,0.05)'
}
],
global: false // 缺省为 false
}
},
crossStyle: {
shadowBlur: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
textStyle: {
fontSize: 12,
color: '#FFFFFF'
},
formatter(param) {
let el = ``;
return el;
}
},
grid: {
top: 50,
left: 0,
bottom: 0,
right: 0,
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: false // 不显示坐标轴
},
axisTick: {
show: false // 不显示坐标轴刻度
},
axisLabel: {
formatter: function (params, index) {
if (params.length == 2) {
return params + '月';
} else {
return params.slice(5) + '月';
}
},
color: '#9B9DA5',
margin: 15
},
data: !!xAxis.length ? xAxis : defaultMonth
},
yAxis: {
type: 'value',
splitNumber: 4,
name: name,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#9B9DA5',
margin: 15,
textStyle: {
align: 'right',
baseline: 'middle'
}
},
nameLocation: 'end',
nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
splitLine: {
lineStyle: {
type: 'dotted',
width: 0.5
}
}
},
legend: {
show: false,
x: 'right',
icon: 'circle',
itemWidth: 8, // 图例图形宽度
itemHeight: 8,
itemGap: 20
},
series: seriesConfiguration() || defaultData
};
return option;
};
//柱状name 单柱状
export const columnOptionsChartName = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
let defaultData = [
{
name: '',
type: 'bar',
data: []
}
];
let defaultColor = [
['#0EAEFF', '#85E9FF'],
['#F0646C', '#F4994E']
];
let seriesConfiguration = () => {
let seriesData = [
{
type: 'bar',
data: [],
barWidth: barWidth,
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: getColor(color[0] || defaultColor[0])
}
},
barGap: '100%'
}
];
series.map((item, index) => {
seriesData[0].data.push(item.data);
});
return seriesData;
};
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(31,207,245,0)' // 0% 处的颜色
},
{
offset: 0.8,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 0.2,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(31,207,245,0.05)'
}
],
global: false // 缺省为 false
}
},
crossStyle: {
shadowBlur: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
textStyle: {
fontSize: 12,
color: '#FFFFFF'
},
formatter(param) {
let el = ``;
param.forEach((item) => {
el += `
${item.name}：${item.value}${name}
`;
});
el += ``;
return el;
}
},
grid: {
top: 50,
left: 10,
bottom: 0,
right: 0,
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: false // 不显示坐标轴
},
axisTick: {
show: false // 不显示坐标轴刻度
},
axisLabel: {
formatter: function (params, index) {
return params;
},
color: '#9B9DA5',
margin: 15
},
data: !!xAxis.length ? xAxis : defaultName
},
yAxis: {
type: 'value',
splitNumber: 4,
name: name,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#9B9DA5',
margin: 15,
textStyle: {
align: 'right',
baseline: 'middle'
}
},
nameLocation: 'end',
nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
splitLine: {
lineStyle: {
type: 'dotted',
width: 0.5
}
}
},
legend: {
show: false,
x: 'right',
icon: 'circle',
itemWidth: 8, // 图例图形宽度
itemHeight: 8,
itemGap: 20
},
series: seriesConfiguration() || defaultData
};
return option;
};
// 柱状图堆叠
export const columnOptionsChartStacking = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
let defaultData = [
{
name: '',
type: 'bar',
data: []
}
];
let defaultColor = [
// ['#0EAEFF', '#85E9FF'],
['#0EAEFF', '#0EAEFF'],
['#85E9FF', '#85E9FF']
// ['#F0646C', '#F4994E']
];
let seriesConfiguration = () => {
let seriesData = [
{
type: 'bar',
data: [],
name: '',
barWidth: barWidth,
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: getColor(color[0] || defaultColor[0])
}
},
barGap: '100%'
},
{
type: 'bar',
data: [],
name: '',
barWidth: barWidth,
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: getColor(color[1] || defaultColor[1])
}
},
barGap: '-100%',
z: '1'
}
];
series.map((item, index) => {
seriesData[index].data = item.data;
seriesData[index].name = item.name;
});
return seriesData;
};
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(31,207,245,0)' // 0% 处的颜色
},
{
offset: 0.8,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 0.2,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(31,207,245,0.05)'
}
],
global: false // 缺省为 false
}
},
crossStyle: {
shadowBlur: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
textStyle: {
fontSize: 12,
color: '#FFFFFF'
},
formatter(param) {
let el = ``;
param.forEach((item) => {
el += `
${item.seriesName}：${item.value}${name}
`;
});
el += ``;
return el;
}
},
grid: {
top: 50,
left: 0,
bottom: 0,
right: 0,
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: false // 不显示坐标轴
},
axisTick: {
show: false // 不显示坐标轴刻度
},
axisLabel: {
formatter: function (params, index) {
return params;
},
color: '#9B9DA5',
margin: 15
},
data: !!xAxis.length ? xAxis : defaultName
},
yAxis: {
type: 'value',
splitNumber: 4,
name: name,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#9B9DA5',
margin: 15,
textStyle: {
align: 'right',
baseline: 'middle'
}
},
nameLocation: 'end',
nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
splitLine: {
lineStyle: {
type: 'dotted',
width: 0.5
}
}
},
legend: {
show: false,
x: 'right',
icon: 'circle',
itemWidth: 8, // 图例图形宽度
itemHeight: 8,
itemGap: 20
},
series: seriesConfiguration() || defaultData
};
return option;
};
// 折线日期 间隔4个
export const discountedChart = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
let option = {
tooltip: {
trigger: 'axis',
textStyle: {
fontSize: 12,
color: '#FFFFFF'
}
// formatter(param) {
// let el = ``;
// return el;
// }
},
grid: {
top: 50,
left: 5,
bottom: 0,
right: 5,
containLabel: true
},
legend: {
show: legendShow,
icon: 'circle',
x: 'right', // 可设定图例在左、右、居中
itemWidth: 8, // 图例图形宽度
itemHeight: 8,
itemGap: 20
},
xAxis: {
type: 'category',
axisLine: {
show: false // 不显示坐标轴
},
axisTick: {
show: false // 不显示坐标轴刻度
},
axisLabel: {
interval: 4,
// formatter: function (params, index) {
// return params.slice(5);
// },
color: '#9B9DA5',
margin: 16
},
data: xAxis,
axisPointer: {
type: 'shadow',
shadowStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(31,207,245,0)' // 0% 处的颜色
},
{
offset: 0.8,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 0.2,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(31,207,245,0.05)'
}
],
global: false // 缺省为 false
}
}
}
},
yAxis: {
type: 'value',
splitNumber: 4,
axisLine: {
show: false
},
name: name,
axisTick: {
show: false
},
axisLabel: {
color: '#9B9DA5',
margin: 15,
textStyle: {
align: 'right',
baseline: 'middle'
}
},
nameLocation: 'end',
nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
splitLine: {
lineStyle: {
type: 'dotted',
width: 0.2
}
}
},
series: [
{
// name: "设备告警",
type: 'line',
smooth: true,
symbol: 'circle', // 实心
symbolSize: 1, // 设定实心点的大小
itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
data: series,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(36,121,253,0.1)'
},
{
offset: 1,
color: 'rgba(19,194,247,0.3)'
}
])
}
},
lineStyle: {
width: 1
}
}
]
};
return option;
};
// 漏斗图
export const funnelChart = (dataseries = [], series = []) => {
// var colors=[['#22D8FF','#00B2FF']]
var colorList = [
{
colorStops: [
{
offset: 0,
color: '#22D8FF' // 0% 处的颜色
},
{
offset: 1,
color: '#00B2FF' // 100% 处的颜色
}
]
},
{
colorStops: [
{
offset: 0,
color: '#5EEDCC' // 0% 处的颜色
},
{
offset: 1,
color: '#24C3F1' // 100% 处的颜色
}
]
},
{
colorStops: [
{
offset: 0,
color: '#F0646C' // 0% 处的颜色
},
{
offset: 1,
color: '#F4994E' // 100% 处的颜色
}
]
},
{
colorStops: [
{
offset: 0,
color: '#7178FF' // 0% 处的颜色
},
{
offset: 1,
color: '#D2A4FF ' // 100% 处的颜色
}
]
},
{
colorStops: [
{
offset: 0,
color: '#884DD2' // 0% 处的颜色
},
{
offset: 1,
color: '#DF63CC' // 100% 处的颜色
}
]
}
];
let option = {
title: {
text: ''
},
// backgroundColor:'#ffffff',
color: colorList,
series: [
{
top: 0,
type: 'funnel',
left: '10%',
top: '15%',
width: '50%',
height: '85%',
gap: 0,
minSize: 50,
maxSize: 260,
label: {
show: true,
position: 'inside',
// formatter: '{d}'
formatter: function (data) {
return data.percent.toFixed(0) + '%';
},
textStyle: {
shadowOffsetX: 0,
fontSize: '14',
shadowColor: 'rgba(0, 0, 0, 0)',
color: '#FFFFFF'
}
},
data: dataseries
},
{
top: 0,
type: 'funnel',
left: '0',
width: '30%',
height: '85%',
top: '15%',
gap: 16,
z: 1,
// minSize: 50,
// maxSize: 50,
label: {
normal: {
// padding :[11,25],
formatter: function (params) {
let el = `{a|${params.name}} {b|${params.value}}`;
return el;
},
textStyle: {
rich: {
a: {
fontSize: 12,
color: '#858892',
padding: [0, 5, 0, 0]
},
b: {
fontSize: 14,
color: '#fff',
padding: [0, 0, 0, 5]
}
}
}
}
},
//右侧的百分比显示的地方
labelLine: {
show: true,
normal: {
show: false,
length: 200,
position: 'center',
lineStyle: {
width: 1,
color: 'red',
type: 'solid'
}
}
},
// 主体是透明的
itemStyle: {
normal: {
color: 'transparent',
borderWidth: 0,
opacity: 1
}
},
data: series
}
]
};
return option;
};
// 柱状图 双个柱图
export const columnOptionsChartss = (name = '', xAxis = [], series = [], dataseries = [], dataName = [], color = [], barWidth = 6) => {
let defaultData = [
{
name: '',
type: 'bar',
data: []
}
];
let defaultColor = [
['#0EAEFF', '#85E9FF'],
['#F0646C', '#F4994E']
];
let seriesConfiguration = () => {
let seriesData = [
{
name: '',
type: 'bar',
data: [],
barWidth: barWidth,
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: getColor(color[0] || defaultColor[0])
}
},
barGap: '100%'
},
{
name: '',
type: 'bar',
data: [],
barWidth: barWidth,
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: getColor(color[1] || defaultColor[1])
}
},
barGap: '100%'
}
];
series.map((item, index) => {
seriesData[0].data.push(item.data);
seriesData[0].name = dataName[0];
});
dataseries.map((items, indexs) => {
seriesData[1].data.push(items.data);
seriesData[1].name = dataName[1];
});
return seriesData;
};
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(31,207,245,0)' // 0% 处的颜色
},
{
offset: 0.8,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 0.2,
color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(31,207,245,0.05)'
}
],
global: false // 缺省为 false
}
},
crossStyle: {
shadowBlur: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
textStyle: {
fontSize: 12,
color: '#FFFFFF'
},
formatter(param) {
let el = ``;
let elitem = ``;
param.forEach((item) => {
elitem = `${item.name}
`;
el += `
${item.seriesName}：${item.value}${name}
`;
});
el += ``;
return elitem + el;
}
},
grid: {
top: 50,
left: 10,
bottom: 0,
right: 0,
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: false // 不显示坐标轴
},
axisTick: {
show: false // 不显示坐标轴刻度
},
axisLabel: {
formatter: function (params, index) {
return params;
},
color: '#9B9DA5',
margin: 15
},
data: !!xAxis.length ? xAxis : defaultName
},
yAxis: {
type: 'value',
splitNumber: 4,
name: name,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#9B9DA5',
margin: 15,
textStyle: {
align: 'right',
baseline: 'middle'
}
},
nameLocation: 'end',
nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
splitLine: {
lineStyle: {
type: 'dotted',
width: 0.5
}
}
},
legend: {
show: true,
x: 'right',
icon: 'circle',
itemWidth: 8, // 图例图形宽度
itemHeight: 8,
itemGap: 20,
textStyle: {
color: '#FFF'
}
},
series: seriesConfiguration() || defaultData
};
return option;
};