wangh
/
aucma-benchmarking-factory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '44af8f051b'
${ noResults }
aucma-benchmarking-factory/ruoyi-admin/src/main/resources/static/js/echartsCommon.js

1882 lines
54 KiB
JavaScript
Raw Normal View History Unescape Escape

新增界面
4 years ago
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"],
修改数据请求
4 years ago
xData: [53, 24, 66, 23, 100],
新增界面
4 years ago
xDataName: "达成率",
}
}
let backGround = []
data.xData.forEach(() => {
backGround.push(100)
})
let option = {
grid: {
left: "0%",
修改数据请求
4 years ago
right: "12%",
新增界面
4 years ago
bottom: "0%",
top: "0%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
修改数据请求
4 years ago
textStyle: {
fontSize: 0.8 * vw
},
新增界面
4 years ago
formatter: function (params) {
return (
params[0].name +
"<br/>" +
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
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,
修改数据请求
4 years ago
label: {
show: true,
position: "right",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
修改数据请求
4 years ago
formatter: '{c}%'
修改数据请求
4 years ago
},
新增界面
4 years ago
},
{
name: "背景",
type: "bar",
barWidth: vw,
barGap: "-100%",
data: backGround,
itemStyle: {
normal: {
color: "rgba(24,31,68,1)",
barBorderRadius: 30,
},
},
},
],
};
修改数据请求
4 years ago
// 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)'
// }
// })
// }
新增界面
4 years ago
charts.setOption(option);
$(window).resize(charts.resize);
}
添加订单可视化看板
4 years ago
const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
let charts = echarts.init(id);
if (!data) {
data = {
yNameOne: ["设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001"],
yData: [41, 99, 32, 41, 24,4,16,64,18],
xDataName: "达成率",
}
}
let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
let bgBar = []
data.yData.forEach(() => {
bgBar.push(100)
})
let option = {
grid: {
left: "0%",
right: "12%",
bottom: "0%",
top: "0%",
containLabel: true,
},
xAxis: {
show: false,
},
yAxis: [
{
show: true,
data: data.yNameOne,
inverse: true,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
},
},
{
show: true,
inverse: true,
data: data.yData,
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff",
},
formatter: '{value}%'
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "条",
type: "bar",
yAxisIndex: 0,
data: data.yData,
barWidth: vw,
itemStyle: {
normal: {
barBorderRadius: 30,
color: function (params) {
var num = myColor.length;
return myColor[params.dataIndex % num];
},
},
},
},
{
name: "框",
type: "bar",
yAxisIndex: 1,
barGap: "-100%",
data: bgBar,
barWidth: 1.2 * vw,
itemStyle: {
normal: {
color: "none",
borderColor: "#00c1de",
borderWidth: 1,
barBorderRadius: 15,
},
},
},
],
};
// 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);
}
新增界面
4 years ago
// 柱状+折线图
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 = {
修改界面
4 years ago
tooltip: {
修改数据请求
4 years ago
textStyle: {
fontSize: 0.8 * vw
修改界面
4 years ago
}
},
新增界面
4 years ago
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: [
{
修改数据请求
4 years ago
name: data.yDataOneName || '',
新增界面
4 years ago
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, 设置图形的阴影效果。
},
},
添加订单可视化看板
4 years ago
data: data.yDataOne || [],
新增界面
4 years ago
},
{
name: data.yDataTwoName,
type: "bar",
barWidth: vw,
label: {
修改数据请求
4 years ago
show: true,
新增界面
4 years ago
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);
}
添加订单可视化看板
4 years ago
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);
}
新增界面
4 years ago
// 饼图
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}%)",
修改数据请求
4 years ago
textStyle: {
fontSize: 0.8 * vw
修改界面
4 years ago
}
新增界面
4 years ago
},
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: {
修改数据请求
4 years ago
formatter: "{b|{b}} {c|{c}次}",
新增界面
4 years ago
rich: {
c: {
color: "rgb(241,246,104)",
fontSize: 0.75 * vw,
lineHeight: 5,
},
b: {
color: "rgb(98,137,169)",
fontSize: 0.75 * vw,
修改数据请求
4 years ago
height: 1.5 * vw,
新增界面
4 years ago
},
},
},
},
修改数据请求
4 years ago
emphasis: {
label: {
fontSize: 0.75 * vw
新增界面
4 years ago
}
},
labelLine: {
normal: {
lineStyle: {
color: "rgb(98,137,169)",
},
smooth: true,
修改数据请求
4 years ago
length: 0,
新增界面
4 years ago
length2: 10,
},
},
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
修改界面
4 years ago
// 垂直柱状图
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: {
修改数据请求
4 years ago
textStyle: {
fontSize: 0.8 * vw
修改界面
4 years ago
}
},
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",
修改数据请求
4 years ago
fontSize: 0.8 * vw,
修改界面
4 years ago
interval: 0,
},
},
yAxis: {
nameTextStyle: {
color: "#fff",
修改数据请求
4 years ago
fontSize: 0.8 * vw,
修改界面
4 years ago
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
修改数据请求
4 years ago
fontSize: 0.8 * vw,
修改界面
4 years ago
},
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);
}
添加订单可视化看板
4 years ago
// 多个垂直柱状图
const multipleVerticalBarChart = function (data, id) {
新增界面
4 years ago
let charts = echarts.init(id);
if (!data) {
data = {
添加订单可视化看板
4 years ago
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: "充装",
新增界面
4 years ago
}
}
let option = {
tooltip: {
添加订单可视化看板
4 years ago
//提示框组件
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
// trigger: "axis",
// formatter: `{b}<br />{a0}: {c0}<br />{a1}: {c1}`,
// axisPointer: {
// type: "shadow",
// label: {
// backgroundColor: "#6a7985",
// },
// },
// textStyle: {
// color: "#fff",
// fontStyle: "normal",
// fontFamily: "微软雅黑",
// fontSize: 12,
// },
新增界面
4 years ago
},
grid: {
添加订单可视化看板
4 years ago
left: "1%",
right: "4%",
bottom: "0",
top: 30,
padding: "0 0 10 0",
新增界面
4 years ago
containLabel: true,
},
添加订单可视化看板
4 years ago
legend: {
//图例组件，颜色和名字
right: 10,
top: 0,
itemGap: 16,
itemWidth: vw,
itemHeight: 0.6 * vw,
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
dataZoom: [],
xAxis: [
新增界面
4 years ago
{
type: "category",
添加订单可视化看板
4 years ago
boundaryGap: true, //坐标轴两边留白
data: data.xName,
axisLabel: {
show: true,
color: '#fff'
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
axisTick: {
//坐标轴刻度相关设置。
新增界面
4 years ago
show: false,
},
axisLine: {
添加订单可视化看板
4 years ago
//坐标轴轴线相关设置
新增界面
4 years ago
lineStyle: {
color: "#fff",
添加订单可视化看板
4 years ago
opacity: 0.2,
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
新增界面
4 years ago
},
},
},
],
添加订单可视化看板
4 years ago
yAxis: {
新增界面
4 years ago
type: "value",
添加订单可视化看板
4 years ago
splitNumber: 5,
max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5,
新增界面
4 years ago
axisLabel: {
show: true,
color: '#fff'
},
axisLine: {
添加订单可视化看板
4 years ago
show: false,
},
axisTick: {
show: false,
新增界面
4 years ago
},
splitLine: {
添加订单可视化看板
4 years ago
show: true,
新增界面
4 years ago
lineStyle: {
type: 'dashed',
添加订单可视化看板
4 years ago
color: '#777777',
opacity: 0.3,
新增界面
4 years ago
},
},
},
添加订单可视化看板
4 years ago
series: [
新增界面
4 years ago
{
添加订单可视化看板
4 years ago
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,
},
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
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)',
},
],
},
新增界面
4 years ago
},
},
},
{
添加订单可视化看板
4 years ago
name: data.yDataTwoName,
新增界面
4 years ago
type: "bar",
添加订单可视化看板
4 years ago
data: data.yDataTwo,
barWidth: 1 * vw,
barGap: 0.5, //柱间距离
新增界面
4 years ago
label: {
添加订单可视化看板
4 years ago
//图形上的文本标签
新增界面
4 years ago
normal: {
show: true,
添加订单可视化看板
4 years ago
position: "top",
新增界面
4 years ago
textStyle: {
添加订单可视化看板
4 years ago
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
新增界面
4 years ago
},
},
},
itemStyle: {
添加订单可视化看板
4 years ago
//图形样式
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: {
//图形上的文本标签
新增界面
4 years ago
normal: {
show: true,
添加订单可视化看板
4 years ago
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
新增界面
4 years ago
},
},
},
添加订单可视化看板
4 years ago
itemStyle: {
//图形样式
normal: {
barBorderRadius: [5, 5, 0, 0],
color: "rgba(26, 99, 74, 0.7)",
},
},
新增界面
4 years ago
},
],
};
添加订单可视化看板
4 years ago
if (data?.xName?.length >= 4) {
新增界面
4 years ago
option.dataZoom.push({
show: true,
type: 'slider',
添加订单可视化看板
4 years ago
bottom: '0%',
xAxisIndex: 0,
height: 12,
新增界面
4 years ago
start: 0,
添加订单可视化看板
4 years ago
end: 1 / (data.xName.length / 4) * 100,
新增界面
4 years ago
textStyle: {
fontSize: 0,
添加订单可视化看板
4 years ago
color: 'rgba(0,0,0,0)'
新增界面
4 years ago
}
})
添加订单可视化看板
4 years ago
option.grid.bottom = '7%'
新增界面
4 years ago
}
charts.setOption(option);
$(window).resize(charts.resize);
}
添加订单可视化看板
4 years ago
const multipleVerticalBarChartTwo = function (data, id) {
新增界面
4 years ago
let charts = echarts.init(id);
if (!data) {
data = {
添加订单可视化看板
4 years ago
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",
新增界面
4 years ago
}
}
let option = {
grid: {
添加订单可视化看板
4 years ago
top: "20%",
left: "1%",
right: "1%",
bottom: "1%",
新增界面
4 years ago
containLabel: true,
},
tooltip: {
添加订单可视化看板
4 years ago
trigger: 'axis',
新增界面
4 years ago
axisPointer: {
添加订单可视化看板
4 years ago
type: 'shadow'
}
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
legend: {
data: [data.yDataOneName, data.yDataTwoName],
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
xAxis: [
新增界面
4 years ago
{
添加订单可视化看板
4 years ago
type: 'category',
axisTick: {show: false},
新增界面
4 years ago
axisLabel: {
textStyle: {
添加订单可视化看板
4 years ago
fontSize: 0.75 * vw,
color: "#F1F1F3",
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
data: data.xName
}
],
yAxis: [
新增界面
4 years ago
{
axisLabel: {
textStyle: {
添加订单可视化看板
4 years ago
fontSize: 0.75 * vw,
color: "#F1F1F3",
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
type: 'value'
}
新增界面
4 years ago
],
series: [
{
添加订单可视化看板
4 years ago
name: data.yDataOneName,
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
新增界面
4 years ago
itemStyle: {
添加订单可视化看板
4 years ago
//图形样式
新增界面
4 years ago
normal: {
添加订单可视化看板
4 years ago
color: "#1FEDCA",
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
label: {
show: true,
position: "top",
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
data: data.yDataOne
新增界面
4 years ago
},
{
添加订单可视化看板
4 years ago
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
},
},
新增界面
4 years ago
itemStyle: {
添加订单可视化看板
4 years ago
//图形样式
新增界面
4 years ago
normal: {
添加订单可视化看板
4 years ago
color: "#E65454",
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
data: data.yDataTwo
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
]
新增界面
4 years ago
};
添加订单可视化看板
4 years ago
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,
}
})
}
新增界面
4 years ago
charts.setOption(option);
$(window).resize(charts.resize);
}
添加订单可视化看板
4 years ago
// 单个垂直柱状图
const singleVerticalBarChart = function (data, id) {
新增界面
4 years ago
let charts = echarts.init(id);
if (!data) {
data = {
添加订单可视化看板
4 years ago
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
yData: [12, 20, 11, 30, 14, 80, 50],
新增界面
4 years ago
}
}
添加订单可视化看板
4 years ago
let left = () => {
if (vw < 10) return '18%'
return '10%'
}
新增界面
4 years ago
let option = {
grid: {
添加订单可视化看板
4 years ago
top: "10%",
left: left(),
right: "5%",
bottom: "25%",
// containLabel: true
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
dataZoom: [],
xAxis: {
data: data.xName,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
新增界面
4 years ago
axisLabel: {
添加订单可视化看板
4 years ago
color: "#fff",
fontSize: 14,
},
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
yAxis: {
nameTextStyle: {
color: "#fff",
fontSize: 16,
},
axisLine: {
lineStyle: {
color: "#0177d4",
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
axisLabel: {
color: "#fff",
fontSize: 16,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
},
series: [
新增界面
4 years ago
{
type: "bar",
添加订单可视化看板
4 years ago
barWidth: 1 * vw,
新增界面
4 years ago
itemStyle: {
normal: {
添加订单可视化看板
4 years ago
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00b0ff",
},
{
offset: 0.8,
color: "#7052f4",
},
],
false
),
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
data: data.yData,
新增界面
4 years ago
},
],
};
添加订单可视化看板
4 years ago
新增界面
4 years ago
charts.setOption(option);
$(window).resize(charts.resize);
}
添加订单可视化看板
4 years ago
const singleVerticalBarChartTwo = function (data, id) {
新增界面
4 years ago
let charts = echarts.init(id);
if (!data) {
添加订单可视化看板
4 years ago
data = {
xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
yData: [38, 60, 40, 55, 42, 39, 45, 40],
}
新增界面
4 years ago
}
let option = {
添加订单可视化看板
4 years ago
backgroundColor: 'rgba(0,0,0,0)',
color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
grid: {
top: "20%",
bottom: "15%",
right: "5%"
},
新增界面
4 years ago
xAxis: {
添加订单可视化看板
4 years ago
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,
},
新增界面
4 years ago
splitLine: {
show: false,
},
axisLine: {
添加订单可视化看板
4 years ago
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,
新增界面
4 years ago
},
axisLabel: {
添加订单可视化看板
4 years ago
color: '#c0c3cd', //Y轴文字
fontSize: 14,
新增界面
4 years ago
},
axisTick: {
lineStyle: {
添加订单可视化看板
4 years ago
color: '#384267',
width: 1,
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
show: true,
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
splitLine: {
新增界面
4 years ago
show: true,
添加订单可视化看板
4 years ago
lineStyle: {
color: '#384267',
type: 'line',
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
axisLine: {
lineStyle: {
color: '#fff',
width: 1,
type: 'line',
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
show: false,
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
},
新增界面
4 years ago
series: [
{
添加订单可视化看板
4 years ago
data: data.yData,
type: 'bar',
barMaxWidth: 'auto',
barWidth: 1.5 * vw,
新增界面
4 years ago
label: {
show: true,
添加订单可视化看板
4 years ago
position: 'top',
// distance: 10,
color: '#fff',
formatter: '{a|}',
rich: {
a: {
width: 3 * vw,
height: 3 * vw,
backgroundColor: {
image: '../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png'
},
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
}
新增界面
4 years ago
},
},
{
添加订单可视化看板
4 years ago
data: data.yData,
type: 'pictorialBar',
barMaxWidth: vw,
symbolPosition: 'end',
symbol: 'diamond',
color: '#66c8ff',
symbolOffset: [0 + '%', '-50%'],
symbolSize: [1.5 * vw, 10],
zlevel: 4,
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
{
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,
}],
新增界面
4 years ago
};
添加订单可视化看板
4 years ago
新增界面
4 years ago
charts.setOption(option);
$(window).resize(charts.resize);
}
添加订单可视化看板
4 years ago
// 多个折线面积图(直线)
const multipleBrokenLineAreaDiagram = (data, ids) => {
let charts = echarts.init(ids);
新增界面
4 years ago
添加订单可视化看板
4 years ago
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: '充装量',
}
新增界面
4 years ago
}
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
添加订单可视化看板
4 years ago
lineStyle: {
color: "#57617B",
},
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
},
legend: {
icon: "rect",
itemWidth: 0.75 * vw,
itemHeight: 0.25 * vw,
itemGap: 0.75 * vw,
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
修改界面
4 years ago
right: "4%",
添加订单可视化看板
4 years ago
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
dataZoom: [],
新增界面
4 years ago
xAxis: [
{
type: "category",
添加订单可视化看板
4 years ago
boundaryGap: false,
新增界面
4 years ago
axisLine: {
lineStyle: {
添加订单可视化看板
4 years ago
color: "#57617B",
},
新增界面
4 years ago
},
axisLabel: {
添加订单可视化看板
4 years ago
show: true,
color: '#fff'
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
data: data.xData,
新增界面
4 years ago
},
],
yAxis: [
{
添加订单可视化看板
4 years ago
type: "value",
新增界面
4 years ago
axisTick: {
show: false,
},
修改界面
4 years ago
min:15,
新增界面
4 years ago
axisLine: {
添加订单可视化看板
4 years ago
lineStyle: {
color: "#57617B",
},
新增界面
4 years ago
},
axisLabel: {
show: true,
添加订单可视化看板
4 years ago
color: '#fff'
新增界面
4 years ago
},
splitLine: {
show: false,
添加订单可视化看板
4 years ago
lineStyle: {
color: "#57617B",
},
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
},
],
series: [
{
name: data.yDataOneName,
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
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)",
},
新增界面
4 years ago
},
修改界面
4 years ago
label: {
//图形上的文本标签
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
添加订单可视化看板
4 years ago
data: data.yDataOne,
新增界面
4 years ago
},
{
添加订单可视化看板
4 years ago
name: data.yDataTwoName,
type: "line",
smooth: false,
lineStyle: {
新增界面
4 years ago
normal: {
添加订单可视化看板
4 years ago
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,
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
},
itemStyle: {
normal: {
color: "rgb(0,136,212)",
新增界面
4 years ago
},
},
修改界面
4 years ago
label: {
//图形上的文本标签
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
添加订单可视化看板
4 years ago
data: data.yDataTwo,
新增界面
4 years ago
},
{
添加订单可视化看板
4 years ago
name: data.yDataThreeName,
新增界面
4 years ago
type: "line",
添加订单可视化看板
4 years ago
smooth: false,
lineStyle: {
新增界面
4 years ago
normal: {
添加订单可视化看板
4 years ago
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
新增界面
4 years ago
{
offset: 0,
添加订单可视化看板
4 years ago
color: "rgba(219, 50, 51, 0.6)",
新增界面
4 years ago
},
{
添加订单可视化看板
4 years ago
offset: 0.8,
color: "rgba(219, 50, 51, 0.2)",
新增界面
4 years ago
},
],
添加订单可视化看板
4 years ago
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(219,50,51)",
新增界面
4 years ago
},
},
添加订单可视化看板
4 years ago
data: data.yDataThree,
新增界面
4 years ago
},
],
};
添加订单可视化看板
4 years ago
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%'
}
新增界面
4 years ago
charts.setOption(option);
$(window).resize(charts.resize);
}
添加订单可视化看板
4 years ago
// 空心饼图
const hollowPieChart = function (data, id) {
新增界面
4 years ago
let charts = echarts.init(id);
if (!data) {
data = [
添加订单可视化看板
4 years ago
{
value: 10,
name: "IQC1",
},
{
value: 5,
name: "IQC2",
},
{
value: 15,
name: "IQC3",
},
{
value: 25,
name: "IQC4",
},
{
value: 20,
name: "IQC5",
},
{
value: 35,
name: "IQC6",
},
]
新增界面
4 years ago
}
let option = {
添加订单可视化看板
4 years ago
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
grid: {
left: '-10%',
top: '10%',
bottom: '10%',
right: '10%',
containLabel: true,
新增界面
4 years ago
},
tooltip: {
添加订单可视化看板
4 years ago
trigger: "item",
formatter: "{b} : {c} ({d}%)",
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
polar: {},
新增界面
4 years ago
angleAxis: {
添加订单可视化看板
4 years ago
interval: 1,
type: "category",
data: [],
z: 10,
axisLine: {
show: false,
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
axisLabel: {
show: false,
}
新增界面
4 years ago
},
radiusAxis: {
添加订单可视化看板
4 years ago
min: 40,
max: 120,
interval: 20,
新增界面
4 years ago
axisLine: {
show: false,
},
添加订单可视化看板
4 years ago
axisLabel: {
show: false,
},
新增界面
4 years ago
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
添加订单可视化看板
4 years ago
// calculable: true,
新增界面
4 years ago
series: [
{
添加订单可视化看板
4 years ago
stack: "a",
type: "pie",
radius: ["20%", "80%"],
zlevel: 10,
label: {
show: false
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
// roseType: "area",
新增界面
4 years ago
data: data,
},
],
};
添加订单可视化看板
4 years ago
新增界面
4 years ago
charts.setOption(option);
$(window).resize(charts.resize);
}
添加订单可视化看板
4 years ago
// 多个环形图
const percentageRingDiagram = function (data, id) {
新增界面
4 years ago
let charts = echarts.init(id);
添加订单可视化看板
4 years ago
if (!data) {
新增界面
4 years ago
data = [
添加订单可视化看板
4 years ago
{
name: "数据1",
value: 54,
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
{
name: "数据1",
value: 44,
},
{
name: "数据1",
value: 35,
},
{
name: "数据1",
value: 30,
},
{
name: "数据1",
value: 44,
},
{
name: "数据1",
value: 35,
},
{
name: "数据1",
value: 30,
},
];
}
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 > 3 ? (index - 4) * 25 + 10 + "%" : index * 25 + 10 + "%",
y: index > 3 ? "90%" : "40%",
// 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,
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
labelLine: {
show: false,
新增界面
4 years ago
},
},
},
添加订单可视化看板
4 years ago
hoverAnimation: false,
center: [
index > 3 ? (index - 4) * 25 + 10 + "%" : index * 25 + 10 + "%",
index > 3 ? "75%" : "25%",
],
data: [
新增界面
4 years ago
{
添加订单可视化看板
4 years ago
value: item.value,
新增界面
4 years ago
label: {
normal: {
添加订单可视化看板
4 years ago
formatter: function (params) {
return params.value + "%";
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
position: "center",
show: true,
新增界面
4 years ago
textStyle: {
添加订单可视化看板
4 years ago
fontSize: vw,
fontWeight: "bold",
color: colors[index][0],
新增界面
4 years ago
},
},
},
},
{
添加订单可视化看板
4 years ago
value: 100 - item.value,
name: "invisible",
新增界面
4 years ago
itemStyle: {
normal: {
添加订单可视化看板
4 years ago
color: colors[index][1],
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
emphasis: {
color: colors[index][1],
新增界面
4 years ago
},
添加订单可视化看板
4 years ago
},
新增界面
4 years ago
},
],
});
添加订单可视化看板
4 years ago
});
新增界面
4 years ago
添加订单可视化看板
4 years ago
let option = {
title: titleArr,
series: seriesArr,
};
新增界面
4 years ago
添加订单可视化看板
4 years ago
charts.setOption(option);
$(window).resize(charts.resize);
}