ECharts数据可视化大屏项目

1.启动

进入这个目录

输入npm run dev

在浏览器中输入网址

TODO：启动项目的时候自动打开网页。

2.首页

在app.vue中引入对应的框。

<template>
  <div class=" bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden"
    v-if="data" >
    <!-- 左 -->
    <div class=" flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
       <!-- 横向柱状图 -->
        <HorizontalBar class=" h-1/3 box-border pb-4" :data="data.regionData"/>
       <!-- 雷达图 -->
        <RadarBar class=" h-1/3 box-border pb-4"/>
       <!-- 关系图 -->
        <Relation class=" h-1/3 "/>
    </div>
    <!-- 中 -->
    <div class=" w-1/2 mr-5 flex flex-col">
      <!-- 数据总览图 -->
       <TotalData class=" bg-opacity-50 bg-slate-800 p-3 "/>
       <!-- 地图可视化 -->
        <MapChart class=" bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1"/>
    </div>
    <!-- 右 -->
    <div class=" flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col"> 
       <!-- 竖向柱状图 -->
        <VerticalBar class=" h-1/3 box-border pb-4"/>
       <!-- 环形图 -->
        <RingBar class=" h-1/3 box-border pb-4"/>
       <!-- 文档云图 -->
        <WordCloud class=" h-1/3 "/>
    </div>
  </div>
</template>

<script setup>

import HorizontalBar from './components/HorizontalBar.vue';
import RadarBar from './components/RadarBar.vue';
import MapChart from './components/MapChart.vue';
import Relation from './components/Relation.vue';
import RingBar from './components/RingBar.vue';
import VerticalBar from './components/VerticalBar.vue';
import WordCloud from './components/WordCloud.vue';
import TotalData from './components/TotalData.vue';

import {ref} from 'vue'
import {getVisualization} from'./api/visualization.js'

const data =ref (null)
const loadData = async() => {
  data.value=await getVisualization()
  console.log(data.value)
}
loadData()

setInterval(() => {
  loadData()
},3000)

</script>

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

 

在父组件，如果有数据才加载以下的内容。

将数据传入对应的框中

3.echarts图表绘制，大体三步：

1.根据DOM实例，通过echarts.init方法，生成echarts 实例

2.构建options配置对象，整个echarts的样式，皆由该对象决定（核心）

3.最后通过实例。setOption 方法，设置配置对象

PS 我想拿我自己的数据做测试，下面是踩的坑

自己后端写一个测试接口，然后前端调用。

在utils包下创建

在api包下创建packaging.js

本来我想在components包下的vue中引用对应的接口，但是不行

只能在app.vue中引入才可以

会报错的

所以先在app.vue中引入接口，然后把接口的数据丢到对应的子页面中去

后端也出现了问题

原因是后端没写跨域

go get "github.com/gin-contrib/cors"

	router.Use(cors.New(cors.Config{
		AllowOrigins:     []string{"http://localhost:5173"}, // 允许前端开发服务器地址
		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
		AllowHeaders:     []string{"Origin", "Content-Type", "Authorization"},
		ExposeHeaders:    []string{"Content-Length"},
		AllowCredentials: true,
	}))

4.具体实现

 

ref="target"

const target = ref(null);

import { ref, onMounted } from "vue";

const mChart = null;

onMounted(() => {

  mChart = echarts.init(target.value);

  renderChart()

});

const renderChart =()=>{

    const options={

        xAxis:{},

        yAxis:{},

        grid:{},

        series:[]

    }


    mChart.setOption(options)

}

5.错误分析

1.

func GetWarnMsgNum(c *gin.Context) {
    existingData := &model.WarnMessage{}
    type DailyWarnMsg struct {
       CustomerName string `json:"machine_name"`
       Count        int    `json:"count"`
    }这是我方法里面的要返回的结构体，但是我的数据库结构体

type WarnMessage struct {
    gorm.Model
    //机器ID
    MachineId uint `json:"machine_id"`
    //机器名字应该把客户的名字也在这里写
    MachineName string `json:"machine_name"`
    //位置
    Location string `json:"location"`
    //存储错误的报警信息
    WarnMsg string `json:"warn_msg"`
}，一直返回不了客户名信息，最后发现是要结构体的名字要一样才行。

type DailyWarnMsg struct { CustomerName string `json:"machine_name"` Count int `json:"count"` }改为

type DailyWarnMsg struct {
    MachineName string `json:"machine_name"`
    Count        int    `json:"count"`
}才能返回

2.

在用router-vue的时候，发现一个错误，

14:40:42 [vite] page reload src/main.js At least one <template> or <script> is required in a single file component. 14:40:42 [vite] Internal server error: At least one <template> or <script> is required in a single file component.

因为他会预加载我的路由所指的页面，而我新建的页面只写了个div，要补上一个template。才可以。

6、前后端打包

router.Static("/fe", "./resource/dist")

我后端加了资源。

前端没设置，搞了好久。

export default defineConfig({

    base: '/fe/',

不然静态图片没加载出来。（对后端来说，配置这个前端环境有点恶心了）一开始以为打包的index.html里链接/asserts，变成./asserts又好了，但还是没加载图片。

7、部署到华为云服务器上

好在我是简单的部署，将exe文件和dist文件放到服务器上，打开exe文件即可。公司使用了windows服务器。当时出现一个问题，我只能在服务器上用localhost打开，用公网ip不行。去浏览器控制台看发现是请求了127的路径，需要在我baseurl里面该成公网ip。

8、小知识

目前来说，查数据库返回的数据都是用切片返回，我一般都是将数据整行传回来，然后通过函数内定义结构体去获取我所需要的数据。

	result, err := service.ServiceGroupApp.StockService.FindAllStockByName(stock.Name)
	if err != nil {
		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
		return
	}
	fmt.Println(result)
	var processedResult []struct {
		StockID   int
		StockName string
		Percent   float32
	}
	for _, item := range result {
		percent := float32(item.UsedLength) / float32(item.Length)
		processedItem := struct {
			StockID   int
			StockName string
			Percent   float32
		}{
			item.StockId,
			item.Name,
			percent,
		}
		processedResult = append(processedResult, processedItem)
	}
	fmt.Println(processedResult)
	c.JSON(http.StatusOK, gin.H{"data": processedResult})

比如上面这个，reuslt拿到数据库数据切片，然后自定义结构体去做返回，再通过切片添加。这里的结构体需要用大写，如果用小写：在api测试的时候是缺了这个数据的。