Part 8 of the Vue series: echarts draws bar charts and line charts

This article will use the echarts framework to draw bar charts and line charts.

Table of contents

1. Drawing effect

2.Install echarts

3. Front-end code

4.Backend code

1. Drawing effect

2.Install echarts

//Install echarts version 4
npm i -D echarts@4

3. Front-end code

src/api/api.js

//业务服务调用接口封装

import service from '../service.js'
//npm i qs -D
import qs from 'qs'

//登录接口
export function login(data) {
    return service({
        method: 'post',
        url: '/login',
        data
    })
}

//学生信息查询接口
export function students(params) {
    return service({
        method: 'get',
        url: '/api/students',
        params
    })
}

//删除学生信息
export function delstudentsbyid(id) {
    return service({
        method: 'get',
        //此处应用模板字符串传参
        url: `/api/students/del?id=${id}`
    })
}

export function delstudentsbyreqid(id) {
    return service({
        method: 'get',
        //此处应用模板字符串传参
        url: `/api/students/del/${id}`
    })
}

export function addStudent(data) {
    //data = qs.stringify(data)
    return service({
        method: 'post',
        url: '/api/info',
        data
    })
}

export function updateStudent(data) {
    return service({
        method: 'post',
        url: '/api/updateinfo',
        data
    })
}

export function getInfo() {
    return service({
        method: 'get',
        url: '/api/getinfo'
    })
}

export function delinfo(id) {
    return service({
        method: 'get',
        //此处应用模板字符串传参
        url: `/api/info/del/id=${id}`
    })
}

export function dataview(id) {
    return service({
        method: 'get',
        url: '/api/data/dataview'
    })
}

src/components/common/dataanalyse/DataView.vue

<template>
    <div class="data-view">
    <el-card>
        <div id="main1">
        </div>
    </el-card>
    <el-card>
        <div id="main2">
        </div>
    </el-card>
    </div>
</template>

<script>
import { dataview } from '@/api/api.js'

export default {
    data() {
        return {
            name: ""
        }
    },
    created() {
        //http获取服务端数据,huizhe 折线图
        dataview().then(res => {
            console.log(res)
            if (200 === res.data.status) {
                let {legend, xAxis, series} = res.data.data
                this.draw(legend, xAxis, series)
            }
        })
    },
    mounted() {
        //初始化实例
        let myChart = this.$echarts.init(document.getElementById('main1'))
        myChart.setOption({
            title: {
                text: '大佬学vue分数'
            },
            tooltip: {},
            xAxis: {
                data: ['张三', '李四', '王五', '赵六']
            },
            yAxis: {
            },
            series: [{
                name: '人数',
                // bar: 柱状图  line: 折线图
                type: 'bar',
                data: [90, 100, 85, 70]
            }]
        })
    },
    methods: {
        draw(legend, xAxis, series) {
            let myChart1 = this.$echarts.init(document.getElementById('main2'))
            let option = {
                title: {
                    text: "会话量"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legend
                },
                xAxis: {
                    type: 'category',
                    data: xAxis
                },
                yAxis: {
                    type: 'value'

                },
                series: series
            }
            myChart1.setOption(option)
        }
    }
}
</script>
  
<style lang='scss'>
.data-view {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-card {
        width: 50%;
        #main1, #main2 {
            height: 500px;
        }
    }
}
</style>

4.Backend code

server.go

package main

import (
	"main/controller"
	"net/http"

	"github.com/gin-contrib/cors"
	"github.com/gin-gonic/gin"
)

/*
// 错误： server.go:4:2: package main/controller is not in GOROOT (/home/tiger/go/go/src/main/controller)
go mod init main

//错误： server.go:7:2: no required module provides package github.com/gin-gonic/gin; to add it:
go get github.com/gin-gonic/gin

//处理跨域框架
go get github.com/gin-contrib/cors
*/

/*
当客户端（尤其是基于 Web 的客户端）想要访问 API 时，服务器会决定允许哪些客户端发送请求。这是通过使用称为 CORS 来完成的，它代表跨源资源共享。
跨域资源共享 （CORS） 是一种机制，允许从提供第一个资源的域之外的另一个域请求网页上的受限资源。
*/

func CrosHandler() gin.HandlerFunc {
	return func(context *gin.Context) {
		context.Writer.Header().Set("Access-Control-Allow-Origin", "*")
		context.Header("Access-Control-Allow-Origin", "*") // 设置允许访问所有域
		context.Header("Access-Control-Allow-Methods", "POST,GET,OPTIONS,PUT,DELETE,UPDATE")
		context.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma,token,openid,opentoken")
		context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar")
		context.Header("Access-Control-Max-Age", "172800")
		context.Header("Access-Control-Allow-Credentials", "true")
		context.Set("content-type", "application/json") //设置返回格式是json
		//处理请求
		context.Next()
	}
}

