Skip to content

P
pjnkb-vue
Commit 94f66e1a authored by 李苏's avatar 李苏 💬
Browse files
Options

echarts 调整

parent b6691329
Show whitespace changes
Inline Side-by-side
Showing with 171 additions and 29 deletions
src/layout/components/Navbar.vue
View file @ 94f66e1a
......@@ -222,7 +222,7 @@ export default {
appDownLoad(){
this.appVisible=true
this.$nextTick(()=>{
if(this.appType.includes('andriod')){
if(this.appType.includes('android')){
let url = `http://${this.host}${baseurl}${this.androidUrl}`
qrCode( this.$refs.android,url)
......
src/views/index.vue
View file @ 94f66e1a
......@@ -474,14 +474,16 @@
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
type: 'pictorialBar',
// barCategoryGap: '10%',
symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,0 C3.5,5 4.5,10 0,10 z',
data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
// barWidth: '10px'
}]
};
......@@ -492,13 +494,22 @@
},
qcczl2Init(myChart) {
const color = ['#ee9338', '#8dfc7c', '#31e38a', "#22aaff", "#8ae0f7", "#e68642", "#e6b332", "#e6e143",
"#8784e6"]
this.$post('ksh/all/cz/radio', {}).then(res => {
let records = res.data.records || []
let countList = records.map(item => item.count)
let countList = records.map((item, index) => {
let nitem = {
value: item.count,
itemStyle: {
color: color[index]
}
}
return nitem
})
let nameList = records.map(item => item.name)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -508,7 +519,6 @@
legend: {
align: 'left',
right: 0,
// orient:"vertical",
x: 'right', //居左显示
y: 'left', //延Y轴
textStyle: {
......@@ -550,14 +560,14 @@
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
type: 'pictorialBar',
symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,0 C3.5,5 4.5,10 0,10 z',
data: countList,
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
}]
};
......@@ -598,7 +608,9 @@
// },
// ],
color: ['#ee6666', '#fcd74f', '#3ba272'],
color: ['#ee9338', '#8dfc7c', '#31e38a', "#22aaff", "#8ae0f7", "#e68642", "#e6b332", "#e6e143",
"#8784e6"
],
tooltip: {
trigger: 'item'
},
......@@ -615,7 +627,7 @@
series: [{
// name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
radius: ['45%', '65%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
label: {
......@@ -633,7 +645,24 @@
color: '#fff'
}
},
data: dataList
data: dataList,
itemStyle: {
borderRadius: '50%', // 饼片圆角
borderColor: '#fff',
borderWidth: 2,
shadowBlur: 15, // 添加投影
shadowColor: 'rgba(0,0,0,0.2)'
},
emphasis: {
scale: true,
scaleSize: 15,
focus: 'self',
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0,0,0,0.4)'
}
},
}],
};
......@@ -714,15 +743,39 @@
yAxis: [{
show: false // 隐藏 y 轴
}],
series: [{
show: false // 隐藏 y 轴
}],
series: [{
type: 'line',
data: countList,
smooth: true, // 启用默认平滑效果
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
barWidth: '10px',
areaStyle: {
//折线图颜色半透明
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(41, 238, 243, 0.5)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(41, 238, 243, 0.5)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
};
......@@ -743,7 +796,7 @@
let countList = records.map(item => item.count)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
color: ["#ffc600", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -756,7 +809,7 @@
top: '3%', // 距离顶部的距离
style: {
text: '月统计', // 标题文本
fill: '#29EEF3', // 标题颜色
fill: '#ffc600', // 标题颜色
fontSize: 10, // 标题字体大小
fontWeight: 'bold' // 标题字体加粗
}
......@@ -807,12 +860,33 @@
series: [{
type: 'line',
data: countList,
smooth: true, // 启用默认平滑效果
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '10px'
barWidth: '10px',
areaStyle: {
//折线图颜色半透明
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255,198,0, 0.5)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255,198,0, 0.5)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
};
......@@ -824,15 +898,35 @@
},
ypcInit(myChart) {
const color= ['#2A9D8F', // 青蓝渐变
'#E76F51', // 橙红渐变
'#264653', // 深蓝渐变
'#E9A33C', // 琥珀渐变
'#F4F2EE', // 浅灰渐变（适用于文字/背景）
'#2A5A7F', // 海洋蓝渐变
'#1bf992', // 深红渐变
'#45B7D1', // 天蓝渐变
'#9C27B0', // 紫罗兰渐变
'#F57C00'
]
this.$post('ksh/all/factory/alarm/pl', {
dateType: 'M'
}).then(res => {
let records = res.data.records
let systemNameList = records.map(item => item.systemName)
let countList = records.map(item => item.count)
countList=countList.map((item, index) => {
let nitem = {
value: item,
itemStyle: {
color: color[index]
}
}
return nitem
})
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -884,6 +978,10 @@
}],
series: [{
type: 'bar',
itemStyle: {
borderRadius: [5, 5, 0, 0], // 圆角半径 [左上角, 右上角, 右下角, 左下角]
},
data: countList,
label: {
color: '#fff',
......@@ -913,7 +1011,7 @@
let countList = records.map(item => item.count)
let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
color: ["#FFE4B5", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -963,14 +1061,35 @@
show: false // 隐藏 y 轴
}],
series: [{
type: 'bar',
type: 'line',
data: countList,
smooth: true, // 启用默认平滑效果
label: {
color: '#fff',
show: true,
position: 'top' // 数字显示在柱子上方
},
barWidth: '15px'
barWidth: '10px',
areaStyle: {
//折线图颜色半透明
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255, 228, 181, 0.5)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255, 228, 181, 0.5)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
};
......@@ -982,13 +1101,33 @@
},
sbbjpcInit(myChart) {
const color= ['#2A9D8F', // 青蓝渐变
'#E76F51', // 橙红渐变
'#264653', // 深蓝渐变
'#E9A33C', // 琥珀渐变
'#F4F2EE', // 浅灰渐变（适用于文字/背景）
'#2A5A7F', // 海洋蓝渐变
'#D32F2F', // 深红渐变
'#45B7D1', // 天蓝渐变
'#9C27B0', // 紫罗兰渐变
'#F57C00'
]
this.$post('ksh/device/alarm/pc/top10', {}).then(res => {
let records = res.data.records
let deviceNameList = records.map(item => item.deviceName).reverse()
let countList = records.map(item => item.count).reverse()
countList = countList.map((item, index) => {
let nitem = {
value: item,
itemStyle: {
color: color[index]
}
}
return nitem
})
/* */
var option = {
color: ["#36a5d8", "#15c9ff"],
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -1018,7 +1157,7 @@
}
},
axisLabel: {
interval:0,
interval: 0,
show: true,
color: 'white'
}
......@@ -1052,6 +1191,9 @@
series: [{
name: '报警频次',
type: 'bar',
itemStyle: {
borderRadius: [5, 5, 5, 5], // 圆角半径 [左上角, 右上角, 右下角, 左下角]
},
stack: 'total',
label: {
show: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment