273 lines
9.2 KiB
Vue
273 lines
9.2 KiB
Vue
<template>
|
|
<!-- 装备共享排名 -->
|
|
<div class="container">
|
|
<ScreenTitle :title="`装备共享排名`" />
|
|
<div class="content" ref="echartsRef"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ScreenTitle from 'components/ScreenTitle/index.vue'
|
|
import { getDeviceShareRankingApi } from 'http/api/screen/index'
|
|
import * as echarts from 'echarts'
|
|
|
|
const getDeviceShareRankingData = async () => {
|
|
const { data: res }: any = await getDeviceShareRankingApi()
|
|
console.log('🚀 ~ getDeviceShareRankingData ~ res:', res)
|
|
chartData.value = res.map((e: any) =>
|
|
e.comName.length > 6 ? e.comName.slice(0, 6) + '...' : e.comName,
|
|
)
|
|
chartDataNew.value = res.map((e: any) => e.comName)
|
|
state.value = res.map((e: any) => e.deviceCount)
|
|
console.log('🚀 ~ getDeviceShareRankingData ~ state.value:', state.value)
|
|
}
|
|
getDeviceShareRankingData()
|
|
|
|
const chartData = ref<any>([])
|
|
const chartDataNew = ref<any>([])
|
|
const state = ref<any>([])
|
|
|
|
const echartsRef = ref(null)
|
|
const initEChart = () => {
|
|
console.log('🚀 ~ initEChart ~ state.value:', state.value)
|
|
const chart = echarts.init(echartsRef.value)
|
|
const opt = {
|
|
index: 0,
|
|
}
|
|
var data: any = state.value
|
|
var className = chartData.value
|
|
var colorArray = [
|
|
{
|
|
top: '#007ffe',
|
|
bottom: '#007ffe',
|
|
},
|
|
]
|
|
var defaultData = [100, 100, 100, 100, 100]
|
|
const option = {
|
|
grid: {
|
|
left: '0',
|
|
right: '0',
|
|
bottom: '0%',
|
|
top: '0',
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'none',
|
|
},
|
|
formatter: function (params: any, index: any) {
|
|
let companyName = ''
|
|
chartDataNew.value.forEach((e: any) => {
|
|
if (e.indexOf(params[0].name.slice(0, 6)) != -1) {
|
|
companyName = e
|
|
}
|
|
})
|
|
return `${companyName} ${params[0].value} 台`
|
|
},
|
|
},
|
|
backgroundColor: 'rgb(20,28,52)',
|
|
xAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'category',
|
|
inverse: true,
|
|
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: '#e4e6e8',
|
|
fontSize: 13,
|
|
formatter: function (value: any, index: any) {
|
|
if (index < 3) {
|
|
return '{idx' + index + '|' + (1 + index) + '} {title|' + value + '}'
|
|
} else if (opt.index !== 0 && index + opt.index < 9) {
|
|
return '{idx|0' + (1 + index + opt.index) + '} {title|' + value + '}'
|
|
} else {
|
|
return '{idx|' + (1 + index + opt.index) + '} {title|' + value + '}'
|
|
}
|
|
},
|
|
rich: {
|
|
idx0: {
|
|
color: '#fff',
|
|
backgroundColor: '#ae8136',
|
|
borderRadius: 100,
|
|
padding: [5, 8],
|
|
},
|
|
idx1: {
|
|
color: '#fff',
|
|
backgroundColor: '#35a329',
|
|
borderRadius: 100,
|
|
padding: [5, 8],
|
|
},
|
|
idx2: {
|
|
color: '#fff',
|
|
backgroundColor: '#029fd8',
|
|
borderRadius: 100,
|
|
padding: [5, 8],
|
|
},
|
|
idx: {
|
|
color: '#fff',
|
|
backgroundColor: '#046177',
|
|
borderRadius: 100,
|
|
padding: [5, 8],
|
|
},
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
data: className,
|
|
},
|
|
{
|
|
type: 'category',
|
|
inverse: true,
|
|
axisTick: 'none',
|
|
axisLine: 'none',
|
|
show: true,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#e4e6e8',
|
|
fontSize: '13',
|
|
},
|
|
formatter: function (value: any) {
|
|
return value + ' 台'
|
|
},
|
|
},
|
|
data: data,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
zlevel: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 0,
|
|
color: function (params: any) {
|
|
let num = colorArray.length
|
|
return {
|
|
type: 'linear',
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom,
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top,
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom,
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top,
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom,
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top,
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom,
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top,
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom,
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top,
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom,
|
|
},
|
|
],
|
|
}
|
|
},
|
|
},
|
|
},
|
|
barWidth: 12,
|
|
data: data,
|
|
},
|
|
{
|
|
name: '背景',
|
|
type: 'bar',
|
|
// barWidth: 12,
|
|
barGap: '-100%',
|
|
data: defaultData,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0b1330',
|
|
barBorderRadius: 100,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
}
|
|
chart.setOption(option)
|
|
}
|
|
onMounted(() => {
|
|
Promise.all([getDeviceShareRankingData()]).then(() => {
|
|
initEChart()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: url('@/assets/img/screen/bg_1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
.content {
|
|
width: 100%;
|
|
flex: 1;
|
|
|
|
.item {
|
|
width: 30%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
background-color: #072949;
|
|
}
|
|
|
|
.bg1 {
|
|
background: linear-gradient(to bottom, #05112a, #04223c, #0d3a60);
|
|
}
|
|
.bg2 {
|
|
background: linear-gradient(to bottom, #071426, #03322f, #133945);
|
|
}
|
|
.bg3 {
|
|
background: linear-gradient(to bottom, #131824, #1a2933, #203e47);
|
|
}
|
|
}
|
|
}
|
|
</style>
|