Vue 动态生成echarts 和表格数据
通过select框和日期选择条件进行搜索
initCharts() {
// 初始化echarts实例
var myChartline = this.$echarts.init(this.$refs.line)
window.onresize = function() {
myChartline.resize()
}
//随外层div的大小变化自适应
const _this = this
let erd = elementResizeDetectorMaker()
erd.listenTo(this.$refs.line, (element) => {
_this.$nextTick(() => {
let height = element.parentNode.offsetHeight
console.log(height)
this.$refs.line.style.height = height + 'px'
myChartline.resize()
})
})
// 指定图表的配置项和数据
console.log(this.data)
const legendData = this.data.map(item => item.name)
const xAxisData = this.tableColumn.filter(item => item.prop !== 'loopName').map(item =>item.label)
console.log(xAxisData)
const seriesData = []
this.data.forEach(item => {
seriesData.push({
name: item.name,
type: 'bar',
data: item.value
// barWidth: '30%'
})
})
myChartline.setOption({
legend: {
data: legendData,
// orient: 'vertical',
left: 10, // 调整左侧间距
top: 10 // 调整顶部间距
},
grid: {
left: 50, // 调整图表的左边距
right: 10, // 调整图表的右边距
top: 100, // 调整图表的上边距
bottom: 40 // 调整图表的下边距
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: params => {
let content = `<div>${params[0].axisValue}</div>`
params.forEach(item => {
content += `<div>${item.seriesName}: ${item.value}</div>`
})
return content
}
},
xAxis: {
type: 'category',
data: xAxisData,
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
name:'kWh',
axisLine: {
show: true,
lineStyle: {
color: '#999',
// type: "dashed"
}
},
axisTick: {
alignWithLabel: true
},
nametextStyle: {
borderType: 'dashed'
},
splitLine: {
lineStyle: {
type: "dashed"
}
},
axisLabel: {
color: "#333"
},
},
series: seriesData
})
}
这边是拿到echarts数据进行处理展示
<el-table :data="tableData" style="width: 100%" border :height="tableHeight">
<el-table-column
v-for="(hour, index) in tableColumn"
:key="index"
:prop="hour.prop"
:label="hour.label">
<template slot-scope="scope">
{{ scope.row[hour.prop] || '-' }}
</template>
</el-table-column>
</el-table>
这里是通过tableColumn数据进行循环加载