快捷導(dǎo)航

Vue使用echarts繪制柱狀圖和折線圖

更新時間：2023年08月07日 10:43:27 作者：hsy12342611

這篇文章主要為大家學(xué)習(xí)介紹了Vue如何使用echarts繪制柱狀圖和折線圖,文中有詳細(xì)的示例代碼,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1.繪制效果

2.安裝echarts

// 安裝echarts版本4

npm i -D echarts@4

3.前端代碼

src/api/api.js

//業(yè)務(wù)服務(wù)調(diào)用接口封裝
import service from '../service.js'
//npm i qs -D
import qs from 'qs'
//登錄接口
export function login(data) {
    return service({
        method: 'post',
        url: '/login',
        data
    })
}
//學(xué)生信息查詢接口
export function students(params) {
    return service({
        method: 'get',
        url: '/api/students',
        params
    })
}
//刪除學(xué)生信息
export function delstudentsbyid(id) {
    return service({
        method: 'get',
        //此處應(yīng)用模板字符串傳參
        url: `/api/students/del?id=${id}`
    })
}
export function delstudentsbyreqid(id) {
    return service({
        method: 'get',
        //此處應(yīng)用模板字符串傳參
        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',
        //此處應(yīng)用模板字符串傳參
        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獲取服務(wù)端數(shù)據(jù),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() {
        //初始化實(shí)例
        let myChart = this.$echarts.init(document.getElementById('main1'))
        myChart.setOption({
            title: {
                text: '大佬學(xué)vue分?jǐn)?shù)'
            },
            tooltip: {},
            xAxis: {
                data: ['張三', '李四', '王五', '趙六']
            },
            yAxis: {
            },
            series: [{
                name: '人數(shù)',
                // 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.后端代碼

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
*/
/*
當(dāng)客戶端（尤其是基于 Web 的客戶端）想要訪問 API 時，服務(wù)器會決定允許哪些客戶端發(fā)送請求。這是通過使用稱為 CORS 來完成的，它代表跨源資源共享。
跨域資源共享 （CORS） 是一種機(jī)制，允許從提供第一個資源的域之外的另一個域請求網(wǎng)頁上的受限資源。
*/
func CrosHandler() gin.HandlerFunc {
	return func(context *gin.Context) {
		context.Writer.Header().Set("Access-Control-Allow-Origin", "*")
		context.Header("Access-Control-Allow-Origin", "*") // 設(shè)置允許訪問所有域
		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") //設(shè)置返回格式是json
		//處理請求
		context.Next()
	}
}
// http://127.0.0.1:8181/ping
// http://127.0.0.1:8181/index
func main() {
	r := gin.Default()
	// 設(shè)置全局跨域訪問
	//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數(shù)據(jù)
	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")  監(jiān)聽并在 0.0.0.0:8080 上啟動服務(wù)
	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)
*/
/*
// 給前端發(fā)送如下數(shù)據(jù)
{
	"legend": ["技術(shù)總監(jiān)", "產(chǎn)品經(jīng)理", "后端開發(fā)", "前端開發(fā)", "運(yùn)維/測試"],
	"xAxis": ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
	"series": [
		{
			"name": "技術(shù)總監(jiān)",
			"type": "line",
			"stack": "總量",
			"data": [80, 83, 84, 40, 44, 11, 12]
		},
		{
			"name": "產(chǎn)品經(jīng)理",
			"type": "line",
			"stack": "總量",
			"data": [66, 34, 39, 42, 45, 20, 30]
		},
		{
			"name": "后端開發(fā)",
			"type": "line",
			"stack": "總量",
			"data": [66, 65, 59, 44, 33, 10, 20]
		},
		{
			"name": "前端開發(fā)",
			"type": "line",
			"stack": "總量",
			"data": [33, 33, 44, 55, 55, 11, 23]
		},
		{
			"name": "運(yùn)維/測試",
			"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{"技術(shù)總監(jiān)", "產(chǎn)品經(jīng)理", "后端開發(fā)", "前端開發(fā)", "運(yùn)維/測試"},
	XAxis:  []string{"星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"},
	Series: []TSeries{
		{
			Name:  "技術(shù)總監(jiān)",
			Type:  "line",
			Stack: "總量",
			Data:  []int{80, 83, 84, 40, 44, 11, 12},
		},
		{
			Name:  "產(chǎn)品經(jīng)理",
			Type:  "line",
			Stack: "總量",
			Data:  []int{66, 34, 39, 42, 45, 20, 30},
		},
		{
			Name:  "后端開發(fā)",
			Type:  "line",
			Stack: "總量",
			Data:  []int{66, 65, 59, 44, 33, 10, 20},
		},
		{
			Name:  "前端開發(fā)",
			Type:  "line",
			Stack: "總量",
			Data:  []int{33, 33, 44, 55, 55, 11, 23},
		},
		{
			Name:  "運(yùn)維/測試",
			Type:  "line",
			Stack: "總量",
			Data:  []int{67, 45, 32, 40, 27, 11, 59},
		},
	},
}
var response = Response{
	200,
	"獲取數(shù)據(jù)成功",
	dataItem,
}
// GET請求 http://127.0.0.1:8181/api/data/dataview
func DataView(ctx *gin.Context) {
	ctx.JSON(http.StatusOK, response)
}

以上就是Vue使用echarts繪制柱狀圖和折線圖的詳細(xì)內(nèi)容，更多關(guān)于Vue echarts柱狀圖和折線圖的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: