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. 245
      src/components/echart/barEcharts.vue
  4. 304
      src/components/echart/todayCircle.vue
  5. 333
      src/components/echart/yearCircle.vue
  6. 389
      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';
} }

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

@ -91,131 +91,158 @@ export default {
} }
this.chart.setOption({ this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: { // 图例
right: 20,
top: 10,
icon: 'rect',
itemHeight: 6,
itemWidth: 11,
textStyle: {
color: '#fff',
fontSize: 18
baseOption: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}, },
data: [
{
name: '借出',
icon: 'rect',
textStyle: {
color: '#41A3FF',
fontFamily: 'DingTalk_JinBuTi_Regular'
legend: { // 图例
right: 20,
top: 10,
icon: 'rect',
itemHeight: 6,
itemWidth: 11,
textStyle: {
color: '#fff',
fontSize: 18
},
data: [
{
name: '借出',
icon: 'rect',
textStyle: {
color: '#41A3FF',
fontFamily: 'DingTalk_JinBuTi_Regular'
}
},
{
name: '归还',
icon: 'rect',
textStyle: {
color: '#FFD050',
fontFamily: 'DingTalk_JinBuTi_Regular'
}
}
]
},
grid: {
left: '3%',
right: '3%',
bottom: '8%',
top: '17%',
containLabel: true
},
xAxis: [{
type: 'category',
axisTick: { show: false },
data: date,
axisLine: { // 轴线的颜色以及宽度
lineStyle: {
color: '#113D72'
} }
}, },
{
name: '归还',
icon: 'rect',
axisLabel: { // x轴文字的配置
show: true,
interval: 0,
textStyle: { textStyle: {
color: '#FFD050',
color: '#79B8FF',
fontSize: 16,
fontFamily: 'DingTalk_JinBuTi_Regular' fontFamily: 'DingTalk_JinBuTi_Regular'
} }
},
splitLine: { // 分割线配置
lineStyle: {
color: '#113D72',
type: 'solid'
}
} }
]
},
grid: {
left: '3%',
right: '3%',
bottom: '8%',
top: '17%',
containLabel: true
},
xAxis: [{
type: 'category',
axisTick: { show: false },
data: date,
axisLine: { // 轴线的颜色以及宽度
lineStyle: {
color: '#113D72'
}
},
axisLabel: { // x轴文字的配置
show: true,
interval: 0,
textStyle: {
color: '#79B8FF',
fontSize: 16,
fontFamily: 'DingTalk_JinBuTi_Regular'
}
},
splitLine: { // 分割线配置
lineStyle: {
color: '#113D72',
type: 'solid'
}
}
}],
yAxis: [{
min: 0,
max: function(value) {
return Math.ceil(value.max + (value.max - value.min) * 0.2)
},
minInterval: 1,
type: 'value',
axisLine: { // 轴线的颜色以及宽度
show: false
},
axisLabel: { // 轴文字的配置
show: true,
interval: 'auto',
formatter: function(value) {
// 使用formatter保证即使在缩放时也只显示整数
return Math.round(value)
}],
yAxis: [{
min: 0,
max: function(value) {
return Math.ceil(value.max + (value.max - value.min) * 0.2)
}, },
textStyle: {
color: '#79B8FF',
fontSize: 16,
fontFamily: 'DingTalk_JinBuTi_Regular'
minInterval: 1,
type: 'value',
axisLine: { // 轴线的颜色以及宽度
show: false
},
axisLabel: { // 轴文字的配置
show: true,
interval: 'auto',
formatter: function(value) {
// 使用formatter保证即使在缩放时也只显示整数
return Math.round(value)
},
textStyle: {
color: '#79B8FF',
fontSize: 16,
fontFamily: 'DingTalk_JinBuTi_Regular'
}
},
axisTick: { // 刻度线隐藏
show: false
},
splitLine: { // 分割线配置
lineStyle: {
color: 'rgba(66, 139, 221, 0.2)',
type: 'solid'
}
} }
},
axisTick: { // 刻度线隐藏
show: false
},
splitLine: { // 分割线配置
lineStyle: {
color: 'rgba(66, 139, 221, 0.2)',
type: 'solid'
}],
series: [
{
name: '借出',
type: 'bar',
barWidth: 14, // 柱图宽度
barGap: '30%',
emphasis: {
focus: 'series'
},
data: outchartWeeklyData,
itemStyle: {
color: '#41A3FF'
}
},
{
name: '归还',
type: 'bar',
barWidth: 14, // 柱图宽度
emphasis: {
focus: 'series'
},
data: inchartWeeklyData,
itemStyle: {
color: '#FFD14F'
}
} }
}
}],
series: [
]
},
media: [
{ {
name: '借出',
type: 'bar',
barWidth: 14, // 柱图宽度
barGap: '30%',
emphasis: {
focus: 'series'
},
data: outchartWeeklyData,
itemStyle: {
color: '#41A3FF'
option: {
series: [
{
type: 'pie',
left: '-50%'
}
]
} }
}, },
{ {
name: '归还',
type: 'bar',
barWidth: 14, // 柱图宽度
emphasis: {
focus: 'series'
query: {
maxWidth: 675
}, },
data: inchartWeeklyData,
itemStyle: {
color: '#FFD14F'
option: {
xAxis: [{
data: date.map(dateStr => {
const parts = dateStr.split('/')
return parts.slice(1).join('/') // 只保留月份和日期部分
})
}]
} }
} }
] ]

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

@ -54,150 +54,194 @@ export default {
} }
var centerImg = require('@/assets/images/circle-bg.png') var centerImg = require('@/assets/images/circle-bg.png')
const option = { const option = {
tooltip: {
show: false,
trigger: 'item',
position: 'bottom',
textStyle: {
color: '#EEF6FF',
fontSize: '18'
}
baseOption: {
tooltip: {
show: false,
trigger: 'item',
position: 'bottom',
textStyle: {
color: '#EEF6FF',
fontSize: '18'
}
// backgroundColor: 'rgba(74, 144, 226, 0.84)', // backgroundColor: 'rgba(74, 144, 226, 0.84)',
// formatter: (params) => { // formatter: (params) => {
// return `<div>${params.seriesName} <br> ${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)</div>` // return `<div>${params.seriesName} <br> ${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)</div>`
// } // }
},
legend: {
orient: 'vertical',
right: 70,
top: 55,
// textStyle: {
// color: '#EEF6FF',
// padding: [20, 0, 18, 4],
// fontSize: '14'
// },
itemWidth: 10,
itemHeight: 10,
icon: 'circle',
selectedMode: false,
data: ['总馆', '分馆'],
formatter: (name) => {
},
legend: {
orient: 'vertical',
right: 70,
top: 55,
// textStyle: {
// color: '#EEF6FF',
// padding: [20, 0, 18, 4],
// fontSize: '14'
// },
itemWidth: 10,
itemHeight: 10,
icon: 'circle',
selectedMode: false,
data: ['总馆', '分馆'],
formatter: (name) => {
// `${name} ${((flag.value / count).toFixed(2)) * 100 + '%'}` // `${name} ${((flag.value / count).toFixed(2)) * 100 + '%'}`
const count = arrCount(optionData)
if (optionData) {
const flag = optionData?.find(item => name === item.name)
if (flag) {
const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%'
return [`{name|${name}}`, `{num|${percentage}}`]
const count = arrCount(optionData)
if (optionData) {
const flag = optionData?.find(item => name === item.name)
if (flag) {
const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%'
return [`{name|${name}}`, `{num|${percentage}}`]
}
}
return name
},
textStyle: {
rich: {
name: {
fontSize: 18,
color: '#EEF6FF',
padding: [20, 0, 20, 4],
fontFamily: 'DingTalk_JinBuTi_Regular'
},
num: {
fontSize: 20,
fontWeight: 600,
padding: [20, 0, 20, 15],
color: '#4C90FF',
fontFamily: 'DingTalk_JinBuTi_Regular'
}
} }
} }
return name
}, },
textStyle: {
rich: {
name: {
fontSize: 18,
color: '#EEF6FF',
padding: [20, 0, 20, 4],
fontFamily: 'DingTalk_JinBuTi_Regular'
},
num: {
fontSize: 20,
fontWeight: 600,
padding: [20, 0, 20, 15],
color: '#4C90FF',
fontFamily: 'DingTalk_JinBuTi_Regular'
// 中心图片配置(关键代码)
graphic: [
{
type: 'image',
id: 'logo',
left: '8.5%', // 调整图片位置
top: '22%', // 调整图片位置
z: -10,
bounding: 'raw',
rotation: 0, // 旋转
origin: [64.5, 32.5], // 中心点
scale: [1.0, 1.0], // 缩放
// 设置图片样式
style: {
image: centerImg,
width: 132,
height: 131,
opacity: 1
} }
} }
}
},
// 中心图片配置(关键代码)
graphic: [
{
type: 'image',
id: 'logo',
left: '8.5%', // 调整图片位置
top: '22%', // 调整图片位置
z: -10,
bounding: 'raw',
rotation: 0, // 旋转
origin: [64.5, 32.5], // 中心点
scale: [1.0, 1.0], // 缩放
// 设置图片样式
style: {
image: centerImg,
width: 132,
height: 131,
opacity: 1
}
}
],
series: [
{
name: '今日累计借阅',
type: 'pie',
left: '-50%',
radius: ['60%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: true
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(16,16,21,0.4)'
},
emphasis: {
],
series: [
{
name: '今日累计借阅',
type: 'pie',
left: '-50%',
radius: ['60%', '70%'],
avoidLabelOverlap: false,
label: { label: {
show: true,
// 自定义文字显示，函数默认params接受当前指向所有属性
formatter: function(params) {
const { value, name } = params
return [
`{c| ${value}}`,
`{b| ${name}}`
].join('\n') // 换行
},
rich: {
c: {
fontSize: 24,
fontWeight: 600,
color: '#317FFF',
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
show: false,
position: 'center'
},
labelLine: {
show: true
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(16,16,21,0.4)'
},
emphasis: {
label: {
show: true,
// 自定义文字显示，函数默认params接受当前指向所有属性
formatter: function(params) {
const { value, name } = params
return [
`{c| ${value}}`,
`{b| ${name}}`
].join('\n') // 换行
}, },
b: {
fontSize: 18,
color: '#fff',
fontFamily: 'DingTalk_JinBuTi_Regular'
rich: {
c: {
fontSize: 24,
fontWeight: 600,
color: '#317FFF',
fontFamily: 'DingTalk_JinBuTi_Regular',
lineHeight: 34
},
b: {
fontSize: 18,
color: '#fff',
fontFamily: 'DingTalk_JinBuTi_Regular'
}
} }
} }
}
},
color: ['#317FFF', '#31DFFF'],
data: optionData
}
]
},
media: [
{
query: {
maxWidth: 317
}, },
color: ['#317FFF', '#31DFFF'],
data: optionData
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
}
}
}
}
}
]
}
} }
] ]
} }
@ -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 })
} }
} }
} }

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

