表格内日期是写死的 echarts图X轴也是写的固定的 不是后台获取的 现在添加了年份查询后,表格以及X轴应该对应查询哪年的时间进行变化,前端该如何修改,贴代码
<el-table
border
striped
:data="tableList"
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
textAlign: 'center'
}"
>
<el-table-column prop="type" label="类别"></el-table-column>
<el-table-column prop="Jan" label="2022年1月(万元)"></el-table-column>
<el-table-column prop="Feb" label="2022年2月(万元)"></el-table-column>
<el-table-column prop="Mar" label="2022年3月(万元)"></el-table-column>
<el-table-column prop="Apr" label="2022年4月(万元)"></el-table-column>
<el-table-column prop="May" label="2022年5月(万元)"></el-table-column>
<el-table-column prop="Jun" label="2022年6月(万元)"></el-table-column>
<el-table-column prop="Jul" label="2022年7月(万元)"></el-table-column>
<el-table-column prop="Aug" label="2022年8月(万元)"></el-table-column>
<el-table-column prop="Sep" label="2022年9月(万元)"></el-table-column>
<el-table-column
prop="Oct"
label="2022年10月(万元)"
></el-table-column>
<el-table-column
prop="Nov"
label="2022年11月(万元)"
></el-table-column>
<el-table-column
prop="Dec"
label="2022年12月(万元)"
></el-table-column>
<el-table-column prop="sum" label="合计"></el-table-column>
</el-table>
xAxis: [
{
boundaryGap: true,
data: [
'2022年1月(万元)',
'2022年2月(万元)',
'2022年3月(万元)',
'2022年4月(万元)',
'2022年5月(万元)',
'2022年6月(万元)',
'2022年7月(万元)',
'2022年8月(万元)',
'2022年9月(万元)',
'2022年10月(万元)',
'2022年11月(万元)',
'2022年12月(万元)'
],
如果你设置了一个全局的用来存储所选年份的变量的话 表格和echarts里面的代码就可以改成这样
// 在data中添加year
data(): {
return: {
year: ''
}
}
// 表格里的数据改成这样
<el-table-column prop="Jan" :label="year+'年2月(万元)'"></el-table-column>
// echarts中的数据改成这样
data = [ `${this.year}年1月(万元)`,.....]
那 x轴和表格头 需要动态 变化 。用一个数组 来控制 。 el-table-column 可以v-for 循环出来