若以框架学习(3),echarts结合后端数据展示,暂时完结。

前三天,参加毕业典礼,领毕业证,顿时感到空落落的失去感,没有工作,啥也没有,总感觉一辈子白活了。晚上ktv了一晚上,由于我不咋个唱歌,没心情,听哥几个唱了一晚上周杰伦,回来的时候,还下大雨,躺在床上满满的失败感。

导入echartss

npm install echarts

然后在main.js中配置

import * as echarts from 'echarts';
//导入echats
Vue.prototype.$echarts = echarts;

对了,不要一味粘贴复制,因为我用的ruoyi框架的apis发送的请求,不是axios哦,还有我data中的参数,很多都是没用过的,是我中间思考,测试中没用的变量。

自己的界面先用一个案例

<template>
  <div id="app">
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {listCar} from "@/api/shopcar/car";
import {listSchool, qryName} from "@/api/shool/school";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      carList: [],
      //测试数组
      demoList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        spuId: null,
        spuName: null,
        skuId: null,
        skuInfo: null,
        num: null,
        tenantId: null,
        tenantName: null,
        userId: null,
        username: null,
        isSelect: null,
        addPrice: null,
        price: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
  created() {
    this.getList();
  },
  //钩子函数
  mounted() {
    this.draw();
    console.log(123456)
    console.log(this.carList)
  },
  methods: {
    getList() {
      this.loading = true;
      listSchool(this.queryParams).then(response => {
        console.log(12)
        console.log(response)
        this.carList = response.rows;
        console.log(this.carList)
        this.total = response.total;
        this.loading = false;
      });
    },
    getName() {
      this.loading = true;
      qryName().then(response => {
        console.log("name")
        console.log(response)
        this.demoList = response.rows
      });
    },
    draw() {
      // 初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      console.log(this.$echarts)
      myChart.setOption( {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

调整了下代码,终于完成了前后端echars数据

因为数据太多了,有1000条,其实可以限制下不查那么多。

由于自己前端技术问题,迟迟不能完成前后端数据对照,所以很打脑壳,关于this,似乎只能在方法内部使用,全局并不能使用,所以我直接把echarts方法放在回调函数里面。

修改后的代码如下,大家可以参考下

前端当初没搞懂,后端就太简单了,返回一个map

<template>
  <div id="app">
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {listCar} from "@/api/shopcar/car";
import {listSchool, qryName, qryScore} from "@/api/shool/school";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      carList: [],
      //测试数组
      demoList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        spuId: null,
        spuName: null,
        skuId: null,
        skuInfo: null,
        num: null,
        tenantId: null,
        tenantName: null,
        userId: null,
        username: null,
        isSelect: null,
        addPrice: null,
        price: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
  created() {

  },
  //钩子函数
  mounted() {
  this.qryScore();
  },
  methods: {
    qryScore() {
      this.loading = true;
      qryScore().then(response => {
        console.log(1234)
        console.log(response)
        this.draw(response)
      });
    },
    draw(data) {
      // 初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      console.log(this.$echarts)
      myChart.setOption( {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: data.name
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: data.grade
          }
        ]
      });
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  • 10
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Echarts是一款强大的数据可视化工具,可以通过获取后端数据展示前端页面上。要实现这个功能,需要先建立前后端数据传输通道,可以通过RESTful API或者WebSocket来实现。 首先,在后端编写API接口,用于提供数据前端。可以使用Python的Flask或Django框架建立一个API服务,通过数据库查询或其他方式获取数据,并以JSON格式返回给前端。例如,可以编写一个GET请求的API接口,前端通过请求该接口获取数据。 接下来,在前端页面中使用Echarts组件来展示数据。可以使用引入EchartsJavaScript库,在页面中创建一个容器元素,并设置其大小和位置。然后,通过发送HTTP请求给后端API接口,获取数据并解析。将解析后的数据赋值给Echarts的配置项,包含数据的类型、样式、坐标轴等,然后将配置项传入Echarts实例中,并将实例渲染在页面的容器元素中。 在数据成功加载并展示在页面上后,还可以根据需要进行细节的优化和交互的设计。比如,可以添加图例、渐变色、动画效果,以及鼠标悬停时的提示信息等等,从而使得数据展示更加直观和易于理解。 总结来说,利用Echarts获取后端数据展示的过程包括建立前后端数据传输通道、编写API接口、在前端页面中使用Echarts组件展示数据。通过这一过程,我们可以将后端数据可视化展示前端页面上,使得数据更加直观和易于理解。 ### 回答2: Echarts是一个基于JavaScript数据可视化库,通过它可以实现各种形式的图表展示。要获取后端数据展示,可以按照以下步骤进行操作: 1. 前端页面准备:首先,在HTML页面中引入Echarts的库文件和相关样式文件。 2. 发送Ajax请求获取后端数据:通过使用JavaScript的Ajax技术,向后端发送请求获取数据。可以使用XMLHttpRequest对象或者jQuery的Ajax函数来实现。 3. 处理后端返回的数据:在Ajax请求的回调函数中,对获取到的后端数据进行处理。通常可以将数据转化为JSON格式,以便后续使用。 4. 数据可视化:利用Echarts的相关API,将处理后的数据进行图表展示。可以根据需求选择不同类型的图表,如折线图、柱状图、饼图等。 5. 图表配置和绘制:在展示图表之前,可以对图表进行一些配置,如设置图表的标题、坐标轴、图例等。然后,调用Echarts的绘制函数将图表显示在页面上。 6. 动态更新:如果后端数据需要实时更新,可以设置定时器或者使用WebSocket技术进行数据推送,然后通过相应的事件监听和数据更新函数来实现图表的动态更新。 综上所述,通过以上步骤,可以使用Echarts获取后端数据,并将数据以图表的形式展示前端页面中,实现数据的可视化展示。 ### 回答3: ECharts是一款优秀的用于数据可视化的JavaScript图表库,它可以用来展示后端数据使用ECharts获取后端数据展示需要以下步骤: 1. 发送数据请求:使用JavaScript中的AJAX、Fetch等技术,向后端发送数据请求,获取需要展示数据。这些数据可以是后端接口返回的JSON、XML或其他格式。 2. 解析数据:接收到后端返回的数据后,进行数据解析,将数据转换为ECharts所需的格式。ECharts支持多种数据格式,如数组、对象等。 3. 初始化图表:在HTML页面中创建一个div元素,用于展示ECharts图表。使用JavaScript代码,将图表初始化为ECharts实例,传入div元素和配置项。 4. 配置图表:在配置项中定义图表的类型、标题、轴、系列等属性,根据需要进行自定义配置。通过配置项,可以决定图表的外观和交互行为。 5. 渲染图表:将解析后的数据和配置项传入ECharts实例的setOption方法中,生成最终的图表。图表将根据数据和配置项进行渲染,呈现出来。 6. 响应式布局:根据需要,可以使用ECharts提供的响应式布局功能,使图表可以根据不同的屏幕大小自适应调整。 通过以上步骤,我们可以轻松地使用ECharts后端获取数据展示出来。ECharts提供了丰富的图表类型和灵活的配置选项,可以根据需求展示各种各样的数据可视化效果,为数据分析和决策提供有力的支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值