11 changed files with 973 additions and 145 deletions
-
BINsrc/assets/images/circle-bg.png
-
313src/assets/styles/index.scss
-
32src/components/echart/barEcharts.vue
-
2src/main.js
-
162src/utils/mixins.js
-
15src/views/index.vue
-
27src/views/map/index.vue
-
1src/views/pageOne/index.vue
-
154src/views/pageThree/index.vue
-
206src/views/pageThree/module/todayCircle.vue
-
206src/views/pageThree/module/yearCircle.vue
|
After Width: 132 | Height: 131 | Size: 16 KiB |
@ -0,0 +1,162 @@ |
|||||
|
import Vue from 'vue' |
||||
|
|
||||
|
Vue.mixin({ |
||||
|
methods: { |
||||
|
// 错误
|
||||
|
$LoopShowTooltip(chart, chartOption, options) { |
||||
|
const defaultOptions = { |
||||
|
interval: 2000, |
||||
|
loopSeries: false, |
||||
|
seriesIndex: 0, |
||||
|
updateData: null |
||||
|
} |
||||
|
|
||||
|
if (!chart || !chartOption) { |
||||
|
return {} |
||||
|
} |
||||
|
|
||||
|
let dataIndex = 0 // 数据索引，初始化为-1，是为了判断是否是第一次执行
|
||||
|
let seriesIndex = 0 // 系列索引
|
||||
|
let timeTicket = 0 |
||||
|
const seriesLen = chartOption.series.length // 系列个数
|
||||
|
let dataLen = 0 // 某个系列数据个数
|
||||
|
let chartType // 系列类型
|
||||
|
let first = true |
||||
|
|
||||
|
// 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个
|
||||
|
// 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个
|
||||
|
// 要不要添加开始series索引和开始的data索引？
|
||||
|
|
||||
|
if (options) { |
||||
|
options.interval = options.interval || defaultOptions.interval |
||||
|
options.loopSeries = options.loopSeries || defaultOptions.loopSeries |
||||
|
options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex |
||||
|
options.updateData = options.updateData || defaultOptions.updateData |
||||
|
} else { |
||||
|
options = defaultOptions |
||||
|
} |
||||
|
|
||||
|
// 如果设置的seriesIndex无效，则默认为0
|
||||
|
if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) { |
||||
|
seriesIndex = 0 |
||||
|
} else { |
||||
|
seriesIndex = options.seriesIndex |
||||
|
} |
||||
|
|
||||
|
function autoShowTip() { |
||||
|
function showTip() { |
||||
|
// 判断是否更新数据
|
||||
|
if (dataIndex === 0 && !first && typeof options.updateData === 'function') { |
||||
|
options.updateData() |
||||
|
chart.setOption(chartOption) |
||||
|
} |
||||
|
|
||||
|
const series = chartOption.series |
||||
|
chartType = series[seriesIndex].type // 系列类型
|
||||
|
dataLen = series[seriesIndex].data.length // 某个系列的数据个数
|
||||
|
|
||||
|
const tipParams = { seriesIndex: seriesIndex } |
||||
|
switch (chartType) { |
||||
|
case 'map': |
||||
|
case 'pie': |
||||
|
case 'chord': |
||||
|
tipParams.name = series[seriesIndex].data[dataIndex].name |
||||
|
break |
||||
|
case 'radar': // 雷达图
|
||||
|
tipParams.seriesIndex = seriesIndex |
||||
|
tipParams.dataIndex = dataIndex |
||||
|
break |
||||
|
default: |
||||
|
tipParams.dataIndex = dataIndex |
||||
|
break |
||||
|
} |
||||
|
|
||||
|
if (chartType === 'pie' || chartType === 'radar') { |
||||
|
// 取消之前高亮的图形
|
||||
|
chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex, |
||||
|
dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1 |
||||
|
}) |
||||
|
|
||||
|
// 高亮当前图形
|
||||
|
chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: seriesIndex, |
||||
|
dataIndex: dataIndex |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 显示 tooltip
|
||||
|
tipParams.type = 'showTip' |
||||
|
chart.dispatchAction(tipParams) |
||||
|
|
||||
|
dataIndex = (dataIndex + 1) % dataLen |
||||
|
if (options.loopSeries && dataIndex === 0 && !first) { // 数据索引归0表示当前系列数据已经循环完
|
||||
|
seriesIndex = (seriesIndex + 1) % seriesLen |
||||
|
} |
||||
|
|
||||
|
first = false |
||||
|
} |
||||
|
|
||||
|
showTip() |
||||
|
timeTicket = setInterval(showTip, options.interval) |
||||
|
} |
||||
|
|
||||
|
// 关闭轮播
|
||||
|
function stopAutoShow() { |
||||
|
if (timeTicket) { |
||||
|
clearInterval(timeTicket) |
||||
|
timeTicket = 0 |
||||
|
|
||||
|
if (chartType === 'pie' || chartType === 'radar') { |
||||
|
// 取消高亮的图形
|
||||
|
chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex, |
||||
|
dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1 |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const zRender = chart.getZr() |
||||
|
|
||||
|
function zRenderMouseMove(param) { |
||||
|
if (param.event) { |
||||
|
// 阻止canvas上的鼠标移动事件冒泡
|
||||
|
param.event.cancelBubble = true |
||||
|
} |
||||
|
|
||||
|
stopAutoShow() |
||||
|
} |
||||
|
|
||||
|
// 离开echarts图时恢复自动轮播
|
||||
|
function zRenderGlobalOut() { |
||||
|
if (!timeTicket) { |
||||
|
autoShowTip() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 鼠标在echarts图上时停止轮播
|
||||
|
chart.on('mousemove', stopAutoShow) |
||||
|
zRender.on('mousemove', zRenderMouseMove) |
||||
|
zRender.on('globalout', zRenderGlobalOut) |
||||
|
|
||||
|
autoShowTip() |
||||
|
|
||||
|
return { |
||||
|
clearLoop: function() { |
||||
|
if (timeTicket) { |
||||
|
clearInterval(timeTicket) |
||||
|
timeTicket = 0 |
||||
|
} |
||||
|
|
||||
|
chart.off('mousemove', stopAutoShow) |
||||
|
zRender.off('mousemove', zRenderMouseMove) |
||||
|
zRender.off('globalout', zRenderGlobalOut) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,206 @@ |
|||||
|
<template> |
||||
|
<div style="height: calc(100% - 200px); display: flex; align-items: center; justify-content: flex-start;"> |
||||
|
<div id="todayType" style="width:400px; height: 230px" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initTodayCircle() |
||||
|
}, |
||||
|
methods: { |
||||
|
initTodayCircle() { |
||||
|
const yearAllnum = { |
||||
|
'code': 0, |
||||
|
'data': { |
||||
|
'headerLib': 588, |
||||
|
'branchLib': 60 |
||||
|
}, |
||||
|
'message': 'success' |
||||
|
} |
||||
|
if (yearAllnum.code !== 0) return |
||||
|
const optionData = [ |
||||
|
{ value: yearAllnum.data.headerLib || 0, name: '总馆' }, |
||||
|
{ value: yearAllnum.data.branchLib || 0, name: '分馆' } |
||||
|
] |
||||
|
const myChart = this.$echarts.init(document.getElementById('todayType')) |
||||
|
|
||||
|
function arrCount(arr) { |
||||
|
let count = 0 |
||||
|
arr.forEach(item => { |
||||
|
count = count + item.value |
||||
|
}) |
||||
|
return count |
||||
|
} |
||||
|
var centerImg = require('@/assets/images/circle-bg.png') |
||||
|
const option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
position: 'bottom' |
||||
|
// backgroundColor: 'rgba(74, 144, 226, 0.84)', |
||||
|
// formatter: (params) => { |
||||
|
// 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: 14, |
||||
|
color: '#EEF6FF', |
||||
|
padding: [20, 0, 20, 4] |
||||
|
}, |
||||
|
num: { |
||||
|
fontSize: 16, |
||||
|
fontWeight: 600, |
||||
|
padding: [20, 0, 20, 15], |
||||
|
color: '#4C90FF' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 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') |
||||
|
// } |
||||
|
}, |
||||
|
// 中心图片配置(关键代码) |
||||
|
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: { |
||||
|
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', |
||||
|
// 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: 14, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
color: ['#317FFF', '#31DFFF'], |
||||
|
data: optionData |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
myChart.setOption(option) |
||||
|
this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
@import "~@/assets/styles/font-some.css"; |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,206 @@ |
|||||
|
<template> |
||||
|
<div style="height: calc(100% - 200px); display: flex; align-items: center; justify-content: flex-start;"> |
||||
|
<div id="modelType" style="width:400px; height: 230px" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initYearCircle() |
||||
|
}, |
||||
|
methods: { |
||||
|
initYearCircle() { |
||||
|
const yearAllnum = { |
||||
|
'code': 0, |
||||
|
'data': { |
||||
|
'headerLib': 45585, |
||||
|
'branchLib': 15445 |
||||
|
}, |
||||
|
'message': 'success' |
||||
|
} |
||||
|
if (yearAllnum.code !== 0) return |
||||
|
const optionData = [ |
||||
|
{ value: yearAllnum.data.headerLib || 0, name: '总馆' }, |
||||
|
{ value: yearAllnum.data.branchLib || 0, name: '分馆' } |
||||
|
] |
||||
|
const myChart = this.$echarts.init(document.getElementById('modelType')) |
||||
|
|
||||
|
function arrCount(arr) { |
||||
|
let count = 0 |
||||
|
arr.forEach(item => { |
||||
|
count = count + item.value |
||||
|
}) |
||||
|
return count |
||||
|
} |
||||
|
var centerImg = require('@/assets/images/circle-bg.png') |
||||
|
const option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
position: 'bottom' |
||||
|
// backgroundColor: 'rgba(74, 144, 226, 0.84)', |
||||
|
// formatter: (params) => { |
||||
|
// 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: 14, |
||||
|
color: '#EEF6FF', |
||||
|
padding: [20, 0, 20, 4] |
||||
|
}, |
||||
|
num: { |
||||
|
fontSize: 16, |
||||
|
fontWeight: 600, |
||||
|
padding: [20, 0, 20, 15], |
||||
|
color: '#4C90FF' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 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') |
||||
|
// } |
||||
|
}, |
||||
|
// 中心图片配置(关键代码) |
||||
|
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: { |
||||
|
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', |
||||
|
// 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: 14, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
color: ['#317FFF', '#31DFFF'], |
||||
|
data: optionData |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
myChart.setOption(option) |
||||
|
this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
@import "~@/assets/styles/font-some.css"; |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue