//从左往右颜色渐变
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"];
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%'],
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;
}