刘朋
1 year ago
28 changed files with 2270 additions and 968 deletions
File diff suppressed because it is too large
@ -1,148 +1,152 @@ |
|||||
import * as echarts from "echarts"; |
import * as echarts from "echarts"; |
||||
var options = { |
var options = { |
||||
|
tooltip: { |
||||
color: ["#5090FF", "#01B3E4"], |
show: true, |
||||
grid: { |
trigger: "axis", |
||||
left: "2%", |
}, |
||||
right: "5%", |
color: "#FFD15C", |
||||
bottom: "10%", |
grid: { |
||||
top: "10%", |
left: "2%", |
||||
containLabel: true, |
right: "5%", |
||||
}, |
bottom: "10%", |
||||
legend: { |
top: "10%", |
||||
icon: 'rect', |
containLabel: true, |
||||
top: '0%', |
}, |
||||
right: '5%', |
legend: { |
||||
data: ['实时数据'], |
icon: "rect", |
||||
itemWidth:18, |
top: "0%", |
||||
itemHeight: 5, |
right: "5%", |
||||
itemGap: 30, |
data: ["实时数据"], |
||||
itemStyle:{ |
itemWidth: 18, |
||||
color:"#FFD15C", |
itemHeight: 5, |
||||
}, |
itemGap: 30, |
||||
textStyle: { |
// itemStyle: {
|
||||
fontSize: 12, |
// color: "#FFD15C",
|
||||
color: '#fff', |
// },
|
||||
padding: [0, 0, 0, 10], |
textStyle: { |
||||
}, |
fontSize: 12, |
||||
}, |
color: "#fff", |
||||
xAxis: { |
padding: [0, 0, 0, 10], |
||||
type: "category", |
}, |
||||
axisLine: { |
}, |
||||
lineStyle: { |
xAxis: { |
||||
color: "#BDD8FB", |
type: "category", |
||||
fontSize: 12, |
axisLine: { |
||||
}, |
lineStyle: { |
||||
|
color: "#FFD15C", |
||||
}, |
}, |
||||
axisLabel: { |
}, |
||||
// interval:0,
|
axisLabel: { |
||||
color: "#BDD8FB", |
// interval:0,
|
||||
fontSize: 12, |
color: "#fff", |
||||
}, |
fontSize: 10, |
||||
axisTick: { |
}, |
||||
show: false, |
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [ |
||||
|
"00:00", |
||||
|
"01:00", |
||||
|
"02:00", |
||||
|
"03:00", |
||||
|
"04:00", |
||||
|
"05:00", |
||||
|
"06:00", |
||||
|
"07:00", |
||||
|
"08:00", |
||||
|
"09:00", |
||||
|
"10:00", |
||||
|
"11:00", |
||||
|
"12:00", |
||||
|
"13:00", |
||||
|
"14:00", |
||||
|
"15:00", |
||||
|
"16:00", |
||||
|
"17:00", |
||||
|
"18:00", |
||||
|
"19:00", |
||||
|
"20:00", |
||||
|
"21:00", |
||||
|
"22:00", |
||||
|
"23:00", |
||||
|
], |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: "value", |
||||
|
min: 0, |
||||
|
max: 40, |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
fontSize: 10, |
||||
|
color: "#fff", |
||||
|
align: "center", |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: "rgba(255, 255, 255, 0.15)", |
||||
|
// type: 'dashed', // dotted 虚线
|
||||
}, |
}, |
||||
|
}, |
||||
|
splitArea: { show: false }, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
fontSize: 10, |
||||
|
fontFamily: "Bebas", |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "line", |
||||
|
// symbol: "none",
|
||||
|
showSymbol: false, |
||||
|
smooth: true, // 是否曲线
|
||||
|
name: "实时数据", // 图例对应类别
|
||||
data: [ |
data: [ |
||||
"00:00", |
12, 12, 23, 23, 30, 12, 26, 28, 31, 23, 25, 12, 18, 18, 18, 18, 23, 21, |
||||
"01:00", |
20, 20, 20, 20, 20, 22, 22, 12, 12, 12, |
||||
"02:00", |
], // 纵坐标数据
|
||||
"03:00", |
lineStyle: { |
||||
"04:00", |
color: "#FFD15C", |
||||
"05:00", |
|
||||
"06:00", |
|
||||
"07:00", |
|
||||
"08:00", |
|
||||
"09:00", |
|
||||
"10:00", |
|
||||
"11:00", |
|
||||
"12:00", |
|
||||
"13:00", |
|
||||
"14:00", |
|
||||
"15:00", |
|
||||
"16:00", |
|
||||
"17:00", |
|
||||
"18:00", |
|
||||
"19:00", |
|
||||
"20:00", |
|
||||
"21:00", |
|
||||
"22:00", |
|
||||
"23:00", |
|
||||
], |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: "value", |
|
||||
min: 0, |
|
||||
max:40, |
|
||||
minInterval: 1, |
|
||||
nameTextStyle: { |
|
||||
fontSize: 12, |
|
||||
color: "#BDD8FB", |
|
||||
align: "center", |
|
||||
}, |
|
||||
splitLine: { |
|
||||
lineStyle: { |
|
||||
color: "rgba(255, 255, 255, 0.15)", |
|
||||
// type: 'dashed', // dotted 虚线
|
|
||||
}, |
|
||||
}, |
}, |
||||
splitArea: { show: false }, |
areaStyle: { |
||||
axisLine: { |
// 区域颜色
|
||||
show: false, |
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
}, |
// {
|
||||
axisTick: { |
// offset: 0,
|
||||
show: false, |
// color: "#5090FF",
|
||||
}, |
// },
|
||||
axisLabel: { |
// {
|
||||
fontSize: 12, |
// offset: 1,
|
||||
fontFamily: "Bebas", |
// color: "#1057E5",
|
||||
color: "#BDD8FB", |
// },
|
||||
}, |
// ]),
|
||||
}, |
color: { |
||||
series: [ |
type: "linear", |
||||
{ |
x: 0, //右
|
||||
type: "line", |
y: 0, //下
|
||||
// symbol: "none",
|
x2: 0, //左
|
||||
showSymbol: false, |
y2: 1, //上
|
||||
smooth: true, // 是否曲线
|
colorStops: [ |
||||
name: "实时数据", // 图例对应类别
|
{ |
||||
data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
|
offset: 0.1, |
||||
lineStyle :{ |
color: "#FFD15C99", // 0% 处的颜色
|
||||
color:"#FFD15C" |
}, |
||||
}, |
{ |
||||
areaStyle: { |
offset: 1, |
||||
// 区域颜色
|
opacity: 0.01, |
||||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
color: "#FFD15C01", // 100% 处的颜色
|
||||
// {
|
|
||||
// offset: 0,
|
|
||||
// color: "#5090FF",
|
|
||||
// },
|
|
||||
// {
|
|
||||
// offset: 1,
|
|
||||
// color: "#1057E5",
|
|
||||
// },
|
|
||||
// ]),
|
|
||||
color: { |
|
||||
type: 'linear', |
|
||||
x: 0, //右
|
|
||||
y: 0, //下
|
|
||||
x2: 0, //左
|
|
||||
y2: 1, //上
|
|
||||
colorStops: [ |
|
||||
{ |
|
||||
offset: 0.1, |
|
||||
color: '#FFD15C99' // 0% 处的颜色
|
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
opacity:0.01, |
|
||||
color: '#FFD15C01' // 100% 处的颜色
|
|
||||
} |
|
||||
] |
|
||||
}, |
}, |
||||
}, |
], |
||||
|
}, |
||||
}, |
}, |
||||
|
}, |
||||
], |
], |
||||
}; |
}; |
||||
|
|
||||
export default options; |
export default options; |
||||
|
|||||
@ -1,154 +1,156 @@ |
|||||
import * as echarts from "echarts"; |
import * as echarts from "echarts"; |
||||
var options = { |
var options = { |
||||
|
color: "#0783FA", |
||||
color: ["#5090FF", "#01B3E4"], |
tooltip: { |
||||
tooltip: { |
show: true, |
||||
trigger: "axis", |
trigger: "axis", |
||||
backgroundColor: "rgba(0,0,0,.6)", |
// backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)", |
// borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: { |
// textStyle: {
|
||||
color: "#FFF", |
// color: "#FFF",
|
||||
}, |
// },
|
||||
}, |
}, |
||||
grid: { |
grid: { |
||||
left: "2%", |
left: "2%", |
||||
right: "5%", |
right: "5%", |
||||
bottom: "10%", |
bottom: "10%", |
||||
top: "10%", |
top: "10%", |
||||
containLabel: true, |
containLabel: true, |
||||
}, |
}, |
||||
legend: { |
legend: { |
||||
icon: 'rect', |
icon: "rect", |
||||
top: '0%', |
top: "0%", |
||||
right: '5%', |
right: "5%", |
||||
data: ['实时数据'], |
data: ["实时数据"], |
||||
itemWidth:18, |
itemWidth: 18, |
||||
itemHeight: 5, |
itemHeight: 5, |
||||
itemGap: 30, |
itemGap: 30, |
||||
textStyle: { |
textStyle: { |
||||
fontSize: 12, |
fontSize: 10, |
||||
color: '#C9D2FA', |
color: "#fff", |
||||
padding: [0, 0, 0, 10], |
padding: [0, 0, 0, 10], |
||||
}, |
}, |
||||
}, |
}, |
||||
xAxis: { |
xAxis: { |
||||
type: "category", |
type: "category", |
||||
axisLine: { |
axisLine: { |
||||
lineStyle: { |
lineStyle: { |
||||
color: "#BDD8FB", |
color: "#0783FA", |
||||
fontSize: 12, |
fontSize: 10, |
||||
}, |
|
||||
}, |
}, |
||||
axisLabel: { |
}, |
||||
// interval:0,
|
axisLabel: { |
||||
color: "#BDD8FB", |
// interval:0,
|
||||
fontSize: 12, |
color: "#fff", |
||||
}, |
fontSize: 10, |
||||
axisTick: { |
}, |
||||
show: false, |
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [ |
||||
|
"00:00", |
||||
|
"01:00", |
||||
|
"02:00", |
||||
|
"03:00", |
||||
|
"04:00", |
||||
|
"05:00", |
||||
|
"06:00", |
||||
|
"07:00", |
||||
|
"08:00", |
||||
|
"09:00", |
||||
|
"10:00", |
||||
|
"11:00", |
||||
|
"12:00", |
||||
|
"13:00", |
||||
|
"14:00", |
||||
|
"15:00", |
||||
|
"16:00", |
||||
|
"17:00", |
||||
|
"18:00", |
||||
|
"19:00", |
||||
|
"20:00", |
||||
|
"21:00", |
||||
|
"22:00", |
||||
|
"23:00", |
||||
|
], |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: "value", |
||||
|
min: 0, |
||||
|
max: 40, |
||||
|
minInterval: 5, |
||||
|
splitNumber: 5, |
||||
|
nameTextStyle: { |
||||
|
fontSize: 12, |
||||
|
color: "#BDD8FB", |
||||
|
align: "center", |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: "rgba(255, 255, 255, 0.15)", |
||||
|
// type: 'dashed', // dotted 虚线
|
||||
}, |
}, |
||||
|
}, |
||||
|
splitArea: { show: false }, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
fontSize: 10, |
||||
|
fontFamily: "Bebas", |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "line", |
||||
|
// symbol: "none",
|
||||
|
showSymbol: false, |
||||
|
smooth: true, // 是否曲线
|
||||
|
name: "实时数据", // 图例对应类别
|
||||
data: [ |
data: [ |
||||
"00:00", |
12, 12, 23, 23, 30, 12, 26, 28, 31, 23, 25, 12, 18, 18, 18, 18, 23, 21, |
||||
"01:00", |
20, 20, 20, 20, 20, 22, 22, 12, 12, 12, |
||||
"02:00", |
], // 纵坐标数据
|
||||
"03:00", |
lineStyle: { |
||||
"04:00", |
color: "#0783FA", |
||||
"05:00", |
|
||||
"06:00", |
|
||||
"07:00", |
|
||||
"08:00", |
|
||||
"09:00", |
|
||||
"10:00", |
|
||||
"11:00", |
|
||||
"12:00", |
|
||||
"13:00", |
|
||||
"14:00", |
|
||||
"15:00", |
|
||||
"16:00", |
|
||||
"17:00", |
|
||||
"18:00", |
|
||||
"19:00", |
|
||||
"20:00", |
|
||||
"21:00", |
|
||||
"22:00", |
|
||||
"23:00", |
|
||||
], |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: "value", |
|
||||
min: 0, |
|
||||
max:40, |
|
||||
minInterval: 5, |
|
||||
splitNumber:5, |
|
||||
nameTextStyle: { |
|
||||
fontSize: 12, |
|
||||
color: "#BDD8FB", |
|
||||
align: "center", |
|
||||
}, |
|
||||
splitLine: { |
|
||||
lineStyle: { |
|
||||
color: "rgba(255, 255, 255, 0.15)", |
|
||||
// type: 'dashed', // dotted 虚线
|
|
||||
}, |
|
||||
}, |
}, |
||||
splitArea: { show: false }, |
areaStyle: { |
||||
axisLine: { |
// 区域颜色
|
||||
show: false, |
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
}, |
// {
|
||||
axisTick: { |
// offset: 0,
|
||||
show: false, |
// color: "#5090FF",
|
||||
}, |
// },
|
||||
axisLabel: { |
// {
|
||||
fontSize: 12, |
// offset: 1,
|
||||
fontFamily: "Bebas", |
// color: "#1057E5",
|
||||
color: "#BDD8FB", |
// },
|
||||
}, |
// ]),
|
||||
}, |
color: { |
||||
series: [ |
type: "linear", |
||||
{ |
x: 0, //右
|
||||
type: "line", |
y: 0, //下
|
||||
// symbol: "none",
|
x2: 0, //左
|
||||
showSymbol: false, |
y2: 1, //上
|
||||
smooth: true, // 是否曲线
|
colorStops: [ |
||||
name: "实时数据", // 图例对应类别
|
{ |
||||
data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
|
offset: 0.1, |
||||
lineStyle :{ |
color: "#0783FA99", // 0% 处的颜色
|
||||
color:"#0783FA" |
}, |
||||
}, |
{ |
||||
areaStyle: { |
offset: 1, |
||||
// 区域颜色
|
opacity: 0.01, |
||||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
color: "#0783FA01", // 100% 处的颜色
|
||||
// {
|
|
||||
// offset: 0,
|
|
||||
// color: "#5090FF",
|
|
||||
// },
|
|
||||
// {
|
|
||||
// offset: 1,
|
|
||||
// color: "#1057E5",
|
|
||||
// },
|
|
||||
// ]),
|
|
||||
color: { |
|
||||
type: 'linear', |
|
||||
x: 0, //右
|
|
||||
y: 0, //下
|
|
||||
x2: 0, //左
|
|
||||
y2: 1, //上
|
|
||||
colorStops: [ |
|
||||
{ |
|
||||
offset: 0.1, |
|
||||
color: '#0783FA99' // 0% 处的颜色
|
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
opacity:0.01, |
|
||||
color: '#0783FA01' // 100% 处的颜色
|
|
||||
} |
|
||||
] |
|
||||
}, |
}, |
||||
}, |
], |
||||
|
}, |
||||
}, |
}, |
||||
|
}, |
||||
], |
], |
||||
}; |
}; |
||||
|
|
||||
export default options; |
export default options; |
||||
|
|||||
@ -0,0 +1,79 @@ |
|||||
|
import * as echarts from "echarts"; |
||||
|
let options = { |
||||
|
legend: { |
||||
|
show: false, |
||||
|
}, |
||||
|
radar: [ |
||||
|
{ |
||||
|
indicator: [ |
||||
|
{ text: "Indicator1" }, |
||||
|
{ text: "Indicator2" }, |
||||
|
{ text: "Indicator3" }, |
||||
|
], |
||||
|
center: ["50%", "55%"], |
||||
|
radius: 70, |
||||
|
startAngle: 90, |
||||
|
splitNumber: 4, |
||||
|
shape: "circle", |
||||
|
axisName: { |
||||
|
formatter: "{value}", |
||||
|
color: "#428BD4", |
||||
|
}, |
||||
|
splitArea: { |
||||
|
areaStyle: { |
||||
|
color: ["#0987CD", "#0A7BB9", "#0B6A9C", "#0D5173"], |
||||
|
// opacity: 0.3,
|
||||
|
}, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "radar", |
||||
|
color: "#07A3FB", |
||||
|
emphasis: { show: false }, |
||||
|
symbol: "none", |
||||
|
lineStyle: { |
||||
|
show: false, |
||||
|
color: "none", |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
value: [1, 5, 1], |
||||
|
name: "Data B", |
||||
|
areaStyle: { |
||||
|
color: { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0.1, |
||||
|
color: "#DC6A00", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.5, |
||||
|
color: "#5D887C", // 100% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#099CCD", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
global: false, // 缺省为 false
|
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
export default options; |
||||
Loading…
Reference in new issue