@ -54,161 +54,224 @@ export default {
} }
var centerImg = require('@/assets/images/circle-bg.png') var centerImg = require('@/assets/images/circle-bg.png')
const option = { const option = {
tooltip: {
show: false,
trigger: 'item',
position: 'bottom',
textStyle: {
color: '#EEF6FF',
fontSize: '18'
}
baseOption: {
tooltip: {
show: false,
trigger: 'item',
position: 'bottom',
textStyle: {
color: '#EEF6FF',
fontSize: '18'
}
// backgroundColor: 'rgba(74, 144, 226, 0.84)', // backgroundColor: 'rgba(74, 144, 226, 0.84)',
// formatter: (params) => { // formatter: (params) => {
// return `<div>${params.seriesName} <br> ${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)</div>` // return `<div>${params.seriesName} <br> ${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)</div>`
// } // }
},
legend: {
orient: 'vertical',
right: 70,
top: 55,
// textStyle: {
// color: '#EEF6FF',
// padding: [20, 0, 18, 4],
// fontSize: '14'
// },
itemWidth: 10,
itemHeight: 10,
icon: 'circle',
selectedMode: false,
data: ['总馆', '分馆'],
formatter: (name) => {
// `${name} ${((flag.value / count).toFixed(2)) * 100 + '%'}`
const count = arrCount(optionData)
if (optionData) {
const flag = optionData?.find(item => name === item.name)
if (flag) return [`{name|${name}}`, `{num|${((flag.value / count).toFixed(2)) * 100 + '%'}}`]
} else return name
}, },
textStyle: {
rich: {
name: {
fontSize: 18,
color: '#EEF6FF',
fontFamily: 'DingTalk_JinBuTi_Regular',
padding: [20, 0, 20, 4]
},
num: {
fontSize: 20,
fontWeight: 600,
padding: [20, 0, 20, 15],
color: '#4C90FF',
fontFamily: 'DingTalk_JinBuTi_Regular'
legend: {
orient: 'vertical',
right: 70,
top: 55,
// textStyle: {
// color: '#EEF6FF',
// padding: [20, 0, 18, 4],
// fontSize: '14'
// },
itemWidth: 10,
itemHeight: 10,
icon: 'circle',
selectedMode: false,
data: ['总馆', '分馆'],
formatter: (name) => {
// `${name} ${((flag.value / count).toFixed(2)) * 100 + '%'}`
const count = arrCount(optionData)
if (optionData) {
const flag = optionData?.find(item => name === item.name)
if (flag) return [`{name|${name}}`, `{num|${((flag.value / count).toFixed(2)) * 100 + '%'}}`]
} else return name
},
textStyle: {
rich: {
name: {
fontSize: 18,
color: '#EEF6FF',
fontFamily: 'DingTalk_JinBuTi_Regular',
padding: [20, 0, 20, 4]
},
num: {
fontSize: 20,
fontWeight: 600,
padding: [20, 0, 20, 15],
color: '#4C90FF',
fontFamily: 'DingTalk_JinBuTi_Regular'
}
} }
} }
}
// formatter: function(name) {
// let tarValue
// const count = arrCount(optionData)
// for (let i = 0; i < optionData.length; i++) {
// if (data[i].name === name) {
// tarValue = data[i].value
// }
// }
// formatter: function(name) {
// let tarValue
// const count = arrCount(optionData)
// for (let i = 0; i < optionData.length; i++) {
// if (data[i].name === name) {
// tarValue = data[i].value
// }
// }
// return [`{name|${name}}`, `{num|${((tarValue / count).toFixed(2)) * 100 + '%'}}`].join('\n') // return [`{name|${name}}`, `{num|${((tarValue / count).toFixed(2)) * 100 + '%'}}`].join('\n')
// } // }
},
// 中心图片配置(关键代码)
graphic: [
{
type: 'image',
id: 'logo',
left: '8.5%', // 调整图片位置
top: '22%', // 调整图片位置
z: -10,
bounding: 'raw',
rotation: 0, // 旋转
origin: [64.5, 32.5], // 中心点
scale: [1.0, 1.0], // 缩放
// 设置图片样式
style: {
image: centerImg,
width: 132,
height: 131,
opacity: 1
},
// 中心图片配置(关键代码)
graphic: [
{
type: 'image',
id: 'logo',
left: '8.5%', // 调整图片位置
top: '22%', // 调整图片位置
z: -10,
bounding: 'raw',
rotation: 0, // 旋转
origin: [64.5, 32.5], // 中心点
scale: [1.0, 1.0], // 缩放
// 设置图片样式
style: {
image: centerImg,
width: 132,
height: 131,
opacity: 1
}
} }
}
],
series: [
{
name: '本年累计借阅',
type: 'pie',
left: '-50%',
radius: ['60%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: true
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(16,16,21,0.4)'
},
emphasis: {
],
series: [
{
name: '本年累计借阅',
type: 'pie',
left: '-50%',
radius: ['60%', '70%'],
avoidLabelOverlap: false,
label: { label: {
show: true,
// 自定义文字显示，函数默认params接受当前指向所有属性
formatter: function(params) {
const { value, name } = params
return [
`{c| ${value}}`,
`{b| ${name}}`
].join('\n') // 换行
},
rich: {
c: {
fontSize: 24,
fontWeight: 600,
color: '#317FFF',
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
show: false,
position: 'center'
},
labelLine: {
show: true
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(16,16,21,0.4)'
},
emphasis: {
label: {
show: true,
// 自定义文字显示，函数默认params接受当前指向所有属性
formatter: function(params) {
const { value, name } = params
return [
`{c| ${value}}`,
`{b| ${name}}`
].join('\n') // 换行
}, },
b: {
fontSize: 18,
color: '#fff',
fontFamily: 'DingTalk_JinBuTi_Regular'
rich: {
c: {
fontSize: 24,
fontWeight: 600,
color: '#317FFF',
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
},
b: {
fontSize: 18,
color: '#fff',
fontFamily: 'DingTalk_JinBuTi_Regular'
}
} }
} }
}
},
color: ['#317FFF', '#31DFFF'],
data: optionData
}
]
},
media: [
{
query: {
maxWidth: 317
}, },
color: ['#317FFF', '#31DFFF'],
data: optionData
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 })
} }
} }
} }

