<template>
<div class="visual-box">
<h3 class="title">{{title}}</h3>
<div class="visual-data" :class="`visual-data${i}`"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
title: {
type: String,
default: () => '这是一个标题'
},
i: {
type: Number,
},
option: {
type: Object,
default: {
title: "2022年成交数",
option: {
backgroundColor: '#fff',//背景色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '5%',
right: '5%',
left: '8%',
bottom: '20%'
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
lineStyle: {
color: '#D1D9EB'
}
},
axisLabel: {
margin: 10,
color: '#A1A7B3',
textStyle: {
fontSize: 12
},
},
axisTick: {
show: false
}
}],
yAxis: [
{
type: "value",
name: '',
nameTextStyle: {
color: '#C1C6CF',
fontSize: 12,
align: "right",
padding:5
},
axisLabel: {
formatter:'{value}',
color: '#A1A7B3',
fontSize:12
},
axisTick: {
show: false
},
axisLine: {
show: false,
},
splitLine: {
lineStyle: {
color: '#D1D9EB',
type:'dashed'
}
}
},
],
series: [{
type: 'bar',
data: [80, 80, 97, 53, 95, 26, 72, 97, 53, 95, 26, 72],
barWidth: '15px',
itemStyle: {
color:'rgb(38,80,180)',
barBorderRadius: [2 ,2 ,0 ,0 ]
},
}]
}
},
}
},
data: () => ({
}),
mounted() {
this.visualBox1()
},
methods: {
visualBox1() {
// 获取dom节点
var chartDom = document.querySelector(".visual-box" + ' ' + ".visual-data"+this.i)
// 初始化echarts可视化图放在哪个dom节点
var myChart = echarts.init(chartDom, null, {height: 180,});
var option = this.option;
option && myChart.setOption(option);
// 让图标跟着屏幕自适应
window.addEventListener("resize", function() {
myChart.resize();
})
},
}
}
</script>