echarts表格的折线图

1 在项目中下载 echarts

安装

// 安装指定版本的 echarts 
npm i echarts@5.1.2

卸载

npm uninstall echarts

2 在要进行使用echarts的页面进行引入

import * as echarts from 'echarts'

3 进行代码的编写

3.1 js 部分

mounted() {
    // 左侧的表格数据处理
    getData().then(({ data }) => {
      // 此时通过获取到data里面的数据 通过es6的方式进行解构
      const { tableData } = data.data;
      // 将当前动态的tableData 添加到原本为空的tableData里面
      this.tableData = tableData;
      // console.log(tableData);

      // 右侧的折线图进行处理

      // 1. 基于准备好的dom 初始化 echarts 实例
      const echarts1 = echarts.init(this.$refs.echarts1);
      // 2 对数据进行处理  指定图表的配置项和数据
      const echOptions = {};

      // 2.1 x轴的数据 对应数据 orderData 获取到对象里面的key
      const { orderData } = data.data;
      // es6 里面的方法 接收的参数为对象类型 返回的类型是对象里面的索引
      const xAxis = Object.keys(orderData.data[0]);
      const xAxisData = {
        data: xAxis,
      };
      // console.log(xAxis);
      // 将此时获取到的x 轴数据进行赋值
      echOptions.xAxis = xAxisData;

      // y 轴
      echOptions.yAxis = {};
      // 2.2 图例
      echOptions.legend = xAxisData;

      // 3 需要进行渲染的数据
      echOptions.series = [];
      // 根据得到的名称 也就是索引进行遍历 然后将得到的结果 放到数组里面
      xAxis.forEach((key) => {
        console.log(key);
        echOptions.series.push({
          name: key,
          data: orderData.data.map((item) => item[key]),
          type: "line",
        });
      });
      console.log(echOptions);
      // 使用刚指定的配置项和数据显示图表。
      echarts1.setOption(echOptions);
    });
  },
};

3.2 html 部分

<el-card style="height: 280px; margin-top: 20px">
        <!-- 折线图 -->
        <!-- ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例 -->
        <div ref="echarts1" style="height: 280px"></div>
      </el-card>