389
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,71 +515,53 @@ export default {
this.seriesData = series this.seriesData = series
const initOption = { const initOption = {
// {a}<br/>
// 提示框
tooltip: {
trigger: 'item',
triggerOn: 'click',
showContent: true, // 是否显示提示框浮层
alwaysShowContent: true, // 是否一直显示提示框内容
// hideDelay: 100, // 浮层隐藏的延迟
enterable: 'mousemove|click',
padding: [0, 0, 0, 0],
backgroundColor: null,
position: function(point, params, dom, rect, size) {
return [point[0] + 14, point[1] - 164]
},
formatter: (params, ticket, callback) => {
if (params.seriesType === 'effectScatter') {
const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : ''
return `<div class='tooltip-main' >
baseOption: {
// 提示框
tooltip: {
trigger: 'item',
triggerOn: 'click',
showContent: true, // 是否显示提示框浮层
alwaysShowContent: true, // 是否一直显示提示框内容
// hideDelay: 100, // 浮层隐藏的延迟
enterable: 'mousemove|click',
padding: [0, 0, 0, 0],
backgroundColor: null,
position: function(point, params, dom, rect, size) {
return [point[0] + 14, point[1] - 164]
},
formatter: (params, ticket, callback) => {
if (params.seriesType === 'effectScatter') {
const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : ''
return `<div class='tooltip-main' >
<div class='tooltip-line'></div> <div class='tooltip-line'></div>
<div class='tooltip-content'> <div class='tooltip-content'>
<div class='title'>${params.data.name}</div> <div class='title'>${params.data.name}</div>
${addressLine} ${addressLine}
</div> </div>
</div>` </div>`
} else if (params.seriesType === 'lines') {
return (
params.data.fromName +
} else if (params.seriesType === 'lines') {
return (
params.data.fromName +
'>' + '>' +
params.data.toName + params.data.toName +
'<br />' + '<br />' +
params.data.value params.data.value
)
} else {
return params.name
)
} else {
return params.name
}
} }
}
},
// 设置geo坐标系
geo: [
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '6%', // 距离顶部的位置，每层向下一个百分比
left: '11%',
roam: false, // 是否开启平游或缩放
z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
itemStyle: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0,0,0,.1)'
}, {
offset: 0.8, color: 'rgba(59,143,248,.6)'
}],
global: false
},
borderColor: '#9ffcff',
borderWidth: 1
},
emphasis: {
},
// 设置geo坐标系
geo: [
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '6%', // 距离顶部的位置，每层向下一个百分比
left: '11%',
roam: false, // 是否开启平游或缩放
z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
itemStyle: { itemStyle: {
areaColor: { areaColor: {
type: 'linear', type: 'linear',
@ -593,160 +575,193 @@ export default {
offset: 0.8, color: 'rgba(59,143,248,.6)' offset: 0.8, color: 'rgba(59,143,248,.6)'
}], }],
global: false global: false
} // 鼠标移上去时区域的颜色
}
},
label: {
},
borderColor: '#9ffcff',
borderWidth: 1
},
emphasis: { emphasis: {
show: false,
color: '#fff'
itemStyle: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0,0,0,.1)'
}, {
offset: 0.8, color: 'rgba(59,143,248,.6)'
}],
global: false
} // 鼠标移上去时区域的颜色
}
},
label: {
emphasis: {
show: false,
color: '#fff'
}
},
tooltip: {
show: true
} }
}, },
tooltip: {
show: true
}
},
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '6%', // 距离顶部的位置，每层向下一个百分比
left: '11%',
roam: false, // 是否开启平游或缩放
z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
itemStyle: {
areaColor: {
type: 'pattern',
image: mapImg,
repeat: 'repeat'
}, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
borderColor: '#9ffcff',
borderWidth: 3,
shadowColor: '#4cd4eb',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
emphasis: { // 地图悬停高亮样式
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '6%', // 距离顶部的位置，每层向下一个百分比
left: '11%',
roam: false, // 是否开启平游或缩放
z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
itemStyle: {
areaColor: { areaColor: {
type: 'pattern', type: 'pattern',
image: mapImg, image: mapImg,
repeat: 'repeat' repeat: 'repeat'
}, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
borderColor: '#9ffcff',
borderWidth: 3,
shadowColor: '#4cd4eb',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
emphasis: { // 地图悬停高亮样式
areaColor: {
type: 'pattern',
image: mapImg,
repeat: 'repeat'
}
} }
}
},
emphasis: {
disabled: true,
areaColor: '#01215c'
},
label: {
},
emphasis: { emphasis: {
show: false,
color: '#fff'
disabled: true,
areaColor: '#01215c'
},
label: {
emphasis: {
show: false,
color: '#fff'
}
},
tooltip: {
show: false
} }
}, },
tooltip: {
show: false
}
},
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '7%', // 根据自己需要来设置
left: '10%',
roam: false, // 是否开启平游或缩放
z: 4, // 变小，也就是被压在下面
itemStyle: {
areaColor: '#05498f', // 记得改颜色
borderColor: '#0296cf',
borderWidth: 2,
shadowColor: '#0296cf',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
emphasis: { // 地图悬停高亮样式
disabled: true,
areaColor: '#05498f'
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '7%', // 根据自己需要来设置
left: '10%',
roam: false, // 是否开启平游或缩放
z: 4, // 变小，也就是被压在下面
itemStyle: {
areaColor: '#05498f', // 记得改颜色
borderColor: '#0296cf',
borderWidth: 2,
shadowColor: '#0296cf',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
emphasis: { // 地图悬停高亮样式
disabled: true,
areaColor: '#05498f'
}
},
tooltip: {
show: false
} }
}, },
tooltip: {
show: false
}
},
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '9%', // 根据自己需要来设置
left: '9%',
roam: false,
z: 3, // 变小，也就是被压在下面
itemStyle: {
areaColor: 'rgba(3,106,183,.5)', // 记得改颜色
borderColor: '#025792',
borderWidth: 2,
shadowColor: '#025792',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
emphasis: { // 地图悬停高亮样式
areaColor: 'rgba(3,106,183,.5)'
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '9%', // 根据自己需要来设置
left: '9%',
roam: false,
z: 3, // 变小，也就是被压在下面
itemStyle: {
areaColor: 'rgba(3,106,183,.5)', // 记得改颜色
borderColor: '#025792',
borderWidth: 2,
shadowColor: '#025792',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
emphasis: { // 地图悬停高亮样式
areaColor: 'rgba(3,106,183,.5)'
}
},
tooltip: {
show: false
} }
}, },
tooltip: {
show: false
}
},
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '11%', // 根据自己需要来设置
left: '8%',
roam: false,
z: 2, // 变小，也就是被压在下面
itemStyle: {
areaColor: 'rgba(3,106,183,.2)', // 记得改颜色
borderColor: '#195175',
borderWidth: 1,
shadowColor: '#0f4c74',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
emphasis: { // 地图悬停高亮样式
areaColor: 'rgba(3,106,183,.2)'
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '11%', // 根据自己需要来设置
left: '8%',
roam: false,
z: 2, // 变小，也就是被压在下面
itemStyle: {
areaColor: 'rgba(3,106,183,.2)', // 记得改颜色
borderColor: '#195175',
borderWidth: 1,
shadowColor: '#0f4c74',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
emphasis: { // 地图悬停高亮样式
areaColor: 'rgba(3,106,183,.2)'
}
},
tooltip: {
show: false
} }
}, },
tooltip: {
show: false
{
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '12%', // 根据自己需要来设置
left: '10%',
roam: false,
z: 1, // 变小，也就是被压在下面
itemStyle: {
areaColor: 'rgba(0,0,0,.6)', // 记得改颜色
borderColor: 'rgba(0,0,0,.6)',
borderWidth: 2,
shadowColor: 'rgba(0,0,0,.6)',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
emphasis: { // 地图悬停高亮样式
areaColor: 'rgba(0,0,0,.6)'
}
},
tooltip: {
show: false
}
} }
},
],
series: series
},
media: [
{ {
map: 'qiyang',
aspectScale: 1,
zoom: 1.1,
top: '12%', // 根据自己需要来设置
left: '10%',
roam: false,
z: 1, // 变小，也就是被压在下面
itemStyle: {
areaColor: 'rgba(0,0,0,.6)', // 记得改颜色
borderColor: 'rgba(0,0,0,.6)',
borderWidth: 2,
shadowColor: 'rgba(0,0,0,.6)',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
emphasis: { // 地图悬停高亮样式
areaColor: 'rgba(0,0,0,.6)'
}
query: {
maxWidth: 666
}, },
tooltip: {
show: false
option: {
tooltip: {
position: function(point, params, dom, rect, size) {
return [point[0] + 10, point[1] - 122]
}
}
} }
} }
],
series: series
]
} }
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