xuhuajiao
/
qy_bigScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

echarts相关表匹配

master
xuhuajiao 12 months ago
parent
8d4772b042
commit
d83609fd58
7 changed files with 714 additions and 562 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env.development
  2. 1
      src/assets/styles/index.scss
  3. 27
      src/components/echart/barEcharts.vue
  4. 84
      src/components/echart/todayCircle.vue
  5. 65
      src/components/echart/yearCircle.vue
  6. 19
      src/views/map/index.vue
  7. 2
      src/views/pageThree/index.vue

2
.env.development
View File

@ -3,7 +3,7 @@ ENV = 'development'
# 接口地址 # 接口地址
# 许镇-本地服地址 # 许镇-本地服地址
VUE_APP_BASE_API = 'http://192.168.99.67:8080'
VUE_APP_BASE_API = 'http://192.168.99.67:7070'
# VUE_APP_BASE_API = 'http://27.19.209.92:13244' # VUE_APP_BASE_API = 'http://27.19.209.92:13244'
VUE_APP_LIB_API = 'http://118.253.150.248:8099' VUE_APP_LIB_API = 'http://118.253.150.248:8099'

1
src/assets/styles/index.scss
View File

@ -7,6 +7,7 @@
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
background: url('~@/assets/images/bg2.png') no-repeat top center #02061a; background: url('~@/assets/images/bg2.png') no-repeat top center #02061a;
background-size: 100% 100%;
font-family: 'DingTalk_JinBuTi_Regular'; font-family: 'DingTalk_JinBuTi_Regular';
} }

27
src/components/echart/barEcharts.vue
View File

@ -91,6 +91,7 @@ export default {
} }
this.chart.setOption({ this.chart.setOption({
baseOption: {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -219,6 +220,32 @@ export default {
} }
} }
] ]
},
media: [
{
option: {
series: [
{
type: 'pie',
left: '-50%'
}
]
}
},
{
query: {
maxWidth: 675
},
option: {
xAxis: [{
data: date.map(dateStr => {
const parts = dateStr.split('/')
return parts.slice(1).join('/') // 只保留月份和日期部分
})
}]
}
}
]
}) })
} }

84
src/components/echart/todayCircle.vue
View File

@ -54,6 +54,7 @@ export default {
} }
var centerImg = require('@/assets/images/circle-bg.png') var centerImg = require('@/assets/images/circle-bg.png')
const option = { const option = {
baseOption: {
tooltip: { tooltip: {
show: false, show: false,
trigger: 'item', trigger: 'item',
@ -139,7 +140,6 @@ export default {
left: '-50%', left: '-50%',
radius: ['60%', '70%'], radius: ['60%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center'
@ -168,24 +168,6 @@ export default {
fontWeight: 600, fontWeight: 600,
color: '#317FFF', color: '#317FFF',
fontFamily: 'DingTalk_JinBuTi_Regular', fontFamily: 'DingTalk_JinBuTi_Regular',
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: 'red' // 0% 处的颜色
// },
// {
// offset: 1,
// color: 'yellow' // 100% 处的颜色
// }
// ],
// globalCoord: false // 缺省为 false
// },
lineHeight: 34 lineHeight: 34
}, },
b: { b: {
@ -200,6 +182,68 @@ export default {
data: optionData data: optionData
} }
] ]
},
media: [
{
query: {
maxWidth: 317
},
option: {
legend: {
right: 30,
top: 'center',
textStyle: {
rich: {
name: {
fontSize: 14
},
num: {
fontSize: 16
}
}
}
},
// 中心图片配置(关键代码)
graphic: [
{
left: '8%', // 调整图片位置
top: '26%', // 调整图片位置
z: -10,
bounding: 'raw',
rotation: 0, // 旋转
origin: [64.5, 32.5], // 中心点
scale: [1.0, 1.0], // 缩放
// 设置图片样式
style: {
image: centerImg,
width: 110,
height: 110,
opacity: 1
}
}
],
series: [
{
type: 'pie',
radius: ['50%', '55%'],
emphasis: {
label: {
rich: {
c: {
fontSize: 22,
lineHeight: 28
},
b: {
fontSize: 16
}
}
}
}
}
]
}
}
]
} }
myChart.setOption(option) myChart.setOption(option)
// // 然后可以通过定时器来旋转背景图 // // 然后可以通过定时器来旋转背景图
@ -216,7 +260,7 @@ export default {
// }) // })
// }, 1000) // }, 1000)
this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 })
this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 })
} }
} }
} }

65
src/components/echart/yearCircle.vue
View File

@ -54,6 +54,7 @@ export default {
} }
var centerImg = require('@/assets/images/circle-bg.png') var centerImg = require('@/assets/images/circle-bg.png')
const option = { const option = {
baseOption: {
tooltip: { tooltip: {
show: false, show: false,
trigger: 'item', trigger: 'item',
@ -206,9 +207,71 @@ export default {
data: optionData data: optionData
} }
] ]
},
media: [
{
query: {
maxWidth: 317
},
option: {
legend: {
right: 30,
top: 'center',
textStyle: {
rich: {
name: {
fontSize: 14
},
num: {
fontSize: 16
}
}
}
},
// 中心图片配置(关键代码)
graphic: [
{
left: '8%', // 调整图片位置
top: '26%', // 调整图片位置
z: -10,
bounding: 'raw',
rotation: 0, // 旋转
origin: [64.5, 32.5], // 中心点
scale: [1.0, 1.0], // 缩放
// 设置图片样式
style: {
image: centerImg,
width: 110,
height: 110,
opacity: 1
}
}
],
series: [
{
type: 'pie',
radius: ['50%', '55%'],
emphasis: {
label: {
rich: {
c: {
fontSize: 22,
lineHeight: 28
},
b: {
fontSize: 16
}
}
}
}
}
]
}
}
]
} }
myChart.setOption(option) myChart.setOption(option)
this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 })
this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 })
} }
} }
} }

19
src/views/map/index.vue
View File

@ -134,7 +134,7 @@ export default {
this.destroy() this.destroy()
}, },
created() { created() {
// this.getLibBookTotal()
this.getLibBookTotal()
this.getReadRanking() this.getReadRanking()
this.getLendingTotal() this.getLendingTotal()
}, },
@ -515,7 +515,7 @@ export default {
this.seriesData = series this.seriesData = series
const initOption = { const initOption = {
// {a}<br/>
baseOption: {
// 提示框 // 提示框
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -747,6 +747,21 @@ export default {
} }
], ],
series: series series: series
},
media: [
{
query: {
maxWidth: 666
},
option: {
tooltip: {
position: function(point, params, dom, rect, size) {
return [point[0] + 10, point[1] - 122]
}
}
}
}
]
} }
setTimeout(() => { setTimeout(() => {
this.myChart.setOption(initOption) this.myChart.setOption(initOption)

2
src/views/pageThree/index.vue
View File

@ -383,6 +383,8 @@ export default {
this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal) this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal)
// // out 借出 // // out 借出
this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal) this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal)
console.log(this.chartWeeklyData.date)
} else { } else {
this.chartWeeklyData = { this.chartWeeklyData = {
date: [], date: [],

Write Preview
Loading…
Cancel
Save