style:首页
This commit is contained in:
zjc
251
src/views/home/components/top.vue
Normal file
251
src/views/home/components/top.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="top" id="top" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
let topChart = null
|
||||
let colorList = [
|
||||
'rgba(255, 38, 38, 1)',
|
||||
'rgba(255, 96, 0, 1)',
|
||||
'rgba(255, 165, 7, 1)',
|
||||
'rgba(0, 234, 255, 1)',
|
||||
'rgba(0, 132, 255, 1)',
|
||||
'#2379FF'
|
||||
]
|
||||
let colorListA = [
|
||||
'rgba(255, 38, 38, 0.1)',
|
||||
'rgba(255, 96, 0, 0.1)',
|
||||
'rgba(255, 165, 7, 0.1)',
|
||||
'rgba(0, 234, 255, 0.1)',
|
||||
'rgba(0, 132, 255, 0.1)',
|
||||
'#49B1FF'
|
||||
]
|
||||
let colorListB = [
|
||||
'rgba(249, 136, 136, 1)',
|
||||
'rgba(255, 162, 106, 1)',
|
||||
'rgba(255, 210, 130, 1)',
|
||||
'rgba(142, 255, 206, 1)',
|
||||
'rgba(165, 232, 255, 1)'
|
||||
]
|
||||
let colorListC = [
|
||||
'rgba(249, 136, 136, 0.1)',
|
||||
'rgba(255, 162, 106, 0.1)',
|
||||
'rgba(255, 210, 130, 0.1)',
|
||||
'rgba(142, 255, 206, 0.1)',
|
||||
'rgba(165, 232, 255, 0.1)'
|
||||
]
|
||||
let result = [
|
||||
{ name: '河北', value: 86 },
|
||||
{ name: '山西', value: 83 },
|
||||
{ name: '河南', value: 73 },
|
||||
{ name: '内蒙', value: 61 },
|
||||
{ name: '辽宁', value: 61 }
|
||||
]
|
||||
let option = {
|
||||
color: colorList,
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '6%',
|
||||
bottom: '-4%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
show: false
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: result.map((item) => item.name),
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
},
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 10, 0],
|
||||
inside: true,
|
||||
formatter: function (value) {
|
||||
return `{value|${value}}`
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
align: 'center',
|
||||
color: '#D3E5FF',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN'
|
||||
},
|
||||
value: {
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: result.map((item) => item.value)
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barWidth: fitChartSize(12),
|
||||
MaxSize: 0,
|
||||
showBackground: true,
|
||||
barBorderRadius: [30, 0, 0, 30],
|
||||
backgroundStyle: {
|
||||
color: 'rgba(0, 150, 255, 0.15)'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
offset: [10, -17],
|
||||
color: '#D3E5FF',
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN',
|
||||
formatter: function (params) {
|
||||
return params.data.name
|
||||
}
|
||||
},
|
||||
data: result.map((item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
barBorderRadius: [3, 0, 0, 3],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorListA[index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorList[index]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// {
|
||||
// name: '外圆',
|
||||
// type: 'scatter',
|
||||
// emphasis: {
|
||||
// scale: false
|
||||
// },
|
||||
// showSymbol: true,
|
||||
// symbol: 'circle',
|
||||
// symbolSize: 8, // 进度条白点
|
||||
// z: 2,
|
||||
// data: result.map((item, index) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// value: item.value,
|
||||
// itemStyle: {
|
||||
// color: colorListB[index],
|
||||
// borderColor: colorListC[index],
|
||||
// borderWidth: 12,
|
||||
// shadowColor: colorListC[index],
|
||||
// shadowBlur: 10,
|
||||
// opacity: 1
|
||||
// }
|
||||
// }
|
||||
// }),
|
||||
// animationDelay: 500
|
||||
// },
|
||||
// {
|
||||
// name: '外圆',
|
||||
// type: 'scatter',
|
||||
// emphasis: {
|
||||
// scale: false
|
||||
// },
|
||||
// showSymbol: true,
|
||||
// symbol: 'circle',
|
||||
// symbolSize: 3, // 进度条白点
|
||||
// z: 3,
|
||||
// data: result.map((item, index) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// value: item.value,
|
||||
// itemStyle: {
|
||||
// color: colorListB[index],
|
||||
// borderColor: colorListC[index],
|
||||
// borderWidth: 30,
|
||||
// shadowColor: colorListC[index],
|
||||
// shadowBlur: 10,
|
||||
// opacity: 1
|
||||
// }
|
||||
// }
|
||||
// }),
|
||||
// animationDelay: 500
|
||||
// }
|
||||
]
|
||||
}
|
||||
const init = () => {
|
||||
topChart = echarts.init(document.getElementById('top'))
|
||||
topChart.setOption(option)
|
||||
}
|
||||
const resize = () => {
|
||||
if (topChart) {
|
||||
topChart.dispose()
|
||||
topChart = null
|
||||
init()
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
width: 100%;
|
||||
height: vh(260);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user