持续记录
用途:整理自己的一坨代码,从而提升写代码的思路与能力
开始时间:24-04-17
1,echarts图的响应式实现
(1)template部分:给echarts图提供渲染的容器
<div class="chart-body" ref="chartContainer"></div>
(2)script部分:功能的实现
import { onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
const chartContainer = ref<HTMLDivElement | null>(null)
let myChart: echarts.ECharts | null = null
var option: echarts.EChartsOption
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
// 初始化
const initChart = () => {
if (chartContainer.value) {
myChart = echarts.init(chartContainer.value)
myChart.setOption(option)
}
}
// 窗口大小变化响应函数
const handleResize = () => {
if (myChart) {
myChart.resize()
}
}
onMounted(() => {
initChart()
window.addEventListener('resize', handleResize)
})
// 销毁
onUnmounted(() => {
if (myChart) {
myChart.dispose()
}
window.removeEventListener('resize', handleResize)
})
(3)css部分 :(我的盒子大小是确定的)
.chart-body{
width:480px;
height:560px;
}
2,两栏布局+tree控件
待补充