// http://127.0.0.1:8181/ping
// http://127.0.0.1:8181/index
func main() {
	r := gin.Default()

	// 设置全局跨域访问
	//r.Use(CrosHandler())

	//cors处理跨域
	corsConfig := cors.DefaultConfig()
	corsConfig.AllowCredentials = true
	corsConfig.AllowHeaders = []string{"content-type", "Origin", "token", "username"}
	corsConfig.AllowOrigins = []string{"http://localhost:8080", "http://localhost:8081"}
	corsConfig.AllowMethods = []string{"POST", "GET", "OPTIONS", "PUT", "DELETE", "UPDATE"}

	r.Use(cors.New(corsConfig))
	//r.Use(cors.Default())

	// 返回一个json数据
	r.GET("/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "pong",
			"num":     888,
		})
	})

	// 返回一个html页面
	r.LoadHTMLGlob("templates/*")
	r.GET("/index", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.html", nil)
	})

	r.POST("/login", controller.LoginPost)
	r.POST("/formlogin", controller.FormLoginPost)
	r.POST("/upload", controller.UploadFile)

	r.GET("/api/students", controller.GetStudentList)
	r.GET("/api/students/del", controller.DelStudent)
	r.GET("/api/students/del/:id", controller.DelStudentByReq)
	r.POST("/api/info", controller.AddStudent)
	r.GET("/api/getinfo", controller.GetInfo)
	r.POST("api/updateinfo", controller.UpdateStudent)
	r.GET("/api/info/del/:id", controller.DelIfo)
	r.GET("api/works", controller.Works)
	r.GET("/api/data/dataview", controller.DataView)

	//r.Run()  // <===> r.Run(":8080")  监听并在 0.0.0.0:8080 上启动服务
	r.Run(":8181")
}

controller/dataview.go

package controller

import (
	"net/http"

	"github.com/gin-gonic/gin"
)

/*
//嵌套json举例
type Person struct {
	Name    string `json:"name"`
	Age     int    `json:"age"`
	Address struct {
		Street string `json:"street"`
		City   string `json:"city"`
	} `json:"address"`
}

person := Person{"张三", 20, struct {
	Street string `json:"street"`
	City   string `json:"city"`
	} {
		"北京路", "广州市",
	}
}
c.JSON(200, person)
*/

/*
// 给前端发送如下数据
{
	"legend": ["技术总监", "产品经理", "后端开发", "前端开发", "运维/测试"],
	"xAxis": ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
	"series": [
		{
			"name": "技术总监",
			"type": "line",
			"stack": "总量",
			"data": [80, 83, 84, 40, 44, 11, 12]
		},
		{
			"name": "产品经理",
			"type": "line",
			"stack": "总量",
			"data": [66, 34, 39, 42, 45, 20, 30]
		},
		{
			"name": "后端开发",
			"type": "line",
			"stack": "总量",
			"data": [66, 65, 59, 44, 33, 10, 20]
		},
		{
			"name": "前端开发",
			"type": "line",
			"stack": "总量",
			"data": [33, 33, 44, 55, 55, 11, 23]
		},
		{
			"name": "运维/测试",
			"type": "line",
			"stack": "总量",
			"data": [67, 45, 32, 40, 27, 11, 59]
		},

	]
}
*/

type Response struct {
	Status int         `json:"status"`
	Msg    string      `json:"msg"`
	Data   interface{} `json:"data"`
}

type TSeries struct {
	Name  string `json:"name"`
	Type  string `json:"type"`
	Stack string `json:"stack"`
	Data  []int  `json:"data"`
}

type DataItem struct {
	Legend []string  `json:"legend"`
	XAxis  []string  `json:"xAxis"`
	Series []TSeries `json:"series"`
}

var dataItem = DataItem{
	Legend: []string{"技术总监", "产品经理", "后端开发", "前端开发", "运维/测试"},
	XAxis:  []string{"星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"},
	Series: []TSeries{
		{
			Name:  "技术总监",
			Type:  "line",
			Stack: "总量",
			Data:  []int{80, 83, 84, 40, 44, 11, 12},
		},
		{
			Name:  "产品经理",
			Type:  "line",
			Stack: "总量",
			Data:  []int{66, 34, 39, 42, 45, 20, 30},
		},
		{
			Name:  "后端开发",
			Type:  "line",
			Stack: "总量",
			Data:  []int{66, 65, 59, 44, 33, 10, 20},
		},
		{
			Name:  "前端开发",
			Type:  "line",
			Stack: "总量",
			Data:  []int{33, 33, 44, 55, 55, 11, 23},
		},
		{
			Name:  "运维/测试",
			Type:  "line",
			Stack: "总量",
			Data:  []int{67, 45, 32, 40, 27, 11, 59},
		},
	},
}

var response = Response{
	200,
	"获取数据成功",
	dataItem,
}

// GET请求 http://127.0.0.1:8181/api/data/dataview
func DataView(ctx *gin.Context) {
	ctx.JSON(http.StatusOK, response)
}

Part 8 of the Vue series: echarts draws bar charts and line charts

1. Drawing effect

2.Install echarts

3. Front-end code

4.Backend code

Guess you like