zhangzhang
1 year ago
16 changed files with 1015 additions and 678 deletions
@ -1,148 +1,152 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#5090FF", "#01B3E4"], |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
itemStyle:{ |
|||
color:"#FFD15C", |
|||
}, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#fff', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
}, |
|||
color: "#FFD15C", |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: "rect", |
|||
top: "0%", |
|||
right: "5%", |
|||
data: ["实时数据"], |
|||
itemWidth: 18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
// itemStyle: {
|
|||
// color: "#FFD15C",
|
|||
// },
|
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: "#fff", |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#FFD15C", |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#fff", |
|||
fontSize: 10, |
|||
}, |
|||
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: [ |
|||
"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: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
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, |
|||
], // 纵坐标数据
|
|||
lineStyle: { |
|||
color: "#FFD15C", |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
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], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#FFD15C" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// 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% 处的颜色
|
|||
} |
|||
] |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// 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; |
|||
@ -1,154 +1,156 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#5090FF", "#01B3E4"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,.6)", |
|||
borderColor: "rgba(147, 235, 248, .8)", |
|||
textStyle: { |
|||
color: "#FFF", |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#C9D2FA', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
color: "#0783FA", |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
// backgroundColor: "rgba(0,0,0,.6)",
|
|||
// borderColor: "rgba(147, 235, 248, .8)",
|
|||
// textStyle: {
|
|||
// color: "#FFF",
|
|||
// },
|
|||
}, |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: "rect", |
|||
top: "0%", |
|||
right: "5%", |
|||
data: ["实时数据"], |
|||
itemWidth: 18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
textStyle: { |
|||
fontSize: 10, |
|||
color: "#fff", |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#0783FA", |
|||
fontSize: 10, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#fff", |
|||
fontSize: 10, |
|||
}, |
|||
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: [ |
|||
"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 虚线
|
|||
}, |
|||
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, |
|||
], // 纵坐标数据
|
|||
lineStyle: { |
|||
color: "#0783FA", |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
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], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#0783FA" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// 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% 处的颜色
|
|||
} |
|||
] |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// 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; |
|||
@ -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