const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
// 随机数
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 barChartAndLineChart = 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: {
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: {
//坐标轴刻度标签的相关设置
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: false,
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 pieChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = [
{
value: 285,
name: "类型1",
},
{
value: 410,
name: "类型2",
},
{
value: 274,
name: "类型3",
},
{
value: 235,
name: "类型4",
},
]
}
let option = {
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
textStyle:{
fontSize:0.8*vw
}
},
series: [
{
name: "访问来源",
type: "pie",
radius: "90%",
center: ["50%", "50%"],
color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
data: data.sort(function (a, b) {
return a.value - b.value;
}),
roseType: "radius",
label: {
normal: {
formatter: "{b|{b}} {c|{c}次}",
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: 0,
length2: 10,
},
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 垂直柱状图
const verticalBarChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = [
{
value: 285,
name: "类型1",
},
{
value: 410,
name: "类型2",
},
{
value: 274,
name: "类型3",
},
{
value: 235,
name: "类型4",
},
]
}
let option = {
tooltip: {
textStyle:{
fontSize:0.8*vw
}
},
grid: {
top: "5%",
left: "1%",
right: "1%",
bottom: "1%",
containLabel: true,
},
xAxis: {
data: [
">10分钟",
"3-10分钟",
"0-3分钟",
],
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: vw,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00b0ff",
},
{
offset: 0.8,
color: "#7052f4",
},
],
false
),
},
},
data: [254, 3254, 1654],
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 水平圆角柱状图
const horizontalBarChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xData: [60, 132, 89, 134, 60],
yData: ["制氢站1", "制氢站2", "制氢站3", "制氢站4", "制氢站5"],
}
}
let colorArray = [
{
top: "#ffa800", //黄
bottom: "#ffa800",
},
{
top: "#1ace4a", //绿
bottom: "#1ace4a",
},
{
top: "#4bf3ff", //蓝
bottom: "#4bf3ff",
},
{
top: "#4f9aff", //深蓝
bottom: "#4f9aff",
},
{
top: "#b250ff", //粉
bottom: "#b250ff",
},
];
let option = {
tooltip: {
show: true,
formatter: "{b}:{c}",
},
grid: {
left: "5%",
top: "2%",
right: "1%",
bottom: "8%",
containLabel: true,
},
dataZoom: [],
xAxis: {
interval: 0,
type: "value",
show: false,
position: "top",
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
},
},
yAxis: [
{
interval: 0,
type: "category",
axisTick: {
show: false,
alignWithLabel: false,
length: 5,
},
splitLine: {
//网格线
show: false,
},
inverse: "true", //排序
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: data.yData,
},
],
series: [
{
name: "能耗值",
type: "bar",
label: {
normal: {
show: true,
position: "right",
formatter: "{c}",
textStyle: {
color: "white", //color of value
},
},
},
itemStyle: {
normal: {
show: true,
color: function (params) {
let num = colorArray.length;
return {
type: "linear",
colorStops: [
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
],
//globalCoord: false
};
},
barBorderRadius: 70,
borderWidth: 0,
borderColor: "#333",
},
},
barGap: "0%",
barCategoryGap: "50%",
data: data.xData,
},
],
};
if (data.yData?.length >= 3) {
option.dataZoom.push({
show: true,
type: 'slider',
yAxisIndex: 0,
width: 12,
start: 0,
end: 1 / (data.yData.length / 4) * 100,
textStyle: {
fontSize: 0,
}
})
}
charts.setOption(option);
$(window).resize(charts.resize);
}
// 水平直角柱状图
const horizontalBasisBarChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xData: [60, 132, 89, 134, 60],
yData: ["设备1", "设备2", "设备3", "设备4", "设备5"],
}
}
let colorArray = [
{
top: "#ffa800", //黄
bottom: "rgba(11,42,84,0.6)",
},
{
top: "#1ace4a", //绿
bottom: "rgba(11,42,84, 0.6)",
},
{
top: "#4bf3ff", //蓝
bottom: "rgba(11,42,84,0.6)",
},
{
top: "#4f9aff", //深蓝
bottom: "rgba(11,42,84,0.6)",
},
{
top: "#b250ff", //粉
bottom: "rgba(11,42,84,0.6)",
},
];
let option = {
tooltip: {
show: true,
formatter: "{b}:{c}",
},
grid: {
left: "5%",
top: "2%",
right: "3%",
bottom: "8%",
containLabel: true,
},
dataZoom: [],
xAxis: {
type: "value",
show: true,
position: "bottom",
axisLabel: {
show: true,
color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
opacity: '.8'
},
},
splitLine: {
lineStyle: {
type: 'dashed',
color: "#fff",
opacity: '0.4'
},
show: true,
},
},
yAxis: [
{
axisLabel: {
show: true,
color: '#fff'
},
type: "category",
axisTick: {
show: false,
alignWithLabel: false,
length: 5,
},
splitLine: {
//网格线
show: true,
lineStyle: {
type: 'dashed',
color: "#fff",
opacity: '0.4'
},
},
inverse: "true", //排序
axisLine: {
show: true,
lineStyle: {
// opacity: '.8'
},
},
data: data.yData,
},
],
series: [
{
name: "能耗值",
type: "bar",
label: {
normal: {
show: true,
position: "right",
formatter: "{c}",
textStyle: {
color: "white", //color of value
},
},
},
itemStyle: {
normal: {
show: true,
color: function (params) {
let num = colorArray.length;
return {
type: "linear",
colorStops: [
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 0,
color: colorArray[params.dataIndex % num].top,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
],
//globalCoord: false
};
},
// barBorderRadius: 70,
borderWidth: 0,
borderColor: "#333",
},
},
barGap: "0%",
barCategoryGap: "50%",
data: data.xData,
},
],
};
if (data.xData?.length >= 3) {
option.dataZoom.push({
show: true,
type: 'slider',
yAxisIndex: 0,
width: 12,
start: 0,
end: 1 / (data.xData.length / 3) * 100,
textStyle: {
fontSize: 0,
}
})
}
charts.setOption(option);
$(window).resize(charts.resize);
}
const horizontalBarChartTwo = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xData: [239, 181, 154, 144, 135],
yDataName: [
"设备1",
"设备2",
"设备3",
"设备4",
"设备5",
]
}
}
let dataMax = []; //背景按最大值
for (let i = 0; i < data.xData.length; i++) {
dataMax.push(Math.max.apply(null, data.xData));
}
let option = {
backgroundColor: "rgba(0,0,0,0)",
grid: {
left: "2%",
right: "2%",
bottom: "2%",
top: "2%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params) {
return params[0].name + " : " + params[0].value;
},
},
xAxis: {
show: false,
type: "value",
},
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data.yDataName,
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "12",
},
},
data: data.xData,
},
],
series: [
{
name: "值",
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,
},
{
name: "背景",
type: "bar",
barWidth: vw,
barGap: "-100%",
data: dataMax,
itemStyle: {
normal: {
color: "rgba(24,31,68,1)",
barBorderRadius: 30,
},
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const horizontalBarChartThree = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xData: [60, 70, 80, 90, 60, 70, 80]
}
}
let option = {
grid: {
left: "15%",
right: "10%",
bottom: "2%",
top: "2%",
},
xAxis: {},
yAxis: {
data: ["设备1", "设备2", "设备3", "设备4", "设备5"],
axisLabel: {
margin: 30,
}
},
series: [
{
name: "",
type: "pictorialBar",
symbolSize: [0.5 * vw, vw],
symbolOffset: [5, 0],
symbolPosition: "end",
z: 12,
label: {
normal: {
show: true,
position: "right",
formatter: "{c}%",
},
},
data: data.xData,
},
{
name: "",
type: "pictorialBar",
symbolSize: [0.5 * vw, vw],
symbolOffset: [0, 0],
z: 12,
data: data.xData,
},
{
type: "bar",
itemStyle: {
normal: {
opacity: 3.7,
},
},
barWidth: vw,
data: data.xData,
markLine: {
silent: true,
symbol: "none",
label: {
position: "middle",
formatter: "{b}",
},
data: [
{
name: "目标值",
yAxis: 70,
lineStyle: {
color: "#ffc832",
},
label: {
position: "end",
formatter: "{b}\n {c}%",
},
},
],
},
},
{
type: "effectScatter",
silent: true,
tooltip: {
show: false,
},
zlevel: 3,
symbolSize: 10,
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
color: "#3cefff",
scale: 5,
},
itemStyle: {
color: "#3cefff",
},
hoverAnimation: true,
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 格子水平柱状图
const gridHorizontalBasisBarChart = function (data, id) {
let charts = echarts.init(id);
let category = [
{
name: "1",
value: 300,
color: '#65F210'
},
{
name: "2",
value: 770,
color: '#EFFC21'
},
{
name: "3",
value: 810,
color: '#23A6FC'
},
{
name: "4",
value: 480,
color: '#F3550E'
},
]; // 类别
if (!data) {
data = [];
category.forEach((value) => {
data.push(value.value);
});
}
let option = {
backgroundColor: "rgba(0,0,0,0)",
xAxis: {
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
grid: {
left: '20%',
top: '0%', // 设置条形图的边距
right: '15%',
bottom: '1%',
},
yAxis: [
{
type: "category",
inverse: false,
data: ["设备4#", "设备3#", "设备2#", '设备1#'],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
verticalAlign: "bottom",
align: "left",
padding: [0, 0, 0, -60],
textStyle: {
fontSize: 14,
color: "white",
},
formatter(value, index) {
return value;
},
},
},
],
series: [
{
// 30 count bar
type: "pictorialBar",
itemStyle: {
normal: {
color: "#07314a",
},
},
symbolRepeat: "fixed",
symbolMargin: 2,
symbol: "roundRect",
symbolClip: true,
symbolSize: [5, 18],
symbolPosition: "start",
symbolOffset: [3, -4],
symbolBoundingData: 1000,
data: [1000, 1000, 1000, 1000],
z: 2,
animationEasing: "elasticOut",
},
{
// current count bar
type: "pictorialBar",
itemStyle: {
normal: {
color: function (val) {
return category[val.dataIndex].color
},
},
},
symbolRepeat: "fixed",
symbolMargin: 2,
symbol: "roundRect",
symbolClip: true,
symbolSize: [5, 18],
symbolPosition: "start",
symbolOffset: [3, -4],
symbolBoundingData: 1000,
data: data,
z: 2,
animationEasing: "elasticOut",
},
{
// label
type: "pictorialBar",
symbolBoundingData: 1000,
itemStyle: {
normal: {
color: "none",
},
},
label: {
normal: {
formatter: (params) => {
var text;
text = "{f| " + params.data + "kg}";
return text;
},
rich: {
f: {
color: "#ffffff",
},
},
position: "right",
distance: 10, // 向右偏移位置
show: true,
},
},
data: data,
z: 0,
},
{
name: "外框",
type: "bar",
barGap: "-130%", // 设置外框粗细
data: [1000, 1000, 1000, 1000],
barWidth: 45,
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5],
color: "transparent", // 填充色
barBorderColor: "#1588D1", // 边框色
barBorderWidth: 0, // 边框宽度
},
},
z: 0,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 垂直柱状图
const verticalBarDiagram = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xData: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"],
yDataOne: [320, 435, 490, 340, 320, 270, 360],
yDataTwo: [490, 490, 490, 490, 490, 490, 490],
yDataName: '故障率',
}
}
let option = {
backgroundColor: "rgba(0, 0, 0, 0)",
tooltip: {},
grid: {top: "20%", left: "10%", right: "3%", bottom: "20%"},
// xAxis
xAxis: {
axisTick: {show: true},
axisLine: {lineStyle: {color: "rgba(255,255,255, .2)"}},
axisLabel: {
textStyle: {fontSize: 12, color: "#fff"},
margin: 14,
},
data: data.xData,
},
// yAxis
yAxis: [
{
splitLine: {lineStyle: {color: "rgba(255,255,255, .05)"}},
axisLine: {show: false},
axisLabel: {textStyle: {fontSize: 16, color: "#fff"}},
},
],
// series
series: [
{
z: 3,
name: "",
type: "pictorialBar",
symbolPosition: "end",
data: data.yDataTwo,
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [1.5 * vw, vw],
itemStyle: {
borderColor: "#083181",
borderWidth: 2,
color: "#083181",
},
},
{
z: 1,
type: "bar",
name: "",
barGap: "-100%",
barWidth: 1.5 * vw,
data: data.yDataTwo,
itemStyle: {
borderColor: "#083181",
borderWidth: 1,
color: '#083181',
},
},
{
z: 2,
name: "",
type: "pictorialBar",
data: [1, 1, 1, 1, 1, 1, 1, 1],
symbol: "diamond",
symbolOffset: [0, "50%"],
symbolSize: [1.5 * vw, vw],
itemStyle: {
color: '#FC9402',
},
},
{
z: 3,
name: "",
type: "pictorialBar",
symbolPosition: "end",
data: data.yDataOne,
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [1.5 * vw, vw],
itemStyle: {
borderColor: "#FE8F09",
borderWidth: 2,
color: "#FE8F09",
},
},
{
z: 1,
stack: "总量",
type: "bar",
name: data.yDataName,
barWidth: 1.5 * vw,
// barGap: '-100%',
data: data.yDataOne,
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{offset: 0, color: "#FC2B10"},
{offset: 1, color: "#FD9603"},
],
},
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 堆叠柱状图
const stackBarDiagram = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xData: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"],
yDataOne: [150, 320, 300, 210, 240, 180, 288],
yDataTwo: [320, 435, 490, 340, 320, 270, 360],
}
}
let option = {
backgroundColor: "rgba(0, 0, 0, 0)",
legend: {
data: ["峰值发电速度", "平均发电速度", "完成率"],
textStyle: {fontSize: 0.75 * vw, color: "#fff"},
top: "0",
itemWidth: 1.25 * vw,
itemHeight: vw,
itemGap: 15,
bottom: "5%",
selectedMode: false,
},
tooltip: {},
grid: {top: "15%", left: "15%", right: "3%", bottom: "15%"},
xAxis: {
axisTick: {show: true},
axisLine: {lineStyle: {color: "rgba(255,255,255, .2)"}},
axisLabel: {textStyle: {fontSize: 12, color: "#fff"}},
data: data.xData,
},
// yAxis
yAxis: [
{
splitLine: {lineStyle: {color: "rgba(255,255,255, .05)"}},
axisLine: {show: false},
axisLabel: {textStyle: {fontSize: 16, color: "#fff"}},
},
],
// series
series: [
{
z: 3,
name: "",
type: "pictorialBar",
symbolPosition: "end",
data: data.yDataTwo,
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [1.5 * vw, vw],
itemStyle: {
borderColor: "#EB7B5C",
borderWidth: 2,
color: "#EB7B5C",
},
},
{
z: 1,
type: "bar",
name: "峰值发电速度",
barGap: "-100%",
barWidth: 1.5 * vw,
data: data.yDataTwo,
itemStyle: {
borderColor: "#FA340C",
borderWidth: 1,
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{offset: 0, color: "#FA340C"},
{offset: 1, color: "#FE8F05"},
],
},
},
},
{
z: 2,
name: "",
type: "pictorialBar",
data: [1, 1, 1, 1, 1, 1, 1, 1],
symbol: "diamond",
symbolOffset: [0, "50%"],
symbolSize: [1.5 * vw, vw],
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{offset: 0, color: "#65E683"},
{offset: 1, color: "#65E683"},
],
},
},
},
{
z: 3,
name: "",
type: "pictorialBar",
symbolPosition: "end",
data: data.yDataOne,
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [1.5 * vw, vw],
itemStyle: {
borderColor: "#FE8F09",
borderWidth: 2,
color: "#FE8F09",
},
},
{
z: 1,
stack: "总量",
type: "bar",
name: "平均发电速度",
barWidth: 1.5 * vw,
// barGap: '-100%',
data: data.yDataOne,
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{offset: 0, color: "#4FD576"},
{offset: 1, color: "#4FD576"},
],
},
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 双向横向柱状图
const bidirectionalTransverseBarChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
yName: ["充装站1", "充装站2", "充装站3", "充装站4"],
xDataOne: [-65, -75, -55, -70],
xDataOneName: "平均充装速度",
xDataTwo: [25, 65, 80, 50],
xDataTwoName: "峰值充装速度",
}
}
let option = {
backgroundColor: "rgba(0,0,0,0)",
legend: {
type: "scroll",
// orient: "vartical",
// x: "right",
top: "0",
// right: "center",
// bottom: "0%",
itemWidth: 0.75 * vw,
itemHeight: 0.5 * vw,
itemGap: 0.75 * vw,
textStyle: {
color: "#A3E2F4",
fontWeight: 200,
},
data: ["平均充装速度", "峰值充装速度"],
},
grid: {
left: "5%",
top: "15%",
right: "3%",
bottom: "8%",
containLabel: true,
},
tooltip: {},
xAxis: [
{
type: "value",
splitNumber: 9,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
color: "#96F5F6",
fontSize: 8,
// 将X轴上的负数取绝对值变正数
formatter(value) {
return Math.abs(value);
},
},
},
],
yAxis: [
{
type: "category",
data: data.yName,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
color: "#96F5F6",
fontSize: 8,
},
},
],
series: [
{
name: data.xDataOneName,
type: "bar",
data: data.xDataOne,
stack: "总量",
barWidth: vw,
label: {
show: true,
position: "left",
textStyle: {
color: "#fff",
},
formatter(value) {
return 0 - value.data
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: "#1F62F6",
},
{
offset: 0.8,
color: "#01B9F3",
},
],
false
),
},
},
},
{
name: data.xDataTwoName,
type: "bar",
barWidth: 2 * vw,
data: data.xDataTwo,
stack: "总量",
label: {
show: true,
position: "right",
textStyle: {
color: "#fff",
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: "#FF9300",
},
{
offset: 0.8,
color: "#F84519",
},
],
false
),
},
},
},
],
};
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:50,
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: 0.5 * 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: "rgba(127, 128, 225, 0.7)"
},
},
},
{
name: data.yDataTwoName,
type: "bar",
data: data.yDataTwo,
barWidth: 0.5 * 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(226, 99, 74, 0.7)",
},
},
},
{
name: data.yDataThreeName,
type: "bar",
data: data.yDataThree,
barWidth: 0.5 * 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 >= 6) {
option.dataZoom.push({
show: true,
type: 'slider',
bottom : '0%',
xAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.xName.length / 6) * 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) {
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: '平均制氢速度',
yDataTwo: [32, 42, 50, 22, 30, 40, 52],
yDataTwoName: "能耗比",
}
}
let option = {
legend: {
data: ['平均制氢速度', '能耗比'],
textStyle: {color: 'white'},
selectedMode: false,
},
backgroundColor: 'rgba(0,0,0,0)',
grid: {
top: '20%',
left: '5%',
bottom: '5%',
right: '5%',
containLabel: true,
},
tooltip: {
trigger: 'item',
},
animation: false,
xAxis: [
{
type: 'category',
data: data.xName,
axisTick: {
alignWithLabel: true,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#ddd',
},
margin: 10,
},
interval: 1,
},
],
yAxis: [
{
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#727582',
width: 1
}
},
show: true,
type: 'value',
},
{
show: true,
type: "value",
nameTextStyle: {
color: "#ccc",
},
axisLabel: {
color: "#ccc",
},
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
series: [
{
name: '上部圆',
type: 'pictorialBar',
silent: true,
symbolSize: [vw, 0.5 * vw],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 12,
// label: {
// normal: {
// show: true,
// position: 'top',
// padding: [0, 22, 0, 0],
// fontSize: 15,
// fontWeight: 'bold',
// color: '#5BFCF4',
// },
// },
color: '#09B18F',
data: data.yDataOne,
},
{
name: '底部圆',
type: 'pictorialBar',
silent: true,
symbolSize: [vw, 0.5 * vw],
symbolOffset: [0, 7],
z: 12,
color: '#0CB69B',
data: data.yDataOne,
},
{
name: data.yDataOneName,
type: 'bar',
barWidth: vw,
barGap: '10%', // Make series be overlap
barCateGoryGap: '10%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: '#00FD8D',
},
{
offset: 1,
color: '#0FB79D',
},
]),
},
},
data: data.yDataOne,
},
{
name: data.yDataTwoName,
type: "line",
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 6,
yAxisIndex: 1,
zlevel: 2,
lineStyle: {
normal: {
color: "#28ffb3", // 线条颜色
},
borderColor: "#f0f",
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
},
},
itemStyle: {
normal: {
color: "#28ffb3",
},
},
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 multipleThermometerBars = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ['01日', '02日', '03日', '04日', '05日', '06日', '07日'],
yData: [52, 60, 22, 33, 44, 78, 59],
}
}
let minArr = []
let maxArr = []
data.yData.forEach(val => {
minArr.push(0)
maxArr.push(Math.max.apply(null, data.yData))
})
let option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'axis',
formatter: '{b0}: {c0}kw·h',
},
grid: {
top: '15%',
left: '5%',
right: '5%',
bottom: '10%',
containLabel: true,
},
yAxis: {
axisLine: {
show: false,
color: '#ffffff',
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: '14',
},
},
axisTick: {
show: true,
lineStyle: {
color: '#285abc',
},
},
splitLine: {
show: false,
},
},
xAxis: [
{
axisTick: 'none',
axisLine: {
show: false,
},
data: data.xName,
axisLabel: {
margin: 20,
show: true,
textStyle: {
color: '#fff',
fontSize: '14',
},
lineHeight: 16,
},
},
{
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
color: '#fff',
fontSize: '14',
},
lineHeight: 16,
},
data: [0, 0, 0, 0, 0, 0, 0],
},
{
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
color: '#fff',
fontSize: '14',
},
lineHeight: 16,
},
nameGap: '50',
data: [],
},
],
series: [
{
name: '℃',
type: 'bar',
xAxisIndex: 0,
data: data.yData,
barWidth: 12,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#02F9FE',
},
{
offset: 1,
color: '#ECF214',
},
]),
},
},
z: 2,
},
{
name: '温度背景框',
type: 'bar',
xAxisIndex: 1,
barGap: '-100%',
data: maxArr,
barWidth: 15,
itemStyle: {
normal: {
color: '#0e2147',
barBorderRadius: 5,
},
},
z: 1,
},
{
name: '外框',
type: 'bar',
xAxisIndex: 2,
barGap: '-100%',
data: maxArr,
barWidth: 17,
itemStyle: {
normal: {
color: '#4577BA',
barBorderRadius: 50,
},
},
z: 0,
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: minArr,
xAxisIndex: 2,
symbolSize: 15,
itemStyle: {
normal: {
color: '#93FE94',
opacity: 1,
},
},
z: 2,
},
{
name: '白圆',
type: 'scatter',
hoverAnimation: false,
data: minArr,
xAxisIndex: 1,
symbolSize: 20,
itemStyle: {
normal: {
color: '#02F9FE',
opacity: 1,
},
},
z: 4,
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: [0, 0, 0, 0, 0, 0, 0],
xAxisIndex: 2,
symbolSize: 23,
itemStyle: {
normal: {
color: '#4577BA',
opacity: 1,
},
},
z: 0,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 单个渐变折线图(百分比)
const singleGradientLineChart = function (data, id, param = {smooth: false, label: true}) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["0", "4", "8", "12", "16", "20"],
yData: ["40", "60", "22", "85", "50", "40"],
}
}
let left = () => {
if (vw < 10) return '20%'
return '14%'
}
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,255,255,0)", // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(255,255,255,1)", // 50% 处的颜色
},
{
offset: 1,
color: "rgba(255,255,255,0)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
},
grid: {
top: "10%",
left: left(),
right: "5%",
bottom: "20%",
// containLabel: true
},
dataZoom: [],
xAxis: [
{
type: "category",
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: 'color:"#092b5d"',
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#24c4ff",
margin: 15,
},
formatter: function (data) {
return data + "时";
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
data: data.xName,
},
],
yAxis: [
{
min: 0,
max: 100,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
axisLine: {
show: true,
lineStyle: {
color: "#777777",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#24c4ff",
},
formatter: function (value) {
if (value === 0) {
return value;
}
return value + "%";
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "注册总量",
type: "line",
smooth: param?.smooth,
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 8,
lineStyle: {
normal: {
color: "#16C0A2", // 线条颜色
},
borderColor: "rgba(0,0,0,.4)",
},
itemStyle: {
color: "#16C0A2",
borderColor: "#16C0A2",
borderWidth: 2,
},
label: {
normal: {
show: param?.label,
position: "top",
formatter: [" {a|{c}%}"].join(","),
rich: {
a: {
color: "#fff",
align: "center",
},
},
},
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#16C0A2",
},
{
offset: 1,
color: "rgba(124, 128, 244, 0)",
},
],
false
),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: data.yData,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const gradientLineChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
XName: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
yDataName: "能耗",
yData: [123, 154, 234, 321, 120, 390, 634]
}
}
let img = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAACXBIWXMAAAsSAAALEgHS3X78AAAHaUlEQVR42u3cv29jWRUH8O+5P96zX5x4Mk4yjCW0S5QqZil2aIEUUG5BEQr4B2joKBclrhAF1HR0gNYVK6BapDSIyhSLnAKNxBSrLJOJd+L413vv3nsOhfNjMhmx4sfaSXSP5ESOrt/1++jcn+8qJCKI8d+FigQRL+JFvIgXI+JFvIgX8WJEvIgX8SJexIsR8SJexIt4MSJexIt4ES9GxPvfw9zGL0Ugev1vgtv3gJluw0NvApH8R+VvB+ZC8a6jCdpo096/Kd8GsIc9mfEtHnGBzXYG18b+OVgb2+gRABzgBQE7r5Q9wA7WZfuScB9tAIJ9AYiwIECz2GzbpyuwFm1ilQBgA63X+rwdAEeyCeAAkB30ziH3gXPARWTh3EfbWbaBgH0CerSOFnWxqjYAVUeqnqGpB58M9AquXoNPBvoZmrqOVG0AqotVtY4WAT0C9qkNkNz/Pu9iFN0/v/EWHQIqQZ9UqCeauaLJcWqWilM/WQYANhg9RCaFH6eMRNjYiUdfSjRkG2CgJ0BLZhkIzLMJzxHvzXAZnqn+p4mqVauZ1srQkvWToQqaisumGySVbJm1jJ0p82I09Z4bj0ue4G1eJOBc8drnfdw6WrQBqAxQyrtseuqcXSOVn5XarCilR6QUJTSFoyqssJQSasL+jLmykgR3Ilx9YC0bO5kAfAzwC/TkEC3Zw77MC28uA8bFIDEbVXfRxUeUICXlV7KCnE7XSraoatJsFKrKaa8ZOYEsseQiMJLCBKvHnECRWpuGIkCnHllizsbLKGgHuwIcvlLfFw84lwFDzn920CPgkKpoUgVGjYwt7bB05VCbwdhbu1QznBeJKJeI0kkKvAsy74J4k/MisUs1Mxh7Ww61scPSjYwtKzCqiiYBhzS7vkDuV59Hl6NrF6uqjlRNnqcme1TTFcC4cWmD8lYTrTNQBeSbAH4kKnzHQgsLmKGCFngv7DUbZ5cSlwN+8nwUskeFH6DgJ3jJV33fPcm8q6lui6qHTTJoUOVhsmRwqvJRoQ15ratWS8kjVvISwDcAfCxOJYWjhAW/gPAPAnNLWb1myOt8VGiDUzW7ToOqh006uDE/vON4Nxb524DBgKC9n5yR0kSqJK91EbSqsNYgI+zfh1bvV6W1rRMygHwM4LtKcx8+PC7Ja02kJmekoL03GBC2P39z4Q42W6LzqTEBUE+f9vVgqaHrad94W7MV5S1rlQjkHQJ9PQT+ncVXvpzxO78GqAbwP4fqL99nnLxMrSmdSEkipQpc5myccSM3KBq+Pu6Hra1GAMC4XP9+sTc3t2bb6cyWYdgCmo8BPGxgGQCRJYInQI4F8kMiTRV5+70ZHACoL2Wy/R6RphJMhEAET0SWljG7TvPx7LrX6rlPy7Pd3dZlFpSuXAL6GAKYYHKRn6ei6NvGBgHx8HryhjNtQkosH4nQV3H+uVmhPgIH/aZ67gneVTJsoSGDs0GJz4Daci5VsSIwIoUXC2ER4dz0PhRM/yBwf2WMfztO/vyhCKoE/BLMIjBSFSu15VzwGXDSP8EWGvKm+u70JJku53nAAYANAA8bSTk+sYYHSoL2LCKsErPlmQpA/Vzk5PfDyp9+AhcIVguXgWHtsYL6jVHsnMyQ1SCVwFbW1p0/BHCMq42sV+u9s5n36kx/tpV0JB51ebDG7OvCQYSdlEFAnwLCAD4goq+ReEeE71HgP2ptfkYsmyLhcYAOTsoQRNjXhR+sMXvUZRtHsoOevKneO9/ntc9/d7uAR19yV2YhSFJZtmE1q3rPeEGgfzC5D1JSPybhUin6FZH/lgZ+KmAP4NSx+NWs6ivLNoQgSe7KzKMv3e71eu7ZCmO2o3IAqA1AVYJPEymS3Cy5CgamGGljlNeOEh2I1wzUIw/+ewojUzixooOVMng2Ia0Fn6PuK35sS0rLXJviGOAdgOe5szKXzKNre8I9mXaPZFObAsZPyhfHnKHubc24JNNOc+GY/fOE8besogrNXIJDqblwSaadrRmXoe7LF8cM4yeb2hTT7vUmS/cr827u512scSswSrypWUUhPyt5okjVVyqkUF4aMBIZnOWSsXBlJVFeBNB+msPzzTXt/Pbz5tbn0St9X6cDDNGUAQrOn3p2lOYlTzFxpdcr1k0xclOYV14jp1esm7jSlzyF10uT/OkMboimdDpXfR3dvz7vZvZ1Oj3a3QW6WFVVNClBnwwaRGGYgNN0YMsJAFhPlUysgioK0cvlxRb8FEfyBC+507mYGM9/G37OD4AubmxfDndbArTkCV7yNsADFDxBj9/Sy7mzw7MMhc9QeGvykbPDs7f0cj5BjwcoeBu4bKqHC4JbQOa9noHnWYge7WL2vHbnfJrbxdFlmSdoymySPXt+2wGwe62Pmz/cAvHedMRi/xKrg5uL+xnWZVm5voJZzE0s/KzKTcTZu3a7TdibjTB7e3vy+nBwG86r0G367xafd+DnthzwuZV4dy3i4caIF/EiXsSLEfEiXsSLeDEiXsSLeBEv4sWIeBEv4kW8GBEv4kW8iBcj4v0f4l+bPQ5YnMn04QAAAABJRU5ErkJggg=="
let color = "#00f8ff";
let option = {
backgroundColor: "rgba(0,0,0,0)",
grid: {
left: "10%",
top: "10%",
bottom: "15%",
right: "5%",
},
legend: {
type: "scroll",
data: data.XName,
itemWidth: 18,
itemHeight: 12,
textStyle: {
color: "#00ffff",
fontSize: 14,
},
},
yAxis: [
{
type: "value",
position: "right",
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
{
type: "value",
position: "left",
nameTextStyle: {
color: "#00FFFF",
},
splitLine: {
lineStyle: {
type: "dashed",
color: "rgba(135,140,147,0.8)",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value}",
color: "#fff",
fontSize: 14,
},
},
],
xAxis: [
{
type: "category",
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#6A989E",
},
},
axisLabel: {
inside: false,
textStyle: {
color: "#fff", // x轴颜色
fontWeight: "normal",
fontSize: "14",
lineHeight: 22,
},
},
data: data.XName,
},
],
series: [{
symbolSize: 150,
symbol: img,
name: data.yDataName,
type: "line",
yAxisIndex: 1,
data: data.yData,
label: {
show: true,
position: "top",
offset: [0, 60],
textStyle: {
color: "#fff",
},
},
itemStyle: {
normal: {
borderWidth: 5,
color: color,
},
},
}],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const gradientLineChartTwo = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ['2021年1月', '2021年2月', '2021年3月', '2021年4月', '2021年5月'],
yData: [2000, 1800, 2800, 900, 1600],
}
}
let option = {
backgroundColor: 'rgba(0,0,0,0)',
grid: {
top: '15%',
bottom: '19%',
left: '12%',
right: '4%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#FF8736'
},
}
},
xAxis: {
boundaryGap: true, // 默认，坐标轴留白策略
axisLine: { // 坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#85B1B4'
}
},
axisLabel: { // 坐标轴刻度标签的相关设置
textStyle: {
color: '#709FD9',
margin: 15
}
},
splitLine: {
show: false
},
axisTick: {
show: false,
alignWithLabel: true
},
data: data.xName
},
yAxis: {
axisLine: {
show: false,
},
axisLabel: { // 坐标轴刻度标签的相关设置
show: true,
textStyle: {
color: '#709FD9',
margin: 15
}
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
type: 'scatter',
symbolSize: 10,
itemStyle: {
color: '#FF8736'
},
silent: true,
tooltip: {
show: false
},
data: data.yData
},
{
type: 'line',
symbol: 'circle',
symbolSize: 20,
symbol: 'path://M488 187.381L242.872 328.906a48 48 0 0 0-24 41.57v283.049a48 48 0 0 0 24 41.569L488 836.619a48 48 0 0 0 48 0l245.128-141.525a48 48 0 0 0 24-41.57V370.476a48 48 0 0 0-24-41.569L536 187.381a48 48 0 0 0-48 0z m32 27.713l245.128 141.525a16 16 0 0 1 8 13.856v283.05a16 16 0 0 1-8 13.856L520 808.906a16 16 0 0 1-16 0L258.872 667.381a16 16 0 0 1-8-13.856v-283.05a16 16 0 0 1 8-13.856L504 215.094a16 16 0 0 1 16 0z',
lineStyle: {
color: '#FF8736'
},
itemStyle: {
color: '#FF8736',
borderWidth: 1,
borderColor: '#FF8736'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
data: data.yData
}
]
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const gradientLineChartThree = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ['2016', '2017', '2018', '2019', '2020', '2021', '2022'],
yData: [52, 43, 60, 44, 79, 60, 40],
yDataName: '合格率',
}
}
let option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: (params) => {
let html = params[0].name + '
'
for (let i = 0; i < params.length; i++) {
html += params[i].marker + params[i].seriesName + ': ' + params[i].value
html += '%' + '
'
}
return html
}
},
grid: {
left: '8%',
right: '4%',
top: '20%',
bottom: '14%'
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, .2)'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
fontSize: 12,
padding: [3, 0, 0, 0],
color: 'rgba(168, 177, 187, 1)'
},
data: data.xName,
},
yAxis: {
nameTextStyle: {
color: '#A8B1BB',
fontSize: 12,
padding: [0, 16, 0, 10]
},
type: 'value',
splitLine: {
lineStyle: {
type: 'solid',
color: 'rgba(105, 171, 202, 0.08)'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
color: '#A8B1BB',
fontSize: 12,
formatter: '{value}'
},
splitArea: {
show: false
}
},
series: [
{
name: data.yDataName,
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#3DF7E4',
shadowColor: 'rgba(61, 247, 228, 0.46)',
shadowBlur: 20,
borderColor: 'rgba(61, 247, 228, 0.46)',
borderWidth: 4
},
lineStyle: {
width: 1,
color: '#3DF7E4',
shadowColor: 'rgba(61, 247, 228, 0.86)',
shadowBlur: 20
},
data: data.yData
}
]
}
charts.setOption(option);
$(window).resize(charts.resize);
}
const gradientLineChartFour = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
yData: [10, 10, 30, 12, 15, 3, 7],
xName: ['2016', '2017', '2018', '2019', '2020', '2021', '2022'],
}
}
let option = {
backgroundColor: 'rgba(0,0,0,0)',
grid: {
left: '8%',
right: '4%',
top: '10%',
bottom: '10%'
},
xAxis: [
{
data: data.xName
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
type: 'line',
data: data.yData,
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
lineStyle: {
width: 2,
shadowColor: 'rgba(158,135,255, 0.7)',
shadowBlur: 3,
shadowOffsetY: 5,
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 渐变曲线图
const gradientCurve = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xData: ['00', '02', '04', '06', '08'],
yData: [51, 30, 150, 130, 85],
yName: '充装量',
}
}
let option = {
backgroundColor: 'rgba(0,0,0,0)',
grid: {
top: "20%",
left: '16%',
right: "5%",
bottom: "20%",
// containLabel: true
},
xAxis: {
data: data.xData,
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1
}
},
axisLabel: {
show: true,
textStyle: {
color: '#8587C1',
fontSize: 16
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#727582',
width: 1
}
},
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1
}
},
color: '#8587C1',
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#8587C1',
fontSize: 16
}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
},
series: [
{
name: data.yName,
type: 'line',
symbol: 'circle',
symbolSize: 10,
smooth: true,
data: data.yData,
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
},
},
itemStyle: {
//拐点的样式
color: 'rgba(244,253,255,0)',
borderWidth: 0,
borderColor: 'rgba(87, 183, 242, 0)'
},
lineStyle: {
//线条的样式
width: 2,
color: 'rgba(87, 183, 242, 1)'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(87, 183, 242, 1)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(6,37,55,0)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
]
}
charts.setOption(option);
$(window).resize(charts.resize);
}
// 绿色多边形柱状图
const greenPolygonalHistogram = (data, ids) => {
let charts = echarts.init(ids);
if (!data) {
data = {
xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
yData: [1, 2, 3, 4, 5, 4, 3, 2, 1, 4, 1, 3]
}
}
const maxNum = Math.max(...data.yData)
const maxArr = []
const minArr = []
data.yData.forEach(val => {
maxArr.push(maxNum)
minArr.push(1)
})
let option = {
color: [
"#68E683",
"#58E28A",
"#042A4F",
"#042A4F",
"#042A4F",
"#6c93ee",
"#a9abff",
"#f7a23f",
"#27bae7",
"#ff6d9d",
"#cb79ff",
"#f95b5a",
"#ccaf27",
"#38b99c",
"#93d0ff",
"#bd74e0",
"#fd77da",
"#dea700",
],
tooltip: {
trigger: "axis",
show: false,
},
grid: {
containLabel: true,
left: '3%',
right: '3%',
bottom: '3%',
top: '20%',
},
dataZoom: [],
xAxis: {
axisLabel: {
color: "#c0c3cd",
fontSize: 14,
interval: 2,
},
axisTick: {
lineStyle: {
color: "#384267",
},
show: false,
},
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: "#384267",
width: 1,
type: "line",
},
show: true,
},
data: data.xName,
type: "category",
},
yAxis: {
show: true,
axisLabel: {
color: "#c0c3cd",
fontSize: 14,
},
axisTick: {
lineStyle: {
color: "#384267",
width: 1,
},
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "#384267",
type: "dashed",
},
},
axisLine: {
lineStyle: {
color: "#384267",
width: 1,
type: "line",
},
show: true,
},
name: "",
},
series: [
{
data: data.yData,
type: "bar",
barMaxWidth: vw,
barWidth: vw,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "#1FB55E",
},
{
offset: 1,
color: "#68E683",
},
],
},
},
label: {
show: true,
position: "top",
distance: 10,
color: "#fff",
},
},
{
data: minArr,
type: "pictorialBar",
barMaxWidth: vw,
barWidth: vw,
symbol: "diamond",
symbolOffset: [0, "50%"],
symbolSize: [vw, 8],
},
{
data: data.yData,
type: "pictorialBar",
barMaxWidth: vw,
barWidth: vw,
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [vw, 8],
zlevel: 2,
},
{
data: maxArr,
type: "bar",
barMaxWidth: vw,
barWidth: vw,
barGap: "-100%",
zlevel: -1,
itemStyle: {
color: '#083181',
},
},
{
data: minArr,
type: "pictorialBar",
barMaxWidth: vw,
barWidth: vw,
symbol: "diamond",
symbolOffset: [0, "50%"],
symbolSize: [vw, 8],
zlevel: -2,
},
{
data: maxArr,
type: "pictorialBar",
barMaxWidth: vw,
barWidth: vw,
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [vw, 8],
zlevel: -1,
itemStyle: {
color: '#083181',
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 单个垂直柱状图
const singleVerticalBarChart = function (data, id) {
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: "25%",
// containLabel: true
},
dataZoom: [],
xAxis: {
data: data.xName,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 14,
},
},
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
),
},
},
data: data.yData,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const singleVerticalBarChartTwo = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
yData: [498, 520, 568, 432, 464, 332, 344, 458, 470, 468, 398, 310],
yDataName: "设备在线率"
}
}
let option = {
backgroundColor: 'rgba(0,0,0,0)',
animation: true,
grid: {
top: "15%",
bottom: "15%",
right: "5%"
},
tooltip: {
show: true,
},
xAxis: {
data: data.xName,
axisLine: {
show: false //隐藏X轴轴线
},
axisTick: {
show: false //隐藏X轴轴线
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(77, 128, 254, 0.2)",
width: 2
}
},
axisLabel: {
show: true,
interval: 0,
// margin: 14,
fontSize: 13,
textStyle: {
color: "#a8d5ff" //X轴文字颜色
}
}
},
yAxis: [
{
type: "value",
gridIndex: 0,
min: 0,
//max: 100,
interval: 100,
// splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "rgba(77, 128, 254, 0.2)",
width: 2
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(77, 128, 254, 0.2)"
}
},
axisLabel: {
show: true,
margin: 14,
fontSize: 13,
textStyle: {
color: "#a8d5ff"
}
}
}
],
series: [
{
name: data.yDataName,
type: "bar",
barWidth: vw,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#fff',
fontSize: 16
}
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(146, 225, 255, 1)"
},
{
offset: 1,
color: "rgba(0, 151, 251, 1)"
}
])
}
},
data: data.yData,
z: 10,
zlevel: 0
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#0F375F"
}
},
symbolRepeat: "fixed",
symbolMargin: 6,
symbol: "rect",
symbolClip: true,
symbolSize: [vw, 2],
symbolPosition: "start",
symbolOffset: [1, 1],
data: data.yData,
width: 2,
z: 0,
zlevel: 1
},
{
name: "背影",
type: "line",
smooth: true, //平滑曲线显示
showAllSymbol: false, //显示所有图形。
symbolSize: 0,
lineStyle: {
width: 0
},
areaStyle: {
color: "rgba(0, 151, 251, 0.1)"
},
data: data.yData,
z: 5
}
]
}
charts.setOption(option);
$(window).resize(charts.resize);
}
const singleVerticalBarChartThree = function (data, id) {
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],
}
}
let option = {
backgroundColor: 'rgba(0,0,0,0)',
color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
grid: {
top: "20%",
bottom: "15%",
right: "5%"
},
xAxis: {
nameTextStyle: {
color: '#c0c3cd',
padding: [0, 0, -10, 0],
fontSize: 14,
},
axisLabel: {
color: '#c0c3cd', //X轴文字
fontSize: 14,
interval: 0,
},
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,
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff',
},
},
{
data: data.yData,
type: 'pictorialBar',
barMaxWidth: vw,
symbolPosition: 'end',
symbol: 'diamond',
color: '#66c8ff',
symbolOffset: [0 + '%', '-50%'],
symbolSize: [1.5 * vw, 10],
zlevel: 4,
},
{
data: [1, 1, 1, 1, 1, 1, 1, 1],
type: 'pictorialBar',
barMaxWidth: vw,
symbolPosition: 'end',
symbol: 'diamond',
color: '#66c8ff',
symbolOffset: [0 + '%', '-20%'],
symbolSize: [1.5 * vw, 10],
zlevel: 4,
}],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 多个渐变折线图(曲线)
const multipleGradientLineChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["13:00", "13:05", "13:10", "13:15", "13:20", "13:25", "13:30", "13:35", "13:40", "13:45", "13:50", "13:55"],
yDataOne: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
yDataOneName: "充电",
yDataTwo: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
yDataTwoName: "加氢",
yDataThree: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
yDataThreeName: "加油",
}
}
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: ["加氢", "加油", "充电"],
top: "4%",
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,
axisLabel: {
show: true,
color: '#fff'
},
axisLine: {
lineStyle: {
color: "#57617B",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
data: data.xName
}
],
yAxis: [
{
type: "value",
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#57617B",
},
},
axisLabel: {
show: true,
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
},
],
series: [
{
name: data.yDataOneName,
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(137, 189, 27, 1)",
},
{
offset: 0.8,
color: "rgba(137, 189, 27, 0.6)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(137,189,27)",
borderColor: "rgba(137,189,2,0.27)",
borderWidth: 12,
},
},
data: data.yDataOne,
},
{
name: data.yDataTwoName,
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 136, 212, 0.5)",
},
{
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)",
borderColor: "rgba(0,136,212,0.2)",
borderWidth: 12,
},
},
data: data.yDataTwo,
},
{
name: data.yDataThreeName,
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(219, 50, 51, 0.5)",
},
{
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)",
borderColor: "rgba(219,50,51,0.2)",
borderWidth: 12,
},
},
data: data.yDataThree,
},
],
};
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(),
yDataThree: new Fun().randomNum(),
yDataOneName: '制氢量',
yDataTwoName: '发电量',
yDataThreeName: '充装量',
}
}
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],
left: "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'
},
data: data.xData,
},
],
yAxis: [
{
type: "value",
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#57617B",
},
},
axisLabel: {
show: true,
color: '#fff'
},
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)",
},
},
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)",
},
},
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,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 空心饼图
const hollowPieChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = [
{
value: 10,
name: "加氢站1",
},
{
value: 5,
name: "加氢站2",
},
{
value: 15,
name: "加氢站3",
},
{
value: 25,
name: "加氢站4",
},
{
value: 20,
name: "加氢站5",
},
{
value: 35,
name: "加氢站6",
},
]
}
let option = {
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
grid: {
left: -100,
top: 50,
bottom: 10,
right: 10,
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
},
legend: {
type: "scroll",
orient: "vartical",
// x: "right",
top: "center",
right: "15",
// bottom: "0%",
itemWidth: 0.75 * vw,
itemHeight: 0.5 * vw,
itemGap: 0.75 * vw,
textStyle: {
color: "#A3E2F4",
fontSize: 123,
fontWeight: 0,
},
data: ["加氢站1", "加氢站2", "加氢站3", "加氢站4", "加氢站5", "加氢站6"],
},
polar: {},
angleAxis: {
interval: 1,
type: "category",
data: [],
z: 10,
axisLine: {
show: false,
lineStyle: {
color: "#0B4A6B",
width: 1,
type: "solid",
},
},
axisLabel: {
interval: 0,
show: true,
color: "#0B4A6B",
margin: 8,
fontSize: 16,
},
},
radiusAxis: {
// min: 40,
// max: 120,
// interval: 20,
axisLine: {
show: false,
lineStyle: {
color: "#0B3E5E",
width: 1,
type: "solid",
},
},
axisLabel: {
formatter: "{value} %",
show: false,
padding: [0, 0, 20, 0],
color: "#0B3E5E",
fontSize: 16,
},
splitLine: {
lineStyle: {
color: "#0B3E5E",
width: 2,
type: "solid",
},
},
},
calculable: true,
series: [
{
type: "pie",
radius: ["5%", "10%"],
center: ["35%", "50%"],
hoverAnimation: false,
labelLine: {
normal: {
show: false,
length: 3,
length2: 5,
},
emphasis: {
show: false,
},
},
data: [
{
name: "",
value: 0,
itemStyle: {
normal: {
color: "#0B4A6B",
},
},
},
],
},
{
type: "pie",
radius: ["90%", "95%"],
center: ["35%", "50%"],
hoverAnimation: false,
labelLine: {
normal: {
show: false,
length: 3,
length2: 5,
},
emphasis: {
show: false,
},
},
name: "",
data: [
{
name: "",
value: 0,
itemStyle: {
normal: {
color: "#0B4A6B",
},
},
},
],
},
{
stack: "a",
type: "pie",
radius: ["30%", "80%"],
center: ["35%", "50%"],
roseType: "area",
zlevel: 10,
label: {
normal: {
show: true,
formatter: "{c}",
textStyle: {
fontSize: 12,
},
position: "outside",
},
emphasis: {
show: true,
},
},
labelLine: {
normal: {
show: true,
length: 2,
length2: 5,
},
emphasis: {
show: false,
},
},
data: data,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 环形图
const doughnutChart = function (data, id) {
let charts = echarts.init(id);
let color = ['50,123,250', '244,201,7', '23,216,161', '122,60,235', '15,197,243']
if (!data) {
data = [
{
value: 335,
name: "类目1",
},
{
value: 310,
name: "类目2",
},
{
value: 234,
name: "类目3",
},
{
value: 135,
name: "类目4",
},
{
value: 1548,
name: "类目5",
}
]
}
data.forEach((val, index) => {
console.log(index % color.length)
val.itemStyle = {
color: `rgba(${color[index % color.length]},0.7)`,
borderColor: `rgba(${color[index % color.length]},1)`,
borderWidth: 3,
}
})
let option = {
backgroundColor: "rgba(0,0,0,0)",
legend: {
orient: "vertical",
top: "center",
right: "5%",
data: ["类目1", "类目2", "类目3", "类目4", "类目5"],
textStyle: {
color: "#fff",
fontSize: 0.75 * vw,
},
},
series: [
{
type: "pie",
radius: ["40%", "85%"],
center: ["40%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
normal: {
color: "transparent",
label: {
formatter: '{d}%',
show: true,
position: "inner",
rotate: "tangential",
color: "#fff",
fontSize: 0.75 * vw,
},
},
},
labelLine: {
normal: {
show: false,
},
},
data: data,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const doughnutChartTwo = function (data, id) {
let color = ['#0286ff', '#ffd302', '#fb5274']
if (!data) {
data = {
value: [
{
value: 30,
name: "光伏站1",
itemStyle: {
color: "#0286ff",
opacity: 1,
},
},
{
value: 30,
name: "光伏站2",
itemStyle: {
color: "#ffd302",
opacity: 1,
},
},
{
value: 40,
name: "光伏站3",
itemStyle: {
color: "#fb5274",
opacity: 1,
},
},
],
name: '能耗\n占比'
}
}
data.value.forEach((val, index) => {
val.itemStyle = {
color: color[index % color.length],
opacity: 1,
}
})
let dataTwo = data.value.map(val => {
console.log(val)
return {
value: val.value,
name: val.name,
itemStyle: {
color: val.itemStyle.color,
opacity: 0.4,
}
}
})
let index = -1
let charts = echarts.init(id);
let option = {
backgroundColor: "rgba(0,0,0,0)",
legend: {
orient: "vertical",
show: true,
right: "10%",
y: "center",
itemWidth: 0.5 * vw,
itemHeight: 0.5 * vw,
itemGap: 20,
formatter: function (val) {
index += 1
if (index >= data.value.length) {
index = 0
}
return `${val} ${data.value[index].value}%`
},
textStyle: {
color: "#7a8c9f",
fontSize: 14,
lineHeight: 20,
rich: {
percent: {
color: "#fff",
fontSize: 16,
},
},
},
},
tooltip: {
show: true,
formatter: '{b},{c}%'
},
series: [
{
type: "pie",
radius: ["65%", "75%"],
center: ["25%", "50%"],
hoverAnimation: false,
z: 10,
label: {
position: "center",
formatter: data.name,
rich: {
total: {
fontSize: 30,
color: "#fff",
},
},
color: "#55BCFB",
fontSize: 16,
fontWeight: 800,
lineHeight: 30,
},
data: data.value,
labelLine: {
show: false,
},
},
{
name: 'value',
type: "pie",
radius: ["54%", "64%"],
center: ["25%", "50%"],
hoverAnimation: false,
label: {
show: false,
},
data: dataTwo,
labelLine: {
show: false,
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const doughnutChartThree = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = [
{name: "故障1", value: 1},
{name: "故障2", value: 2},
{name: "故障3", value: 3},
{name: "故障4", value: 7},
];
}
let nameArray = data.map((item) => {
return (
item.name + "\t\t\t" + item.value + '次'
);
});
let color = ["#2ca1ff", "#0adbfa", "#febe13", "#65e5dd"];
let list = [];
for (let i = 0; i < data.length; i++) {
list.push(
{
value: data[i].value,
name:
data[i].name +
"\t\t\t" +
data[i].value + '次',
itemStyle: {
normal: {
borderWidth: 2,
shadowBlur: 5,
borderRadius: 5,
borderColor: color[i % color.length],
shadowColor: color[i % color.length],
},
},
},
{
value: 1,
name: "",
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: "rgba(0, 0, 0, 0)",
borderColor: "rgba(0, 0, 0, 0)",
borderWidth: 0,
},
},
}
);
}
let option = {
backgroundColor: "rgba(0,0,0,0)",
color: color,
tooltip: {
show: true,
formatter: function (val) {
if (!val.data.name) return
return val.data.name
}
},
grid: {
left: "20%",
top: "10%",
},
legend: [
{
icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
orient: "vertical",
data: nameArray,
right: "5%",
top: "center",
align: "left",
itemGap: 5,
textStyle: {
color: "rgba(36, 173, 254, 1)",
fontSize: "1rem",
},
//图例标记的图形高度
itemHeight: 10,
//图例标记的图形宽度
itemWidth: 10,
},
],
toolbox: {
show: false,
},
series: [
{
name: "",
type: "pie",
clockWise: false,
radius: ["120%", "140%"],
width: "55%",
height: "55%",
hoverAnimation: false,
center: ["50%", "50%"],
top: "center",
itemStyle: {
normal: {
label: {
show: false,
},
},
},
data: list,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 百分比柱状图
const PercentageBarChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
value: [20, 30, 40, 50, 60, 70, 80, 90],
xValue: ["设备1", "设备2", "设备3", "设备4", "设备5", "设备6", "设备7", "设备8"],
threshold: 70
}
}
const value = data.value
const xValue = data.xValue
const threshold = data.threshold
const isWarning = data.value.map(val => {
return val > threshold
})
let option = {
tooltip: {
trigger: "item",
borderColor: "rgba(89,211,255,1)",
borderWidth: 2,
padding: 5,
textStyle: {
color: "rgba(89,211,255,1)",
fontSize: vw,
width: 300,
height: 40,
},
formatter: "{c}" + "%",
extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
// 自定义的 CSS 样式
},
grid: {
bottom: "20%",
top: "35%",
left: "1%",
right: "1%",
},
dataZoom: [],
xAxis: {
data: xValue,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
margin: 12, //刻度标签与轴线之间的距离。
},
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
// 头
{
name: "",
type: "pictorialBar",
symbolSize: [1.5 * vw, 0.8 * vw],
symbolOffset: [0, -5],
z: 12,
itemStyle: {
normal: {
color: function (val) {
if (isWarning[val.dataIndex]) {
return "#C73536"
} else {
return "#0057A3"
}
}
},
},
data: value.map(val => {
return {
name: "",
value: 100,
symbolPosition: "end",
}
})
},
//底部立体柱
{
name: "vvvv",
stack: "1",
type: "bar",
// label: {
// show: true,
// position: 'top', //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
// distance: 15,
// color: "#FFFE00",
// fontSize: 30,
// formatter: '{c}' + '%'
// },
silent: true,
barWidth: 1.5 * vw,
barGap: "-100%", // Make series be overlap
data: value,
itemStyle: {
normal: {
color: function (val) {
if (isWarning[val.dataIndex]) {
return {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
//第一节下面
offset: 0,
color: "#FE1006",
},
{
offset: 1,
color: "#FE7917",
},
],
}
} else {
return {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
//第一节下面
offset: 0,
color: "#0968FC",
},
{
offset: 1,
color: "#15A1FF",
},
],
}
}
}
},
},
},
//三个最底下的圆片
{
name: "",
type: "pictorialBar",
symbolSize: [1.5 * vw, 0.8 * vw],
symbolOffset: [0, 4],
z: 12,
itemStyle: {
normal: {
color: function (val) {
if (isWarning[val.dataIndex]) {
return '#CC0809'
} else {
return '#086ACB'
}
}
},
},
data: value.map(val => {
return {
name: "",
value: "100",
}
})
},
// 中间圆片
{
name: "",
type: "pictorialBar",
symbolSize: [1.5 * vw, 0.8 * vw],
symbolOffset: [0, -5],
itemStyle: {
normal: {
color: function (val) {
if (isWarning[val.dataIndex]) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#FB130A",
},
{
offset: 1,
color: "#FE843A",
},
],
false
)
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#0EACFF",
},
{
offset: 1,
color: "#3AE8FE",
},
],
false
)
}
}
},
},
z: 12,
data: value.map(val => {
return {
name: "",
value: val,
symbolPosition: "end",
}
})
},
//上部立体柱
{
//上部立体柱
stack: "1",
type: "bar",
itemStyle: {
normal: {
color: function (val) {
if (isWarning[val.dataIndex]) {
return "#980811"
} else {
return "#0730A6"
}
},
opacity: 0.7,
},
},
label: {
show: true,
position: "top", //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
distance: 20,
color: "#A2A6C0",
fontSize: 12,
formatter: function (item) {
let a = 100;
return a - item.value + "%";
},
},
silent: true,
barWidth: 1.5 * vw,
barGap: "-100%", // Make series be overlap
data: value.map(val => {
return {
name: "a",
value: 100 - val,
}
})
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
const PercentageBarChartTwo = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data =
{
xName: ["设备1", "设备2", "设备3", "设备4", "设备5", "设备6", "设备7", "设备8"],
yData: [20, 30, 40, 50, 60, 70, 80, 90],
}
}
let option = {
color: ["#3398DB"],
tooltip: {
trigger: "axis",
fontSize: 1 * vw,
axisPointer: {
type: "line",
lineStyle: {
opacity: 0,
},
},
formatter: function (prams) {
return prams[0].data + "%";
},
},
grid: {
left: "0%",
right: "0%",
bottom: "0%",
top: "15%",
height: "85%",
containLabel: true,
z: 22,
},
xAxis: [
{
type: "category",
gridIndex: 0,
data: data.xName,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
color: "rgb(170,170,170)",
fontSize: vw,
},
},
],
yAxis: [
{
type: "value",
gridIndex: 0,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
min: 0,
max: 100,
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
],
series: [
{
name: "合格率",
type: "bar",
barWidth: "30%",
xAxisIndex: 0,
yAxisIndex: 0,
label: {
show: true,
position: "top", //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
distance: 20,
color: "#A2A6C0",
fontSize: 0.75 * vw,
formatter: function (item) {
return item.value + "%";
},
},
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00feff",
},
{
offset: 0.5,
color: "#027eff",
},
{
offset: 1,
color: "#0286ff",
},
]),
},
},
data: data.yData,
zlevel: 11,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 圆柱背景折线图
const cylindricalBackgroundLineChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ['00', '02', '04', '06', '08', '10', '12', '14'],
yData: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 6, 5],
yDataName: "发电量",
}
}
let max = []
data.yData.forEach(val => {
max.push(Math.max(...data.yData))
})
let option = {
backgroundColor: "rgba(0,0,0,0)",
grid: {
top: "20%",
bottom: "15%",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
},
xAxis: {
data: data.xName,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#01FCE3",
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: "#ebf8ac", //X轴文字颜色
},
},
},
yAxis: [
{
type: "value",
nameTextStyle: {
color: "#ebf8ac",
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#FFFFFF",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#ebf8ac",
},
},
},
],
series: [
{
name: data.yDataName,
type: "line",
symbol: "circle",
symbolSize: 12,
lineStyle: {
normal: {
width: 2,
color: "#0f0",
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: "#C9C7ED",
},
{
offset: 1,
color: "#fff",
},
]),
borderColor: "#fff",
shadowColor: "rgba(0, 0, 0, .5)",
},
data: data.yData,
},
{
type: "bar",
barWidth: '80%',
tooltip: {
show: false,
},
itemStyle: {
normal: {
barBorderRadius: 50,
color: "#0B2F90",
opacity: 0.7,
label: {
show: false,
},
shadowColor: "rgba(255, 255, 255, .1)",
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
},
data: max,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 冰山图
const tipFigure = function (data, id) {
let charts = echarts.init(id);
data = {
xName: ['1月', '2月', '3月', '4月', '5月', '6月'],
yDataOne: [138, 124, 714, 442, 622, 528],
yDataOneName: '能耗',
yDataTwo: [138, 124, 714, 442, 622, 528],
yDataTwoName: '能耗',
};
let xAxisMonth = [],
barData = [],
lineData = [];
for (let i = 0; i < data.xName.length; i++) {
xAxisMonth.push(data.xName[i]);
barData.push({
name: data.xName[i],
value: data.yDataOne[i],
});
lineData.push({
name: data.xName[i],
value: data.yDataTwo[i],
});
}
let option = {
backgroundColor: "rgba(0,0,0,0)",
title: "",
grid: {
top: "14%",
left: "1%",
bottom: "1%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params) {
return (
params[0]["data"].name +
"
" +
data.yDataOneName + ' ' +
params[1]["data"].value +
"
" +
data.yDataTwoName + ' ' +
params[0]["data"].value
);
},
},
xAxis: [
{
type: "category",
show: false,
data: ["3月", "4月", "5月", "6月", "7月", "8月"],
axisLabel: {
textStyle: {
color: "#b6b5ab",
},
},
},
{
type: "category",
position: "bottom",
data: xAxisMonth,
boundaryGap: true,
// offset: 40,
axisTick: {
show: false,
},
axisLine: {
// show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#727582',
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#b6b5ab",
},
},
},
],
yAxis: [
{
show: true,
// offset: 22,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#727582',
width: 1,
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
color: "#b6b5ab",
},
},
{
show: false,
type: "value",
name: "合格率(%)",
nameTextStyle: {
color: "#ccc",
},
axisLabel: {
color: "#ccc",
},
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
color: ["#e54035"],
series: [
{
name: data.yDataOneName,
type: "pictorialBar",
xAxisIndex: 1,
barCategoryGap: '-80%',
// barCategoryGap: '-5%',
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
itemStyle: {
normal: {
color: function (params) {
let colorList = [
"rgba(13,177,205,0.3)",
"rgba(29,103,182,0.3)",
"rgba(13,177,205,0.3)",
"rgba(29,103,182,0.3)",
"rgba(13,177,205,0.3)",
"rgba(29,103,182,0.3)",
];
return colorList[params.dataIndex];
},
borderColor: 'rgba(255,255,255,0.5)',
borderWidth: 3
},
emphasis: {
opacity: 1,
},
},
data: barData,
},
{
name: data.yDataTwoName,
symbolSize: 12,
type: "line",
yAxisIndex: 1,
data: lineData,
itemStyle: {
normal: {
borderWidth: 5,
color: {
colorStops: [
{
offset: 0,
color: "#821eff",
},
{
offset: 1,
color: "#204fff",
},
],
},
},
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 多个环形图
const multipleRingDiagram = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = [
{value: 10, name: "1月"},
{value: 20, name: "2月"},
{value: 40, name: "3月"},
{value: 45, name: "4月"},
{value: 10, name: "5月"},
{value: 20, name: "6月"},
{value: 40, name: "7月"},
{value: 45, name: "8月"},
{value: 10, name: "9月"},
{value: 20, name: "10月"},
{value: 40, name: "11月"},
{value: 65, name: "12月"}
];
}
let option = {
backgroundColor: "rgba(0,0,0,0)",
polar: {
radius: ["10%", "90%"],
center: ['30%', '50%'],
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
},
angleAxis: {
show: false,
clockwise: false,
// min: function(value) {
// return 5
// },
max: function (value) {
return value.max + 2;
},
},
radiusAxis: {
type: "category",
axisLabel: {
interval: 0,
color: "#fff",
fontSize: 0.25 * vw,
align: "left",
margin: "-2",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
z: 20,
data: [...data.map((d) => d.name)],
},
series: [
{
type: "bar",
coordinateSystem: "polar",
barWidth: 4,
barGap: 10,
showBackground: true,
backgroundStyle: {
color: "rgba(255,255,255,0.3)",
},
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00BCFA",
},
{
offset: 1,
color: "#01FE84",
},
]);
},
},
roundCap: true,
data: data,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 中国地图
const ChinaMap = function (data, id, param = {type: undefined}) {
let charts = echarts.init(id);
$.getJSON('../../board/json/ChinaMapData.json', function (geoJson) {
geoJson.features.forEach((val, index) => {
val.properties.name = ''.padStart(index, ' ')
})
echarts.registerMap("china", geoJson);
data = [
{value: [118.8062, 31.9208], index: random(5), type: random(5), state: random(5)},
{value: [127.9688, 45.368], index: random(5), type: random(5), state: random(5)},
{value: [123.1238, 42.1216], index: random(5), type: random(5), state: random(5)},
{value: [114.4995, 38.1006], index: random(5), type: random(5), state: random(5)},
{value: [109.1162, 34.2004], index: random(5), type: random(5), state: random(5)},
{value: [106.3586, 38.1775], index: random(5), type: random(5), state: random(5)},
{value: [101.4038, 36.8207], index: random(5), type: random(5), state: random(5)},
{value: [113.0823, 28.2568], index: random(5), type: random(5), state: random(5)},
{value: [102.9199, 25.46639], index: random(5), type: random(5), state: random(5)},
]
if (param.type) {
console.log(param.type)
data.forEach(val => {
val.type = param.type
})
}
charts.showLoading();
echarts.registerMap("china", geoJson);
charts.hideLoading();
let option = {
grid: {
top: '0%',
left: '0%',
right: '0%',
bottom: '0%',
},
geo: {
map: "china",
aspectScale: 0.75, //长宽比
zoom: 1.1,
roam: false,
itemStyle: {
normal: {
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#013B8F", // 0% 处的颜色
},
{
offset: 1,
color: "#013B8F", // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
shadowColor: "#013B8F",
shadowOffsetX: 0,
shadowOffsetY: 8,
},
emphasis: {
areaColor: "#2AB8FF",
borderWidth: 0,
color: "green",
label: {
show: false,
},
},
},
regions: [
{
name: "南海诸岛",
label: {
// formatter:'南海诸岛',
// fontSize:750*vw,
},
itemStyle: {
areaColor: "rgba(0, 10, 52, 1)",
borderColor: "rgba(0, 10, 52, 1)",
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
},
},
},
},
],
},
series: [
{
type: "map",
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: "#1DE9B6",
},
},
emphasis: {
textStyle: {
// color: "rgb(183,185,14)",
},
},
},
itemStyle: {
normal: {
borderColor: "rgb(147, 235, 248,0.5)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#013B8F", // 0% 处的颜色
},
{
offset: 1,
color: "#013B8F", // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
},
emphasis: {
// areaColor: "rgb(46,229,206)",
// shadowColor: 'rgb(12,25,50)',
// borderWidth: 0.1,
},
},
zoom: 1.1,
// roam: false,
map: "china", //使用
aspectScale: 0.75, //长宽比
// data: this.difficultData //热力图数据 不同区域 不同的底色
},
// 地图标点
{
type: "effectScatter",
coordinateSystem: "geo",
showEffectOn: 'emphasis',
zlevel: 1,
rippleEffect: {
period: 15,
scale: 1,
brushType: "fill",
},
hoverAnimation: true,
// label: {
// normal: {
// formatter: "{b}",
// position: "right",
// offset: [15, 0],
// color: "#1DE9B6",
// show: true,
// },
// },
itemStyle: {
normal: {
color: "#1DE9B6",
shadowBlur: 10,
shadowColor: "#333",
},
},
symbol: function (value, data) {
// 修改图片为'image://+地址'
switch (data.data.type) {
case 1:
return `image://../../img/mapIcon/hydrogenRefuelingStation${data.data.state}.png`
case 2:
return `image://../../img/mapIcon/hydrogenPowerStation${data.data.state}.png`
case 3:
return `image://../../img/mapIcon/oilHydrogenPowerStation${data.data.state}.png`
case 4:
return `image://../../img/mapIcon/oilHydrogenStation${data.data.state}.png`
case 5:
return `image://../../img/mapIcon/hydrogenRefuelingStation${data.data.state}.png`
}
},
symbolSize: [2.5 * vw, 2.5 * vw],
data: data,
label: {
padding: [-16, 0, 0, 5],
show: true,
position: 'bottom',
// align:'left',
formatter: function (val) {
switch (val.data.type) {
case 1:
return [`{a|}{b|'加氢站${val.data.index}}`]
case 2:
return [`{a|}{b|光伏站${val.data.index}}`]
case 3:
return [`{a|}{b|充装站${val.data.index}}`]
case 4:
return [`{a|}{b|制氢站${val.data.index}}`]
case 5:
return [`{a|}{b|能源站${val.data.index}}`]
}
},
rich: {
a: {
width: 0.34 * vw,
height: 0.34 * vw,
borderColor: '#0FF32E',
borderWidth: 0.34 * vw,
borderRadius: 0.17 * vw,
shadowBlur: 20,
shadowColor: "#0FF32E",
},
b: {
padding: [0, 0, 0, 5],
color: '#0FF32E',
height: 40,
fontSize: 0.75 * vw,
},
}
}
},
],
};
charts.on('click', function (params) {
if (params.componentSubType === "effectScatter") {
console.log(params.data)
window.open(`http://121.36.58.109:8011/board/managementPlatformTwo?id=${params.data.type}`);
// window.open(`${location.protocol}${location.protocol ? '//' : ''}${location.host}/board/managementPlatformTwo?index=${params.data.index}`);
}
});
charts.setOption(option, true);
$(window).resize(charts.resize);
})
}
// 地图补充
const mapSupplement = (el, data) => {
const htmlData = `
`
$(el).html(htmlData)
}