vue 经常写的echarts图表模块结构抽取
将项目中经常写的结构抽取一下, 方便以后用
- 表头包含标题和右侧操作部分
- 下面为图表
<div class="chartBox"><div class="chartheadbox"><div class="chartheadleft">这是图表标题</div><div class="chartheadright"><div class="chartbtn" :class="{ active: activeIndex == 0 }" @click="handlecbClick(0)">日</div><div class="chartbtn" :class="{ active: activeIndex == 1 }" @click="handlecbClick(1)">周</div><div class="chartbtn" :class="{ active: activeIndex == 2 }" @click="handlecbClick(2)">月</div><div class="chartbtn" :class="{ active: activeIndex == 3 }" @click="handlecbClick(3)">年</div></div></div><div class="chartdom" ref="chartRef"></div>
</div>
const activeIndex = ref(0);
const chartRef = ref(null)
const handlecbClick = (index) => {activeIndex.value = index;
};
.chartheadbox {display: flex;justify-content: space-between;align-items: center;.chartheadleft {font-size: 20px;color: #000;}.chartheadright {display: flex;.chartbtn {margin-left: 10px;font-size: 14px;color: #333;background: #f3f4f6;height: 25px;border-radius: 12.5px;padding: 0 12px;line-height: 25px;cursor: pointer;&.active {background: #e7eeff;color: #2365ff;}}}
}.chartdom{width: 100%;height: calc(100% - 30px);
}
)
