HB
/
yudao-web
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

大屏修改

master
DX 1 month ago
parent
7ba9d1d819
commit
47a10cebf7
2 changed files with 59 additions and 189 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 236
      src/views/screen/compenonts/map.vue
  2. 12
      src/views/screen/compenonts/rightwrapper.vue

236
src/views/screen/compenonts/map.vue
Unescape View File

@ -133,170 +133,7 @@ const mapOption: any = ref({
zlevel: -3
}
],
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 50,
label: {
show: true,
fontWeight: 'bold',
fontSize: 14,
fontStyle: 'italic',
formatter: () => {
return `AQI 25`
}
},
data: [
{
name: 'xxx',
value: [121.59, 41.68],
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'rgba(239, 68, 68, .5)'
},
{
offset: 0.5,
color: 'rgba(239, 68, 68, .3)'
},
{
offset: 1,
color: 'rgba(239, 68, 68, 0)'
}
]
},
// color:'#56CA00',
shadowBlur: 2,
shadowColor: 'rgba(239, 68, 68, .1)',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 0.8
},
symbolSize: 60,
label: {
fontSize: 18,
color: 'rgba(239, 68, 68, 1)'
}
},
{
name: 'xxx',
value: [121.310975, 41.5434265],
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'rgba(86, 202, 0, .5)'
},
{
offset: 0.5,
color: 'rgba(86, 202, 0, .3)'
},
{
offset: 1,
color: 'rgba(86, 202, 0, 0)'
}
]
},
// color:'#56CA00',
shadowBlur: 2,
shadowColor: 'rgba(86, 202, 0, .1)',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 0.8
},
label: {
color: 'rgba(86, 202, 0, 1)'
}
},
{
name: 'xxx',
value: [121.00383704808695, 41.5434265],
symbolSize: 100,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'rgba(22, 177, 255, .5)'
},
{
offset: 0.5,
color: 'rgba(22, 177, 255, .3)'
},
{
offset: 1,
color: 'rgba(22, 177, 255, 0)'
}
]
},
// color:'#56CA00',
shadowBlur: 2,
shadowColor: 'rgba(22, 177, 255, .1)',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 0.8
},
label: {
fontSize: 30,
color: 'rgba(22, 177, 255, 1)'
}
},
{
name: 'xxx',
value: [121.01, 41.35],
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'rgba(255, 231, 0, .5)'
},
{
offset: 0.5,
color: 'rgba(255, 231, 0, .3)'
},
{
offset: 1,
color: 'rgba(255, 231, 0, 0)'
}
]
},
// color:'#56CA00',
shadowBlur: 2,
shadowColor: 'rgba(255, 231, 0, .1)',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 0.8
},
label: {
color: 'rgba(255, 231, 0, 1)'
}
}
],
zLevel: 1
}
],
series: [],
xAxis: [],
yAxis: [],
grid: []
@ -359,15 +196,13 @@ const initMap = () => {
})
mapOption.value.grid.push({
id: idx,
//下面的宽高最终会体现为柱状图展示的宽高，这个要设置一下，如果不设置，整体的高度会很高而且展示的位置都是错乱的
width: 30,
height: 63,
//通过转换的像素值，最终展示柱状图的位置，按自己需要进行调整即可
left: coord[0] - 15,
top: coord[1] - 55,
width: 20,
height: 80,
left: coord[0] - 10,
top: coord[1] - 65,
zLevel: 0
})
//下面都是添加柱状图展示的数据
// 主体柱状图
mapOption.value.series.push({
name: `${dataItem.name}1`,
type: 'bar',
@ -377,52 +212,87 @@ const initMap = () => {
zLevel: 3,
barWidth: 6,
itemStyle: {
color: '#56ca00'
borderRadius: [3, 3, 0, 0]
},
label: {
show: true,
position: 'top',
color: '#fff'
offset: [0, 5],
color: '#fff',
fontSize: 12
},
data: [
{
value: value1,
itemStyle: {
color: 'rgba(251, 233, 71, 1)'
color: '#FBE947'
},
label: {
formatter: value1.toString()
}
},
{
value: value2,
itemStyle: {
color: 'rgba(88, 215, 100, 1)'
color: '#58D764'
},
label: {
formatter: value2.toString()
}
}
]
})
// 背景柱状图
mapOption.value.series.push({
name: `${dataItem.name}1`,
name: `${dataItem.name}2`,
type: 'bar',
coordinateSystem: 'cartesian2d',
xAxisIndex: idx,
yAxisIndex: idx,
zLevel: 2,
barWidth: 6,
barGap: '-100%',
itemStyle: {
borderRadius: [3, 3, 0, 0]
},
data: [
{
value: 100,
itemStyle: {
color: 'rgba(251, 233, 71, 0.05)'
}
},
{
value: 100,
itemStyle: {
color: 'rgba(88, 215, 100, 0.05)'
}
}
]
})
// 顶部圆形装饰
mapOption.value.series.push({
name: `${dataItem.name}3`,
type: 'pictorialBar',
coordinateSystem: 'cartesian2d',
xAxisIndex: idx,
yAxisIndex: idx,
symbolSize: [6, 3],
symbolOffset: [0, -1],
symbolSize: [6, 2],
symbolOffset: [0, 0],
symbolPosition: 'end',
symbol: 'circle',
label: {
show: false,
},
zLevel: 4,
data: [
{
value: value1,
itemStyle: {
color: 'rgba(251, 233, 71, 1)'
color: '#FBE947'
}
},
{
value: value2,
itemStyle: {
color: 'rgba(88, 215, 100, 1)'
color: '#58D764'
}
}
]

12
src/views/screen/compenonts/rightwrapper.vue
Unescape View File

@ -42,7 +42,7 @@ const row1Options = ref({
},
xAxis: {
type: 'category',
data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
data: ['十月','十一月', '十二月', '一月', '二月', '三月'],
axisTick: {
show: false
},
@ -317,8 +317,8 @@ const row3Options = ref({
{
type: 'line',
yAxisIndex: 0,
name: '执法记录',
data: [120, 70, 10, 90, 90, 20, 56, 89],
name: '执法环比',
data: [70, 20, -30, 50, 20, 10, 20, 30],
smooth: true,
symbol: 'circle',
itemStyle: {
@ -345,7 +345,7 @@ const row3Options = ref({
}
},
{
name: '任务数量',
name: '任务环比',
type: 'line',
yAxisIndex: 1,
smooth: true,
@ -419,10 +419,10 @@ const rightFirst = async () => {
// row1Options.value.xAxis.data = data.map((i) => i.name)
// row1Options.value.series[0].data = data.map((i) => i.value)
// row1Options.value.series[1].data = data.map((i) => i.taskValue)
row1Options.value.series[0].data = new Array(5).fill(1).map(i=>{
row1Options.value.series[0].data = new Array(6).fill(1).map(i=>{
return Math.floor(Math.random()*100)
})
row1Options.value.series[1].data = new Array(5).fill(1).map(i=>{
row1Options.value.series[1].data = new Array(6).fill(1).map(i=>{
return Math.floor(Math.random()*100)
})

Write Preview
Loading…
Cancel
Save