<template>
<div style="padding: 10px">
<el-card>
<div class="inner">
<h4>123</h4>
<div class="solt-data">
<el-date-picker
v-model="rangeValue"
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
@change="timeChange"
/>
</div>
<div id="wander" ref="chartRef" style="width: 100%; height: 280px"></div>
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
// 这里的数据应该是定义在vue的data里边的
const patrolCharacters: any = {
one: {
text: '杨幂',
tetxvalue: null,
notetxvalue: null,
},
two: {
text: '刘亦菲',
tetxvalue: null,
notetxvalue: null,
},
three: {
text: '唐嫣',
tetxvalue: null,
notetxvalue: null,
},
four: {
text: '戚薇',
tetxvalue: null,
notetxvalue: null,
},
five: {
text: '刘诗诗',
tetxvalue: null,
notetxvalue: null,
},
six: {
text: '杨紫',
tetxvalue: null,
notetxvalue: null,
},
seven: {
text: '迪丽热巴',
tetxvalue: null,
notetxvalue: null,
},
ennter: {
text: '秦岚',
tetxvalue: null,
notetxvalue: null,
},
night: {
text: '秦海璐',
tetxvalue: null,
notetxvalue: null,
},
}
const rangeValue = ref<any>([])
const comparison = ref<any>([])
const chartRef = ref<any>(null)
const patrolCharactersT = ref<any>([])
onMounted(() => {
const today = dayjs(new Date())
const oneMonthAgo = today.subtract(1, 'month')
rangeValue.value = [oneMonthAgo.format('YYYY-MM-DD'), today.format('YYYY-MM-DD')]
const va = markRaw(echarts.init(document.getElementById('wander') as HTMLElement))
comparison.value = va
patrolCharactersT.value = patrolCharacters
window.onresize = () => {
if (comparison.value.wander) {
comparison.value.wander.resize()
}
if (comparison.value.conversion) {
comparison.value.conversion.resize()
}
}
})
//
function timeChange(val: any) {
if (val) {
wanderInit(val[0], val[1])
} else {
wanderInit('', '')
}
}
async function wanderInit(startTime: any, endTime: any) {
echartOption()
}
function echartOption() {
const ratioData = ref<any>([])
ratioData.value = [
{
notetxvalue: {
four: 0,
six: 0,
night: 0,
seven: 0,
one: 0,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
tetxvalue: {
four: 0,
six: 0,
night: 0,
seven: 0,
one: 0,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
year: '2019',
},
{
notetxvalue: {
four: 0,
six: 0,
night: 0,
seven: 0,
one: 0,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
tetxvalue: {
four: 0,
six: 0,
night: 0,
seven: 0,
one: 0,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
year: '2020',
},
{
notetxvalue: {
four: 0,
six: 3,
night: 0,
seven: 0,
one: 0,
ennter: 0,
five: 1,
two: 1,
three: 0,
},
tetxvalue: {
four: 0,
six: 0,
night: 0,
seven: 0,
one: 1,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
year: '2021',
},
{
notetxvalue: {
four: 1,
six: 4,
night: 0,
seven: 3,
one: 4,
ennter: 0,
five: 2,
two: 2,
three: 1,
},
tetxvalue: {
four: 0,
six: 8,
night: 1,
seven: 14,
one: 10,
ennter: 0,
five: 1,
two: 0,
three: 1,
},
year: '2022',
},
{
notetxvalue: {
four: 0,
six: 0,
night: 0,
seven: 0,
one: 0,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
tetxvalue: {
four: 0,
six: 1,
night: 0,
seven: 0,
one: 1,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
year: '2023',
},
{
notetxvalue: {
four: 0,
six: 0,
night: 0,
seven: 0,
one: 0,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
tetxvalue: {
four: 0,
six: 0,
night: 0,
seven: 0,
one: 1,
ennter: 0,
five: 0,
two: 0,
three: 0,
},
year: '2024',
},
]
const myChart: any = comparison.value
let xAxisList = []
xAxisList = Object.values(patrolCharactersT.value).map((v: any) => v.text)
if (!document.getElementById('wander')) return
comparison.value = markRaw(echarts.init(document.getElementById('wander') as HTMLElement))
const comparisonA: any = {
grid: {
containLabel: true,
},
options3d: {
enabled: true,
alpha: 60,
beta: 0,
},
legend: {
bottom: '0%',
},
yAxis: [
{
type: 'category',
axisLabel: {
interval: 0,
fontSize: 14,
fontFamily: 'TencentSans',
formatter: (value: any) => {
if (value && value.length > 5) {
return `${value.slice(0, 5)}...`
}
return value
},
},
axisTick: { show: false },
data: xAxisList,
},
],
xAxis: {
type: 'value',
minInterval: 1,
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow',
},
},
series: [],
}
ratioData.value.forEach((item: any) => {
window.console.log(item, 'item', item.year)
comparisonA.series.push({
name: '90后',
type: 'bar',
stack: item.year,
itemStyle: {
normal: {
color: {
type: 'linear',
colorStops: [
{
offset: 0,
color: '#9fe085',
},
{
offset: 1,
color: '#9fe085',
},
],
global: false, // 缺省为 false
},
},
},
label: {
normal: {
show: true,
position: 'top',
formatter: (params: any) => {
window.console.log(params, 'function')
if (params.value === 0) {
return ''
}
return item.year
},
},
},
data: [
item.tetxvalue.one,
item.tetxvalue.two,
item.tetxvalue.three,
item.tetxvalue.four,
item.tetxvalue.five,
item.tetxvalue.six,
item.tetxvalue.seven,
item.tetxvalue.ennter,
item.tetxvalue.night,
],
})
comparisonA.series.push({
name: '80后',
type: 'bar',
stack: item.year,
itemStyle: {
normal: {
color: {
type: 'linear',
colorStops: [
{
offset: 0,
color: '#ffde5e',
},
{
offset: 1,
color: '#ffde5e',
},
],
global: false,
},
},
},
label: {
normal: {
show: true,
position: 'top',
formatter: (params: any) => {
window.console.log(params, 'function')
if (params.value === 0) {
return ''
}
return item.year
},
},
},
data: [
item.notetxvalue.one,
item.notetxvalue.two,
item.notetxvalue.three,
item.notetxvalue.four,
item.notetxvalue.five,
item.notetxvalue.six,
item.notetxvalue.seven,
item.notetxvalue.ennter,
item.notetxvalue.night,
item.notetxvalue.three,
],
})
})
myChart.setOption(comparisonA)
}
onBeforeUnmount(() => {
if (comparison.value.wander) {
comparison.value.wander.clear() // 清空图表
comparison.value.wander.dispose() // 释放图表组件
comparison.value.wander = null
}
if (comparison.value.conversion) {
comparison.value.conversion.clear() // 清空图表
comparison.value.conversion.dispose() // 释放图表组件
comparison.value.conversion = null
}
})
</script>
<style lang="scss" scoped>
.inner {
position: relative;
width: 100%;
height: 100%;
background: var(--color-bg-2);
border-radius: 5px;
box-shadow: 3px 3px 7px var(--color-bg-1);
h4 {
padding-left: 20px;
color: var(--color-text-2);
font-size: 20px;
line-height: 50px;
border-bottom: 1px solid #e3e3e3;
}
.solt-data {
position: absolute;
top: 10px;
right: 10px;
}
}
</style>
vue3+ts 堆叠条形图
最新推荐文章于 2024-09-03 21:44:01 发布