Skip to content

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

echarts 调整

parent b6691329
Hide 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 { ...@@ -222,7 +222,7 @@ export default {
appDownLoad(){ appDownLoad(){
this.appVisible=true this.appVisible=true
this.$nextTick(()=>{ this.$nextTick(()=>{
if(this.appType.includes('andriod')){ if(this.appType.includes('android')){
let url = `http://${this.host}${baseurl}${this.androidUrl}` let url = `http://${this.host}${baseurl}${this.androidUrl}`
qrCode( this.$refs.android,url) qrCode( this.$refs.android,url)
......
src/views/index.vue
View file @ 94f66e1a
...@@ -474,14 +474,16 @@ ...@@ -474,14 +474,16 @@
show: false // 隐藏 y 轴 show: false // 隐藏 y 轴
}], }],
series: [{ 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, data: countList,
label: { label: {
color: '#fff', color: '#fff',
show: true, show: true,
position: 'top' // 数字显示在柱子上方 position: 'top' // 数字显示在柱子上方
}, },
barWidth: '10px' // barWidth: '10px'
}] }]
}; };
...@@ -492,13 +494,22 @@ ...@@ -492,13 +494,22 @@
}, },
qcczl2Init(myChart) { qcczl2Init(myChart) {
const color = ['#ee9338', '#8dfc7c', '#31e38a', "#22aaff", "#8ae0f7", "#e68642", "#e6b332", "#e6e143",
"#8784e6"]
this.$post('ksh/all/cz/radio', {}).then(res => { this.$post('ksh/all/cz/radio', {}).then(res => {
let records = res.data.records || [] 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 nameList = records.map(item => item.name)
let option = { let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -508,7 +519,6 @@ ...@@ -508,7 +519,6 @@
legend: { legend: {
align: 'left', align: 'left',
right: 0, right: 0,
// orient:"vertical",
x: 'right', //居左显示 x: 'right', //居左显示
y: 'left', //延Y轴 y: 'left', //延Y轴
textStyle: { textStyle: {
...@@ -550,14 +560,14 @@ ...@@ -550,14 +560,14 @@
show: false // 隐藏 y 轴 show: false // 隐藏 y 轴
}], }],
series: [{ 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, data: countList,
label: { label: {
color: '#fff', color: '#fff',
show: true, show: true,
position: 'top' // 数字显示在柱子上方 position: 'top' // 数字显示在柱子上方
}, },
barWidth: '10px'
}] }]
}; };
...@@ -598,7 +608,9 @@ ...@@ -598,7 +608,9 @@
// }, // },
// ], // ],
color: ['#ee6666', '#fcd74f', '#3ba272'], color: ['#ee9338', '#8dfc7c', '#31e38a', "#22aaff", "#8ae0f7", "#e68642", "#e6b332", "#e6e143",
"#8784e6"
],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
...@@ -615,7 +627,7 @@ ...@@ -615,7 +627,7 @@
series: [{ series: [{
// name: 'Access From', // name: 'Access From',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['45%', '65%'],
center: ['50%', '60%'], center: ['50%', '60%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
...@@ -633,7 +645,24 @@ ...@@ -633,7 +645,24 @@
color: '#fff' 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 @@ ...@@ -714,15 +743,39 @@
yAxis: [{ yAxis: [{
show: false // 隐藏 y 轴 show: false // 隐藏 y 轴
}], }],
series: [{
show: false // 隐藏 y 轴
}],
series: [{ series: [{
type: 'line', type: 'line',
data: countList, data: countList,
smooth: true, // 启用默认平滑效果
label: { label: {
color: '#fff', color: '#fff',
show: true, show: true,
position: 'top' // 数字显示在柱子上方 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 @@ ...@@ -743,7 +796,7 @@
let countList = records.map(item => item.count) let countList = records.map(item => item.count)
let option = { let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"], color: ["#ffc600", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -756,7 +809,7 @@ ...@@ -756,7 +809,7 @@
top: '3%', // 距离顶部的距离 top: '3%', // 距离顶部的距离
style: { style: {
text: '月统计', // 标题文本 text: '月统计', // 标题文本
fill: '#29EEF3', // 标题颜色 fill: '#ffc600', // 标题颜色
fontSize: 10, // 标题字体大小 fontSize: 10, // 标题字体大小
fontWeight: 'bold' // 标题字体加粗 fontWeight: 'bold' // 标题字体加粗
} }
...@@ -793,13 +846,13 @@ ...@@ -793,13 +846,13 @@
color: "white" color: "white"
} }
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: 'white', color: 'white',
interval: 0, // 确保所有标签都显示 interval: 0, // 确保所有标签都显示
rotate: 15, rotate: 15,
fontSize: 10, fontSize: 10,
} }
}], }],
yAxis: [{ yAxis: [{
show: false // 隐藏 y 轴 show: false // 隐藏 y 轴
...@@ -807,12 +860,33 @@ ...@@ -807,12 +860,33 @@
series: [{ series: [{
type: 'line', type: 'line',
data: countList, data: countList,
smooth: true, // 启用默认平滑效果
label: { label: {
color: '#fff', color: '#fff',
show: true, show: true,
position: 'top' // 数字显示在柱子上方 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 @@ ...@@ -824,15 +898,35 @@
}, },
ypcInit(myChart) { ypcInit(myChart) {
const color= ['#2A9D8F', // 青蓝渐变
'#E76F51', // 橙红渐变
'#264653', // 深蓝渐变
'#E9A33C', // 琥珀渐变
'#F4F2EE', // 浅灰渐变（适用于文字/背景）
'#2A5A7F', // 海洋蓝渐变
'#1bf992', // 深红渐变
'#45B7D1', // 天蓝渐变
'#9C27B0', // 紫罗兰渐变
'#F57C00'
]
this.$post('ksh/all/factory/alarm/pl', { this.$post('ksh/all/factory/alarm/pl', {
dateType: 'M' dateType: 'M'
}).then(res => { }).then(res => {
let records = res.data.records let records = res.data.records
let systemNameList = records.map(item => item.systemName) let systemNameList = records.map(item => item.systemName)
let countList = records.map(item => item.count) let countList = records.map(item => item.count)
countList=countList.map((item, index) => {
let nitem = {
value: item,
itemStyle: {
color: color[index]
}
}
return nitem
})
let option = { let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -884,6 +978,10 @@ ...@@ -884,6 +978,10 @@
}], }],
series: [{ series: [{
type: 'bar', type: 'bar',
itemStyle: {
borderRadius: [5, 5, 0, 0], // 圆角半径 [左上角, 右上角, 右下角, 左下角]
},
data: countList, data: countList,
label: { label: {
color: '#fff', color: '#fff',
...@@ -913,7 +1011,7 @@ ...@@ -913,7 +1011,7 @@
let countList = records.map(item => item.count) let countList = records.map(item => item.count)
let option = { let option = {
color: ["#15c9ff", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"], color: ["#FFE4B5", "#748b89", "#e68642", "#e6b332", "#e6e143", "#e646a6", "#8784e6"],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -963,14 +1061,35 @@ ...@@ -963,14 +1061,35 @@
show: false // 隐藏 y 轴 show: false // 隐藏 y 轴
}], }],
series: [{ series: [{
type: 'bar', type: 'line',
data: countList, data: countList,
smooth: true, // 启用默认平滑效果
label: { label: {
color: '#fff', color: '#fff',
show: true, show: true,
position: 'top' // 数字显示在柱子上方 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 @@ ...@@ -982,13 +1101,33 @@
}, },
sbbjpcInit(myChart) { sbbjpcInit(myChart) {
const color= ['#2A9D8F', // 青蓝渐变
'#E76F51', // 橙红渐变
'#264653', // 深蓝渐变
'#E9A33C', // 琥珀渐变
'#F4F2EE', // 浅灰渐变（适用于文字/背景）
'#2A5A7F', // 海洋蓝渐变
'#D32F2F', // 深红渐变
'#45B7D1', // 天蓝渐变
'#9C27B0', // 紫罗兰渐变
'#F57C00'
]
this.$post('ksh/device/alarm/pc/top10', {}).then(res => { this.$post('ksh/device/alarm/pc/top10', {}).then(res => {
let records = res.data.records let records = res.data.records
let deviceNameList = records.map(item => item.deviceName).reverse() let deviceNameList = records.map(item => item.deviceName).reverse()
let countList = records.map(item => item.count).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 = { var option = {
color: ["#36a5d8", "#15c9ff"],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -1018,7 +1157,7 @@ ...@@ -1018,7 +1157,7 @@
} }
}, },
axisLabel: { axisLabel: {
interval:0, interval: 0,
show: true, show: true,
color: 'white' color: 'white'
} }
...@@ -1052,6 +1191,9 @@ ...@@ -1052,6 +1191,9 @@
series: [{ series: [{
name: '报警频次', name: '报警频次',
type: 'bar', type: 'bar',
itemStyle: {
borderRadius: [5, 5, 5, 5], // 圆角半径 [左上角, 右上角, 右下角, 左下角]
},
stack: 'total', stack: 'total',
label: { label: {
show: true, 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