Echarts与后台(mongoose)交互

Echarts引入地址可参考

echarts组件引入

javascript 复制代码
<template>
  <div>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import api from '@/components/utils/api'

const boxlist = ref([])
const mc = ref([])
const jg = ref([])


const chafen = () => {
  boxlist.value.forEach(item => {
    mc.value.push(String(item.name))
    jg.value.push(Number(item.price))
    console.log(mc.value, jg.value);
    // console.log(item);
  });
}

const zhuxing = () => {
  // 基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts与后台交互示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: mc.value
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: jg.value
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}


onMounted(async () => {
  const { data: { data } } = await api.get('zx')
  boxlist.value = data
  chafen()
  zhuxing()
})
</script>

<style lang="scss" scoped></style>

前端代码

javascript 复制代码
<template>
    <div class="body">
        <div class="box">
            <count-up v-for="(val, index) in endVal" :key="index" :end-val="val" :duration="duration"
                :decimal-places="decimals" :options="options" @init="onInit" @finished="onFinished"
                class="count"></count-up>
        </div>
        <zhuxing></zhuxing>
    </div>
</template>
  
<script setup lang="ts">
import { reactive, toRefs, onMounted,ref,computed } from 'vue'
import CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'

import zhuxing from '@/components/gundong/zhuxing.vue'
import api from '@/components/utils/api'

const count=ref(null)

const data = reactive({
    startVal: 0, // 开始值
    endVal:  computed(()=>([count.value, 5000, 10000])), // 结束值 -- 可以写成动态的
    duration: 5, // 跳动时长 - 单位:秒
    decimals: 0, // 小数点位数
    countUp: undefined as ICountUp | undefined, // 跳动的对象
    // countUps: [] as Array<ICountUp> | [], // 跳动的对象数组
    options: {
        // 配置分隔符
        separator: '❤️'
    } as CountUpOptions
})

const onInit = (ctx: ICountUp) => {
    data.countUp = ctx
    console.log(`开始`, ctx)
}
const onFinished = () => {
    console.log('结束')
}
const { endVal, duration, decimals, options } = toRefs(data)

onMounted(async () => {
    const {data:{data}}=await api.get('zx')
    count.value=data.length
    console.log(count.value);
    // onInit()
    // onFinished()
})
</script>

<style lang="less" scoped>
.body {
    .box {
        display: flex;
        justify-content: flex-start;

        // font-weight: bold;
        .count {
            font-size: 20px;
            font-weight: bold;
            margin: 0 30px;
        }
    }
}
</style>
  

后端代码

后端配置参考地址

javascript 复制代码
var express = require("express");
var router = express.Router();
const mongoose = require("mongoose");

const Zhuxing = mongoose.model("zhuxing",{name:String,price:Number},'zhuxing')
// Zhuxing.create({
//   name:'周日',
//   price:6000
// })

router.get("/zx", async function (req, res, next) {
  const data = await Zhuxing.find();
  // console.log(data);
  res.send({ code: "200", message: "zx show ok", data });
});

module.exports = router;

效果查看

相关推荐
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
AxureMost2 小时前
Axure常用交互功能案例-免费
交互·axure·photoshop
西陵2 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常2 小时前
vue中添加原生右键菜单
javascript·vue.js
旷世奇才李先生2 小时前
Next.js 安装使用教程
开发语言·javascript·ecmascript
Mintopia4 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学