11 changed files with 973 additions and 145 deletions
-
BINsrc/assets/images/circle-bg.png
-
97src/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