252 lines
5.8 KiB
Vue
252 lines
5.8 KiB
Vue
<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>
|