const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
var time1 = () => {
}
var time2 = () => {
}
var time3 = () => {
}
var time4 = () => {
}
// 随机数
const random = (val = 1) => {
return Math.ceil(Math.random() * val)
}
// 水平圆角带背景柱状图
const horizontalRoundedBarChartWithBackground = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
yName: ["设备001", "设备001", "设备001", "设备001", "设备001"],
xData: [53, 24, 66, 23, 100],
xDataName: "达成率",
}
}
let backGround = []
data.xData.forEach(() => {
backGround.push(100)
})
let option = {
grid: {
left: "0%",
right: "12%",
bottom: "0%",
top: "0%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
textStyle: {
fontSize: 0.8 * vw
},
formatter: function (params) {
return (
params[0].name +
"
" +
"" +
params[0].seriesName +
" : " + params[0].value + '%'
);
},
},
dataZoom: [],
xAxis: {
show: false,
type: "value",
},
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data.yName,
}
],
series: [
{
name: data.xDataName,
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgb(57,89,255,1)",
},
{
offset: 1,
color: "rgb(46,200,207,1)",
},
]),
},
},
barWidth: vw,
data: data.xData,
label: {
show: true,
position: "right",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
formatter: '{c}%'
},
},
{
name: "背景",
type: "bar",
barWidth: vw,
barGap: "-100%",
data: backGround,
itemStyle: {
normal: {
color: "rgba(24,31,68,1)",
barBorderRadius: 30,
},
},
},
],
};
// if (data.xData?.length >= 3) {
// option.dataZoom.push({
// show: true,
// type: 'slider',
// yAxisIndex: 0,
// width: 0.75 * vw,
// start: 0,
// end: 1 / (data.xData.length / 4) * 100,
// textStyle: {
// fontSize: 0,
// color: 'rgba(0,0,0,0)'
// }
// })
// }
charts.setOption(option);
$(window).resize(charts.resize);
}
const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
clearInterval(time1)
let charts = echarts.init(id);
if (!data) {
data = {
yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"],
yData: [41, 99, 32, 41, 24, 4, 16, 64, 18],
xDataName: "达成率",
status: [1, 1, 1, 1, 1, 1, 1, 1, 1]
}
}
let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
let bgBar = []
data.yData.forEach(() => {
bgBar.push(100)
})
let option = {
grid: {
// left: "-10%",
left: "0%",
right: "8%",
bottom: "0%",
top: "0%",
containLabel: true,
},
dataZoom: [],
xAxis: {
show: false,
},
yAxis: [
{
show: true,
data: data.yNameOne,
inverse: true,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
// margin:150,
fontSize: 0.75 * vw,
textStyle: {
textAlign: 'center'
},
},
},
],
series: [
{
name: "条",
type: "bar",
yAxisIndex: 0,
data: data.yData,
barWidth: '80%',
itemStyle: {
normal: {
barBorderRadius: 30,
color: function (params) {
return myColor[data.status[params.dataIndex]];
},
},
},
},
{
name: "框",
type: "bar",
yAxisIndex: 0,
barGap: "-100%",
data: bgBar,
barWidth: '80%',
label: {
show: true,
position: "right",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
formatter: function (val, index, e) {
return data.yData[val.dataIndex] + '%'
}
},
itemStyle: {
normal: {
color: "none",
borderColor: "#00c1de",
borderWidth: 1,
barBorderRadius: 15,
},
},
},
],
};
if (data.yNameOne.length > 8) {
option.dataZoom.push({
show: false,
type: 'slider',
bottom: '0%',
yAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.yNameOne.length / 9) * 100,
textStyle: {
fontSize: 0,
color: 'rgba(0,0,0,0)'
}
})
let step = 1 / (data.yNameOne.length / 9) * 100
time1 = setInterval(() => {
option.dataZoom[0].end += step
option.dataZoom[0].start += step
if (option.dataZoom[0].start >= 100) {
option.dataZoom[0].start = 0
option.dataZoom[0].end = step
}
if (option.dataZoom[0].end >= 100) {
option.dataZoom[0].end = 100
option.dataZoom[0].start = option.dataZoom[0].end - step
}
charts.setOption(option);
}, 6000)
// time()
}
charts.setOption(option);
$(window).resize(charts.resize);
}
// 柱状+折线图
const barChartAndLineChart = function (data, id, rotate = 0) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
yDataOne: [200, 382, 102, 267, 186, 315, 316],
yDataOneName: "成品数量",
yDataTwo: [382, 102, 186, 200, 102, 186, 315],
yDataTwoName: "成品数量",
}
}
let option = {
tooltip: {
textStyle: {
fontSize: 0.8 * vw
}
},
grid: {
top: "15%",
left: "1%",
right: "1%",
bottom: "8%",
containLabel: true,
},
legend: {
show: false,
itemGap: 50,
data: ["注册总量", "最新注册量"],
textStyle: {
color: "#f9f9f9",
borderColor: "#fff",
},
},
dataZoom: [],
xAxis: [
{
type: "category",
boundaryGap: true,
axisLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.3,
},
},
axisLabel: {
rotate: rotate,
interval: 0,
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
data: data.xName,
},
],
yAxis: [
{
type: "value",
min: 0,
// max: 140,
splitNumber: 7,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.3,
},
},
axisLabel: {
margin: 20,
textStyle: {
color: "#d1e6eb",
fontSize: 0.75 * vw
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: data.yDataOneName || '',
type: "line",
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 6,
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#8fb9d7",
},
{
offset: 1,
color: "#0F59E6",
},
]),
},
borderColor: "#f0f",
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
},
itemStyle: {
normal: {
color: "#A5DBF3",
},
},
tooltip: {
show: false
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(12,120,249,0.4)",
},
{
offset: 1,
color: "rgba(0,0,0, 0)",
},
],
false
),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: data.yDataOne || [],
},
{
name: data.yDataTwoName,
type: "bar",
barWidth: vw,
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
},
},
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0CAFF6",
},
{
offset: 1,
color: "#0F59E6",
},
]),
},
},
data: data.yDataTwo,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const barChartAndLineChartTwo = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
yDataOneName: "百分比",
yDataTwo: [382, 102, 186, 200, 102, 186, 315, 255, 527, 837, 587, 173],
yDataTwoName: "成品数量",
}
}
let option = {
grid: {
top: "15%",
left: "1%",
right: "1%",
bottom: "2%",
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
label: {
fontSize: 0.5 * vw,
}
},
textStyle: {
fontSize: 0.5 * vw,
}
},
legend: {
data: [data.yDataOneName, data.yDataTwoName],
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
},
xAxis: [
{
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
},
type: 'category',
data: data.xName,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
formatter: '{value} %'
}
},
{
type: 'value',
splitLine: {
show: false,
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
formatter: '{value} '
}
}
],
series: [
{
name: data.yDataOneName,
type: 'bar',
data: data.yDataOne,
label: {
show: true,
position: ['10%', `50%`],
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
itemStyle: {
normal: {
color: '#0BB5FB',
},
},
},
{
name: data.yDataTwoName,
type: 'line',
yAxisIndex: 1,
data: data.yDataTwo,
itemStyle: {
normal: {
color: '#0DB99D',
},
},
}
]
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const barChartAndLineChartThree = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
yDataOne: [200, 382, 102, 267, 186, 315, 316],
yDataOneName: "实际产量",
yDataTwo: [382, 102, 186, 200, 102, 186, 315],
yDataTwoName: "目标产量",
}
}
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
crossStyle: {
color: '#999',
},
label: {
fontSize: 0.5 * vw,
}
},
textStyle: {
fontSize: 0.8 * vw
}
},
grid: {
top: "15%",
left: "1%",
right: "1%",
bottom: "8%",
containLabel: true,
},
legend: {
show: true,
itemGap: 50,
data: [data.yDataOneName, data.yDataTwoName],
textStyle: {
color: "#f9f9f9",
borderColor: "#fff",
fontSize: 0.75 * vw
},
},
dataZoom: [],
xAxis: [
{
type: "category",
boundaryGap: true,
axisLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.3,
},
},
axisLabel: {
interval: 0,
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
data: data.xName,
},
],
yAxis: [
{
type: "value",
min: 0,
// max: 140,
splitNumber: 7,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.3,
},
},
axisLabel: {
margin: 20,
textStyle: {
color: "#d1e6eb",
fontSize: 0.75 * vw
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: data.yDataOneName,
type: "bar",
barWidth: '70%',
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
},
itemStyle: {
normal: {
barBorderRadius: 5,
color: function (val) {
console.log()
if (data.yDataOne[val.dataIndex] >= data.yDataTwo[val.dataIndex]) {
return '#30e391'
} else {
return '#FE70A6'
}
// return "#0D81ED"
},
},
},
data: data.yDataOne,
},
{
name: data.yDataTwoName || '',
type: "line",
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 6,
lineStyle: {
normal: {
width: 3,
color: '#fff',
},
borderColor: "#f0f",
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
},
itemStyle: {
color: '#F2D770',
border: 0,
},
// tooltip: {
// show: false
// },
data: data.yDataTwo || [],
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const barChartAndLineChartFour = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
yDataOneName: "不良数",
yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5],
yDataTwoName: "一次装配不合格率",
yDataThree: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
yDataThreeName: "目标",
}
}
let option = {
grid: {
top: "15%",
left: "1%",
right: "1%",
bottom: "2%",
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
label: {
fontSize: 0.5 * vw,
}
},
textStyle: {
width: 30,
fontSize: 0.5 * vw,
}
},
legend: {
itemWidth: 3 * vw,
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
},
xAxis: [
{
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
},
type: 'category',
data: data.xName,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
formatter: '{value}'
}
},
{
type: 'value',
splitLine: {
show: false,
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
formatter: '{value}% '
}
}
],
series: [
{
name: data.yDataOneName,
type: 'bar',
data: data.yDataOne,
label: {
show: true,
position: 'top',
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
itemStyle: {
normal: {
color: function (val) {
console.log()
if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]) {
return '#30e391'
} else {
return '#FE70A6'
}
// return "#0D81ED"
},
},
},
},
{
name: data.yDataTwoName,
type: 'line',
yAxisIndex: 1,
data: data.yDataTwo,
itemStyle: {
normal: {
color: '#F9A25B',
},
},
},
{
name: data.yDataThreeName,
type: 'line',
yAxisIndex: 1,
data: data.yDataThree,
itemStyle: {
normal: {
color: '#0DB99D',
},
},
}
]
};
if (Math.max(...data.yDataOne) <= 5) {
option.yAxis[0].max = 5
}
charts.setOption(option);
$(window).resize(charts.resize);
}
// 折线图
const lineChart = function (data, id, unit = '',smooth=false,color='#14bd2d') {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
yDataName: "提升百分比",
}
}
let min = Math.ceil(Math.min(...data.yData))
let max = Math.ceil(Math.max(...data.yData))
let option = {
grid: {
top: '28%',
left: '5%',
right: '5%',
bottom: '0%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
},
},
},
legend: {
top: '5%',
itemWidth:20,
itemHeight:10,
itemStyle:{
borderWidth:1,
borderHeight:1,
},
formatter:function (val) {
return `${val} `
},
textStyle: {
fontSize: 0.75 * vw,
color: function () {
},
},
},
xAxis: {
type: 'category',
data: data.xName,
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //X轴文字颜色
},
},
},
yAxis: [
{
name:'合格率',
min: (min - 2 < 0) ? 0 : min - 2,
max: (max + 2 > 100) ? 100 : max + 2,
type: 'value',
nameTextStyle: {
color: '#fff',
},
splitLine: {
show: false,
lineStyle: {
color: '#eeeeee',
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
interval:0,
textStyle: {
color: '#ffffff',
},
},
},
],
series: [
{
name: data.yDataName,
type: 'line',
smooth:smooth,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: color,
borderWidth: '2',
borderColor: color,
},
lineStyle: {
color: color,
},
label: {
//图形上的文本标签
normal: {
formatter: `{c}${unit}`,
show: true,
position: "top",
textStyle: {
color: color,
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.5 * vw,
},
},
},
data: data.yData,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const lineChartTwo = function (data, id, unit = '') {
let charts = echarts.init(id);
let color = ['#3094ea','#2fd032','#6ba72c','#7b6931','#8909E5']
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yData: [
{
name: "提升百分比",
data: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
},
{
name: "百分比",
data: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
},
],
}
}
let num = data.yData.map(val => val.data).flat(Infinity)
let min = Math.ceil(Math.min(...num))
let max = Math.ceil(Math.max(...num))
let series = data.yData.map((val,index) => {
return {
name: val.name,
type: 'line',
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: color[index % color.length],
borderWidth: '2',
borderColor: color[index % color.length],
},
lineStyle: {
color: color[index % color.length],
},
label: {
//图形上的文本标签
normal: {
formatter: `{c}${unit}`,
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.8 * vw,
},
},
},
data: val.data,
}
})
let option = {
grid: {
top: '20%',
left: '5%',
right: '5%',
bottom: '8%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
},
},
},
legend: {
top: '5%',
itemWidth:20,
itemHeight:10,
formatter:function (val) {
return `${val}`
},
textStyle: {
fontSize: 0.75 * vw,
color: () => {},
},
},
xAxis: {
type: 'category',
data: data.xName,
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //X轴文字颜色
},
},
},
yAxis: [
{
min: (min - 2 < 0) ? 0 : min - 2,
max: (max + 2 > 100) ? 100 : max + 2,
type: 'value',
nameTextStyle: {
color: '#393939',
},
splitLine: {
show: false,
lineStyle: {
color: '#eeeeee',
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
},
},
},
],
series: series,
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const lineChartThree = function (data, id, unit = '',smooth=false) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
yDataName: "提升百分比",
yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
yDataTwoName: "百分比"
}
}
let min = Math.ceil(Math.min(...data.yData,...(data.yDataTwo || [])))
let max = Math.ceil(Math.max(...data.yData,...(data.yDataTwo || [])))
let option = {
grid: {
top: '28%',
left: '5%',
right: '5%',
bottom: '0%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
},
},
},
legend: {
top: '5%',
itemWidth:20,
itemHeight:10,
itemStyle:{
borderWidth:1,
borderHeight:1,
},
formatter:function (val) {
return `${val} `
},
textStyle: {
fontSize: 0.75 * vw,
color: function () {
},
},
},
xAxis: {
type: 'category',
data: data.xName,
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //X轴文字颜色
},
},
},
yAxis: [
{
name:'(元/台)',
min: (min - 2 < 0) ? 0 : min - 2,
max: (max + 2 > 100) ? 100 : max + 2,
type: 'value',
nameTextStyle: {
color: '#fff',
},
splitLine: {
show: false,
lineStyle: {
color: '#eeeeee',
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
interval:0,
textStyle: {
color: '#ffffff',
},
},
},
],
series: [
{
name: data.yDataName,
type: 'line',
smooth:smooth,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: '#14bd2d',
borderWidth: '2',
borderColor: '#14bd2d',
},
lineStyle: {
color: '#14bd2d',
},
label: {
//图形上的文本标签
normal: {
formatter: `{c}${unit}`,
show: true,
position: "top",
textStyle: {
color: "#14bd2d",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.8 * vw,
},
},
},
data: data.yData,
},
{
name: data.yDataTwoName,
type: 'line',
smooth:smooth,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: '#3094ea',
borderWidth: '2',
borderColor: '#3094ea',
},
lineStyle: {
color: '#3094ea',
},
label: {
//图形上的文本标签
normal: {
formatter: `{c}${unit}`,
show: true,
position: "top",
textStyle: {
color: "#3094ea",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.8 * vw,
},
},
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(76,82,193,0.7)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(191,194,220,0.4)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
},
data: data.yDataTwo,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 饼图
const pieChart = function (data, id, unit = '次') {
let charts = echarts.init(id);
if (!data) {
data = [
{
value: 285,
name: "类型1",
},
{
value: 410,
name: "类型2",
},
{
value: 274,
name: "类型3",
},
{
value: 235,
name: "类型4",
},
]
}
if (data.length === 0) {
data = [{
value: 0,
name: ''
}]
}
let option = {
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
textStyle: {
fontSize: 0.8 * vw
}
},
series: [
{
name: "访问来源",
type: "pie",
radius: "70%",
center: ["50%", "50%"],
colorBy: 'data',
// color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
data: data,
roseType: "radius",
label: {
normal: {
formatter: `{b|{b}} \n {c|{c}${unit}}`,
rich: {
c: {
color: "rgb(241,246,104)",
fontSize: 0.75 * vw,
lineHeight: 5,
},
b: {
color: "rgb(98,137,169)",
fontSize: 0.75 * vw,
height: 1.5 * vw,
},
},
},
},
emphasis: {
label: {
fontSize: 0.75 * vw
}
},
labelLine: {
normal: {
lineStyle: {
color: "rgb(98,137,169)",
},
smooth: true,
length: 20,
length2: 20,
},
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const pieChartTwo = function (data, id, unit = '次') {
let charts = echarts.init(id);
if (!data) {
data = [
{
value: 285,
name: "类型1",
},
{
value: 410,
name: "类型2",
},
{
value: 274,
name: "类型3",
},
{
value: 235,
name: "类型4",
},
]
}
if (data.length === 0) {
data = [{
value: 0,
name: ''
}]
}
let option = {
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
textStyle: {
fontSize: 0.8 * vw
}
},
series: [
{
name: "访问来源",
type: "pie",
radius: "50%",
center: ["50%", "50%"],
colorBy: 'data',
// color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
data: data,
roseType: "radius",
overflow:'break',
label: {
overflow:'break',
normal: {
overflow:'break',
formatter: `{b|{b}} \n {c|{c}${unit}}`,
rich: {
c: {
color: "rgb(241,246,104)",
fontSize: 0.75 * vw,
lineHeight: 5,
},
b: {
color: "rgb(98,137,169)",
fontSize: 0.75 * vw,
height: 1.5 * vw,
},
},
},
},
emphasis: {
label: {
fontSize: 0.75 * vw
}
},
labelLine: {
normal: {
lineStyle: {
color: "rgb(98,137,169)",
},
smooth: true,
length: 5,
length2: 5,
},
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 垂直柱状图
const verticalBarChart = function (data, id, unit = '次') {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["0-3分钟", "3-10分钟", ">10分钟"],
yData: [254, 3254, 1654],
}
}
let option = {
tooltip: {
textStyle: {
fontSize: 0.8 * vw
}
},
grid: {
top: "10%",
left: "1%",
right: "1%",
bottom: "1%",
containLabel: true,
},
xAxis: {
data: data.xName,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 0.8 * vw,
interval: 0,
},
},
yAxis: {
nameTextStyle: {
color: "#fff",
fontSize: 0.8 * vw,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 0.8 * vw,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [
{
type: "bar",
barWidth: data.yData.length<4? 2*vw:'75%',
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 0.8 * vw,
color: '#fff'
},
formatter: `{c}${unit}`
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00b0ff",
},
{
offset: 0.8,
color: "#7052f4",
},
],
false
),
},
},
data: data.yData,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 多个垂直柱状图
const multipleVerticalBarChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: [
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
],
yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6],
yDataOneName: "制氢",
yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6],
yDataTwoName: "发电",
yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6],
yDataThreeName: "充装",
}
}
let option = {
tooltip: {
//提示框组件
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
// trigger: "axis",
// formatter: `{b}
{a0}: {c0}
{a1}: {c1}`,
// axisPointer: {
// type: "shadow",
// label: {
// backgroundColor: "#6a7985",
// },
// },
// textStyle: {
// color: "#fff",
// fontStyle: "normal",
// fontFamily: "微软雅黑",
// fontSize: 12,
// },
},
grid: {
left: "1%",
right: "4%",
bottom: "0",
top: 30,
padding: "0 0 10 0",
containLabel: true,
},
legend: {
//图例组件，颜色和名字
right: 10,
top: 0,
itemGap: 16,
itemWidth: vw,
itemHeight: 0.6 * vw,
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
dataZoom: [],
xAxis: [
{
type: "category",
boundaryGap: true, //坐标轴两边留白
data: data.xName,
axisLabel: {
show: true,
color: '#fff'
},
axisTick: {
//坐标轴刻度相关设置。
show: false,
},
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: "#fff",
opacity: 0.2,
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
},
],
yAxis: {
type: "value",
splitNumber: 5,
max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5,
axisLabel: {
show: true,
color: '#fff'
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
},
series: [
{
name: data.yDataOneName,
type: "bar",
data: data.yDataOne,
barWidth: 1 * vw,
barGap: 0, //柱间距离
label: {
//图形上的文本标签
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
//图形样式
normal: {
barBorderRadius: [5, 5, 0, 0],
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgb(21, 148, 244)',
},
{
offset: 1,
color: 'rgb(13, 48, 243)',
},
],
},
},
},
},
{
name: data.yDataTwoName,
type: "bar",
data: data.yDataTwo,
barWidth: 1 * vw,
barGap: 0.5, //柱间距离
label: {
//图形上的文本标签
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
//图形样式
normal: {
barBorderRadius: [5, 5, 0, 0],
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#0DCEB1',
},
{
offset: 1,
color: '#14A15A',
},
],
},
},
},
},
{
name: data.yDataThreeName,
type: "bar",
data: data.yDataThree,
barWidth: 1 * vw,
barGap: 0.5, //柱间距离
label: {
//图形上的文本标签
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
//图形样式
normal: {
barBorderRadius: [5, 5, 0, 0],
color: "rgba(26, 99, 74, 0.7)",
},
},
},
],
};
if (data?.xName?.length >= 4) {
option.dataZoom.push({
show: true,
type: 'slider',
bottom: '0%',
xAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.xName.length / 4) * 100,
textStyle: {
fontSize: 0,
color: 'rgba(0,0,0,0)'
}
})
option.grid.bottom = '7%'
}
charts.setOption(option);
$(window).resize(charts.resize);
}
const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '',margin=20,isColor=true) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
yDataOne: [22, 52, 55, 12, 35, 44, 66],
yDataOneName: 'a1',
yDataTwo: [32, 42, 50, 22, 30, 40, 52],
yDataTwoName: "a2",
}
}
let option = {
grid: {
top: "20%",
left: "1%",
right: "1%",
bottom: "1%",
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
right:'0',
data: [data.yDataOneName, data.yDataTwoName],
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
axisLabel: {
rotate: rotate,
margin: margin,
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
data: data.xName
}
],
yAxis: [
{
axisLabel: {
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
type: 'value'
}
],
series: [
{
name: data.yDataOneName,
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
barWidth: '30%',
itemStyle: {
//图形样式
normal: {
color: isColor? '#db8151': "#64BCEC",
},
},
label: {
show: true,
position: "top",
formatter: `{c}${unit}`,
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
data: data.yDataOne
},
{
name: data.yDataTwoName,
type: 'bar',
emphasis: {
focus: 'series'
},
barWidth: '30%',
barGap: '40%',
label: {
show: true,
position: "top",
formatter: `{c}${unit}`,
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
itemStyle: {
//图形样式
normal: {
color: isColor? '#9ce375': "#4FD3B9",
},
},
data: data.yDataTwo
},
]
};
if (data?.length >= 3) {
option.dataZoom.push({
show: true,
type: 'slider',
xAxisIndex: 0,
width: 12,
start: 0,
end: 1 / (data.length / 3) * 100,
textStyle: {
fontSize: 0,
}
})
}
charts.setOption(option);
$(window).resize(charts.resize);
}
const multipleVerticalBarChartThree = function (data, id, rotate = 0) {
clearInterval(time4)
let charts = echarts.init(id);
if (!data) {
data = {
xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '7月', '7月'],
yDataOne: [22, 52, 55, 12, 35, 44, 66, 44, 66],
yDataOneName: 'a1',
yDataTwo: [32, 42, 50, 22, 30, 40, 52, 44, 66],
yDataTwoName: "a2",
yDataThree: [32, 42, 50, 22, 30, 40, 52, 44, 66],
yDataThreeName: "a3",
yDataFour: [32, 42, 50, 22, 30, 40, 52, 44, 66],
yDataFourName: "a4",
}
}
let option = {
grid: {
top: "20%",
left: "1%",
right: "1%",
bottom: "1%",
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName],
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
dataZoom: [],
xAxis: [
{
type: 'category',
axisTick: {show: false},
axisLabel: {
rotate: rotate,
margin: 20,
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
data: data.xName
}
],
yAxis: [
{
axisLabel: {
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
type: 'value'
}
],
series: [
{
name: data.yDataOneName,
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
itemStyle: {
//图形样式
normal: {
color: "#1FEDCA",
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
data: data.yDataOne
},
{
name: data.yDataTwoName,
type: 'bar',
emphasis: {
focus: 'series'
},
label: {
show: true,
position: "top",
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
itemStyle: {
//图形样式
normal: {
color: "#E65454",
},
},
data: data.yDataTwo
},
{
name: data.yDataThreeName,
type: 'bar',
emphasis: {
focus: 'series'
},
label: {
show: true,
position: "top",
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
itemStyle: {
//图形样式
normal: {
color: "#351865",
},
},
data: data.yDataThree
},
{
name: data.yDataFourName,
type: 'bar',
emphasis: {
focus: 'series'
},
label: {
show: true,
position: "top",
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
itemStyle: {
//图形样式
normal: {
color: "#4b7232",
},
},
data: data.yDataFour
},
]
};
if (data.yDataOne.length > 7) {
option.dataZoom.push({
show: false,
type: 'slider',
bottom: '0%',
xAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.yDataOne.length / 6) * 100,
textStyle: {
fontSize: 0,
color: 'rgba(0,0,0,0)'
}
})
let step = 1 / (data.yDataOne.length / 6) * 100
time4 = setInterval(() => {
option.dataZoom[0].end += step
option.dataZoom[0].start += step
if (option.dataZoom[0].start >= 100) {
option.dataZoom[0].start = 0
option.dataZoom[0].end = step
}
if (option.dataZoom[0].end >= 100) {
option.dataZoom[0].end = 100
option.dataZoom[0].start = option.dataZoom[0].end - step
}
charts.setOption(option);
}, 6000)
// time()
}
charts.setOption(option);
$(window).resize(charts.resize);
}
// 单个垂直柱状图
const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') {
clearInterval(time3)
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
yData: [12, 20, 11, 30, 14, 80, 50],
}
}
let left = () => {
if (vw < 10) return '18%'
return '10%'
}
let option = {
grid: {
top: "10%",
left: left(),
right: "5%",
bottom: bottom,
// containLabel: true
},
dataZoom: [],
xAxis: {
data: data.xName,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 0.5 * vw,
interval: 0,
rotate: rotate,
},
},
yAxis: {
nameTextStyle: {
color: "#fff",
fontSize: 16,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 16,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [
{
type: "bar",
barWidth: 1 * vw,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00b0ff",
},
{
offset: 0.8,
color: "#7052f4",
},
],
false
),
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
},
data: data.yData,
},
],
};
if (data.yData.length > 8) {
option.dataZoom.push({
show: false,
type: 'slider',
bottom: '0%',
xAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.yData.length / 9) * 100,
textStyle: {
fontSize: 0,
color: 'rgba(0,0,0,0)'
}
})
let step = 1 / (data.yData.length / 9) * 100
time3 = setInterval(() => {
option.dataZoom[0].end += step
option.dataZoom[0].start += step
if (option.dataZoom[0].start >= 100) {
option.dataZoom[0].start = 0
option.dataZoom[0].end = step
}
if (option.dataZoom[0].end >= 100) {
option.dataZoom[0].end = 100
option.dataZoom[0].start = option.dataZoom[0].end - step
}
charts.setOption(option);
}, 6000)
// time()
}
charts.setOption(option);
$(window).resize(charts.resize);
}
const singleVerticalBarChartTwo = function (data, id) {
clearInterval(time2)
let time = () => {
}
let charts = echarts.init(id);
if (!data) {
data = {
xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
yData: [38, 60, 40, 55, 42, 39, 45, 40],
yImg: ['', '', '', '', '', '', '', ''],
}
}
let bottom = data.yData.map(val => 1)
let option = {
backgroundColor: 'rgba(0,0,0,0)',
color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
grid: {
top: "20%",
bottom: "15%",
right: "5%"
},
dataZoom: [],
xAxis: {
margin: 10,
nameTextStyle: {
color: '#c0c3cd',
padding: [0, 0, -10, 0],
fontSize: 14,
},
axisLabel: {
color: '#c0c3cd', //X轴文字
fontSize: 14,
interval: 0,
margin: 20,
rotate: -20,
},
axisTick: {
lineStyle: {
color: '#0B1535',
width: 1,
},
show: false,
},
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: '#384267',
width: 1,
type: 'dashed',
},
show: true,
},
data: data.xName,
type: 'category',
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#c0c3cd',
padding: [0, 0, -10, 0],
fontSize: 14,
},
axisLabel: {
color: '#c0c3cd', //Y轴文字
fontSize: 14,
},
axisTick: {
lineStyle: {
color: '#384267',
width: 1,
},
show: true,
},
splitLine: {
show: true,
lineStyle: {
color: '#384267',
type: 'line',
},
},
axisLine: {
lineStyle: {
color: '#fff',
width: 1,
type: 'line',
},
show: false,
},
},
series: [
{
data: data.yData,
type: 'bar',
barMaxWidth: 'auto',
barWidth: 1.5 * vw,
itemStyle: {
color: function (val) {
if (data.yData.length - val.dataIndex === 1) {
return 'red'
} else if (data.yData.length - val.dataIndex === 2) {
return 'yellow'
} else {
return '#35AAFE'
}
}
},
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
}
},
{
data: data.yData,
type: 'pictorialBar',
barMaxWidth: vw,
symbolPosition: 'end',
symbol: 'diamond',
itemStyle: {
color: function (val) {
if (data.yData.length - val.dataIndex === 1) {
return 'red'
} else if (data.yData.length - val.dataIndex === 2) {
return 'yellow'
} else {
return '#66c8ff'
}
}
},
symbolOffset: ['25%', '-50%'],
symbolSize: [1.5 * vw, 10],
zlevel: 4,
},
{
data: bottom,
type: 'pictorialBar',
barMaxWidth: vw,
symbolPosition: 'end',
symbol: 'diamond',
itemStyle: {
color: function (val) {
if (data.yData.length - val.dataIndex === 1) {
return 'red'
} else if (data.yData.length - val.dataIndex === 2) {
return 'yellow'
} else {
return '#66c8ff'
}
}
},
symbolOffset: ['25%', '-20%'],
symbolSize: [1.5 * vw, 10],
zlevel: 4,
},
{
type: 'pictorialBar',
name: 'pictorial element',
symbol: function (val, index) {
return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
},
symbolSize: [40, 40],
z: 10,
data: data.yData.map(val => {
return {
value: val,
symbolPosition: 'end',
symbolOffset: [0, '-190%']
}
})
},
],
};
if (data.xName.length > 10) {
option.dataZoom.push({
show: false,
type: 'slider',
bottom: '0%',
xAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.xName.length / 11) * 100,
textStyle: {
fontSize: 0,
color: 'rgba(0,0,0,0)'
}
})
let step = 1 / (data.xName.length / 11) * 100
time2 = setInterval(() => {
option.dataZoom[0].end += step
option.dataZoom[0].start += step
if (option.dataZoom[0].start >= 100) {
option.dataZoom[0].start = 0
option.dataZoom[0].end = step
}
if (option.dataZoom[0].end >= 100) {
option.dataZoom[0].end = 100
option.dataZoom[0].start = option.dataZoom[0].end - step
}
charts.setOption(option);
}, 3000)
}
charts.setOption(option);
$(window).resize(charts.resize);
}
// 多个折线面积图(直线)
const multipleBrokenLineAreaDiagram = (data, ids) => {
let charts = echarts.init(ids);
function Fun() {
this.randomNum = function () {
let arr = []
for (let i = 0; i < 12; i++) {
arr.push(parseInt(Math.random() * 100))
}
return arr
}
}
if (!data) {
data = {
xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
yDataOne: new Fun().randomNum(),
yDataTwo: new Fun().randomNum(),
yDataOneName: '制氢量',
yDataTwoName: '发电量',
}
}
let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo))
let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo))
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
legend: {
icon: "rect",
itemWidth: 0.75 * vw,
itemHeight: 0.25 * vw,
itemGap: 0.75 * vw,
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
right: "4%",
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
dataZoom: [],
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#57617B",
},
},
axisLabel: {
show: true,
color: '#fff',
interval: 0,
},
data: data.xData,
},
],
yAxis: [
{
type: "value",
axisTick: {
show: false,
},
max: max + 0.5,
min: min - 1,
axisLine: {
lineStyle: {
color: "#57617B",
},
},
axisLabel: {
show: true,
color: '#fff',
interval: 0.5,
},
splitLine: {
show: false,
lineStyle: {
color: "#57617B",
},
},
},
],
series: [
{
name: data.yDataOneName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(137, 189, 27, 0.6)",
},
{
offset: 0.8,
color: "rgba(137, 189, 27, 0.2)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(137,189,27)",
},
},
label: {
//图形上的文本标签
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: data.yDataOne,
},
{
name: data.yDataTwoName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 136, 212, 0.6)",
},
{
offset: 0.8,
color: "rgba(0, 136, 212, 0.2)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(0,136,212)",
},
},
label: {
//图形上的文本标签
normal: {
show: true,
position: "bottom",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: data.yDataTwo,
},
{
name: data.yDataThreeName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(219, 50, 51, 0.6)",
},
{
offset: 0.8,
color: "rgba(219, 50, 51, 0.2)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(219,50,51)",
},
},
data: data.yDataThree,
},
],
};
if (data?.xData?.length >= 4) {
option.dataZoom.push({
show: true,
type: 'slider',
bottom: '0%',
xAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.xData.length / 4) * 100,
textStyle: {
fontSize: 0,
color: 'rgba(0,0,0,0)'
}
})
option.grid.bottom = '7%'
}
charts.setOption(option);
$(window).resize(charts.resize);
}
const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
let charts = echarts.init(ids);
function Fun() {
this.randomNum = function () {
let arr = []
for (let i = 0; i < 12; i++) {
arr.push(parseInt(Math.random() * 100))
}
return arr
}
}
if (!data) {
data = {
xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
yDataOne: new Fun().randomNum(),
yDataTwo: new Fun().randomNum(),
yDataOneName: '制氢量',
yDataTwoName: '发电量',
}
}
let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive))
let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive))
let option = {
tooltip: {
trigger: "axis",
// formatter:'{a} {c}%',
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
legend: {
icon: "rect",
itemWidth: 0.75 * vw,
itemHeight: 0.25 * vw,
itemGap: 0.75 * vw,
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName, data.yDataFiveName],
right: "4%",
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
dataZoom: [],
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#57617B",
},
},
axisLabel: {
show: true,
color: '#fff',
interval: 0,
},
data: data.xData,
},
],
yAxis: [
{
type: "value",
axisTick: {
show: false,
},
max: max + 1,
min: 90,
axisLine: {
lineStyle: {
color: "#57617B",
},
},
axisLabel: {
formatter: '{value}%',
show: true,
color: '#fff',
interval: 0.5,
},
splitLine: {
show: false,
lineStyle: {
color: "#57617B",
},
},
},
],
series: [
{
name: data.yDataOneName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
itemStyle: {
normal: {
color: "rgb(137,189,27)",
},
},
label: {
//图形上的文本标签
normal: {
show: true,
position: "top",
formatter: '{c}%',
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: data.yDataOne,
},
{
name: data.yDataTwoName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
itemStyle: {
normal: {
color: "rgb(0,136,212)",
},
},
label: {
//图形上的文本标签
normal: {
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: data.yDataTwo,
},
{
name: data.yDataThreeName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
itemStyle: {
normal: {
color: "rgb(219,50,51)",
},
},
label: {
//图形上的文本标签
normal: {
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: data.yDataThree,
},
{
name: data.yDataFourName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
itemStyle: {
normal: {
color: "rgb(0,136,212)",
},
},
label: {
//图形上的文本标签
normal: {
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: data.yDataFour,
},
{
name: data.yDataFiveName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
itemStyle: {
normal: {
color: "rgb(219,50,51)",
},
},
label: {
//图形上的文本标签
normal: {
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: data.yDataFive,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 空心饼图
const hollowPieChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = [
{
value: 10,
name: "IQC1",
},
{
value: 5,
name: "IQC2",
},
{
value: 15,
name: "IQC3",
},
{
value: 25,
name: "IQC4",
},
{
value: 20,
name: "IQC5",
},
{
value: 35,
name: "IQC6",
},
]
}
let option = {
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
grid: {
left: '-10%',
top: '10%',
bottom: '10%',
right: '10%',
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
},
polar: {},
angleAxis: {
interval: 1,
type: "category",
data: [],
z: 10,
axisLine: {
show: false,
},
axisLabel: {
show: false,
}
},
radiusAxis: {
min: 40,
max: 120,
interval: 20,
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
// calculable: true,
series: [
{
stack: "a",
type: "pie",
radius: ["20%", "80%"],
zlevel: 10,
label: {
show: false
},
// roseType: "area",
data: data,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 多个环形图
const percentageRingDiagram = function (data, id) {
let charts = echarts.init(id);
console.log(data)
data ??= [
{
name: "内胆检漏",
value: 54,
},
{
name: "安全检测",
value: 44,
},
{
name: "成品检漏",
value: 35,
},
{
name: "测温性能",
value: 30,
},
{
name: "成品外观",
value: 44,
},
];
let titleArr = [],
seriesArr = [];
let colors = [
["#389af4", "#dfeaff"],
["#ff8c37", "#ffdcc3"],
["#ffc257", "#ffedcc"],
["#fd6f97", "#fed4e0"],
["#a181fc", "#e3d9fe"],
["#389af4", "#dfeaff"],
["#ff8c37", "#ffdcc3"],
["#ffc257", "#ffedcc"],
["#fd6f97", "#fed4e0"],
];
data.forEach(function (item, index) {
titleArr.push({
text: item.name,
x: index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
y: index > 2 ? "93%" : "43%",
// top: '65%',
textAlign: "center",
textStyle: {
fontWeight: "normal",
fontSize: 0.8 * vw,
color: colors[index][0],
textAlign: "center",
},
});
seriesArr.push({
// name: item.name,
type: "pie",
clockWise: false,
radius: [2 * vw, 2.5 * vw],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: [
index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
index > 2 ? "75%" : "25%",
],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
return params.value + "%";
},
position: "center",
show: true,
textStyle: {
fontSize: vw,
fontWeight: "bold",
color: colors[index][0],
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
let option = {
title: titleArr,
series: seriesArr,
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const percentageRingDiagramTwo = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = [
{
name: "内胆检测",
value: 99,
},
{
name: "安全检测",
value: 98.5,
},
{
name: "压力检测",
value: 99.8,
},
{
name: "温度检测",
value: 98.8,
},
{
name: "外观检测",
value: 99,
},
];
}
let titleArr = [],
seriesArr = [];
let colors = [
["#389af4", "#dfeaff"],
["#ff8c37", "#ffdcc3"],
["#ffc257", "#ffedcc"],
["#fd6f97", "#fed4e0"],
["#a181fc", "#e3d9fe"],
["#389af4", "#dfeaff"],
["#ff8c37", "#ffdcc3"],
["#ffc257", "#ffedcc"],
["#fd6f97", "#fed4e0"],
];
data.forEach(function (item, index) {
titleArr.push({
text: item.name,
x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
y: '85%',
// top: '65%',
textAlign: "center",
textStyle: {
fontWeight: "normal",
fontSize: 0.8 * vw,
color: colors[index][0],
textAlign: "center",
},
});
seriesArr.push({
// name: item.name,
type: "pie",
clockWise: false,
radius: [2 * vw, 2.5 * vw],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: [
index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
'50%',
],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
return params.value + "%";
},
position: "center",
show: true,
textStyle: {
fontSize: vw,
fontWeight: "bold",
color: colors[index][0],
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
let option = {
title: titleArr,
series: seriesArr,
};
charts.setOption(option);
$(window).resize(charts.resize);
}