Echarts使用
折线图
首先我们在项目中安装 npm i echarts@5.1.2
,然后参考 快速上手 章节的内容
数据我们使用的是上节mock数据中的 orderData,然后组装成快速上手示例中的对应格式的数据即可,可以先打印下这个数据
<template>
......
<el-card style="height: 280px">
<!--折线图-->
<div ref="echarts1" style="height:280px;"></div>
</el-card>
</template>
<script>
import {
getData} from "@/api";
import * as echarts from "echarts";
export default {
name: "Home",
data() {
......
},
mounted() {
getData().then(({
data})=>{
const {
tableData,orderData } = data.data;
this.tableData = tableData;
// console.log(orderData)
// 基于准备好的dom,初始化echarts实例
const echarts1 = echarts.init(this.$refs.echarts1);
// x轴坐标
const xAxis = Object.keys(orderData.data[0]);