前端图表(一)：折线图

这是我第一次做图表，希望能成功吧！ 最终还是通过浩然同志的帮忙，成功显示了echarts图表的折线图。

折线图的引用

• 引入折线图组件；

<el-card>
			<div class="title">趋势对比</div>
			<div class="line-chart">
				<LineChart :lineData="lineData" />
			</div>
		</el-card>

• el-card,是把这个小组件放在一个卡片里面；
• :lineData,用这个给组件传值

在data里面先定义折线图的名称

data(){
return {
lineData: {
				xData: [],
				legend: [],
				lineSeries: [],
			},
                        }
                        
}

在methods里面的接口获取数据

• getObjectList获取接口,接口里面有数据；

getObjectList(this.queryParams).then(res => {
console.log('getlist', res)//可以查看里面的数据
this.tableList = res.data.map(item => item.dimensionName)
this.timeList = res.data.map(item => item.useMap)

const xData = this.timeList
const legend = this.tableList
const lineSeries = res.data.map(item => {
	return {
		name: item.dimensionName,
		type: 'line',
		stack: 'Total',
		data: Object.keys(item.useMap).map(i => item.useMap[i]),
		}
		})
}
this.lineData = { xData, legend, lineSeries }