vue3的echarts从后端获取数据,用于绘制图表

场景需求:后端采用flask通过pymysql从数据库获取数据,并返回给前端。前端vue3利用axios获取数据并运用到echarts绘制图表。

第一步,vue中引入echarts

首先vue下载echarts

npm install echarts

然后在main.js文件写如下代码

html 复制代码
import {createApp} from 'vue'
import App from './App.vue'
import router from "@/router/index.js"  // 导入路由
import "lib-flexible/flexible"   //导入响应式布局文件,阿里开发的flexible.js
import $ from "jquery"  //导入jQuery
import * as echarts from "echarts"

// 注册路由
const app = createApp(App)
app.use(router)
app.mount("#app")

// 图表处理
app.config.globalProperties.$echarts = echarts

主要是引入echarts,并进行配置

第二步,在任意要使用echarts的xxx.vue组件中写如下代码

html 复制代码
<script>
import axios from "axios"
import {defineComponent, toRaw} from 'vue'

export default defineComponent({
  data() {
    return {
      num: [],
    }
  },

  methods: {
    getData() {
      let arr = []
      axios.get("http://127.0.0.1:5000/").then(res => {
        arr = toRaw(res.data)
        console.log(arr)

        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 绘制图表
        console.log(newArray)
        myChart.setOption({
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: arr,
            },
          ]
        });
      })


    },
  },

  mounted() {
    this.getData()
  },
})

</script>

<template>
 <div id="myChart"></div>
</template>

<style scoped>

#myChart {
  width: 200px;
  height: 200px;
}
</style>

解释一下,在script代码中,分别引入axios用于从后端接受数据和引入用于绘制图表的defineComponent, toRaw。然后在data中定义从后端接受数据的变量,我这里定义了一个num。需要根据后端返回的数据类型在data定义不同的变量来接受存储。

然后定义一个接受数据并绘图的函数getData(),首先定义一个arr数组来存储接收到的数据(vue中echarts使用规定的,不能直接用this),然后通过toRow()方法来把接收的后端数据存储到arr数组中。然后下面的代码就是定义了一个图表,在data部分用arr来表示图表数据。

可以看看console打印的

相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫6 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel7 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼8 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手11 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku12 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu12 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript