echarts（从后台获取数据赋值给echarts）

最新推荐文章于 2023-09-18 20:25:55 发布
最新推荐文章于 2023-09-18 20:25:55 发布
阅读量3.8k 收藏 8
点赞数 1
分类专栏： echarts 文章标签： vue.js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44701537/article/details/103594882
版权

one

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <style>
        #demo {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="demo"></div> <!-- //先给个id -->

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
                //定义一个方法
                drawchart(id) {
                    axios.get(url, {
                        params: {
                            key1: value1
                        }
                    })
                        .then(res => {    //获取到数据赋值给demoOption
                            console.log(res);
                            var datas1 = ['200', '400', '600', '800', '500', '600', '550']

                            // var datas1=[]
                            // for (let i = 0; i < res.data.list.length; i++) {
                            //     datas1.push(res.data.list[i])
                            // }

                            this.charts = echarts.init(document.getElementById(id))

                            var demoOption = {
                               xAxis: {
					                type: 'category',
					                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					            },
					            yAxis: {
					                type: 'value'
					            },
					            series: [{
					                data: datas1,
					                type: 'line'
					            }]
                            };
                            this.charts.setOption(demoOption);
                        })
                }
            },
            mounted() {
                this.$nextTick(function () {
                    this.drawchart('demo')
                })
            },
        })
    </script>
</body>

two

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <style>
        #demo {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="demo"></div> <!-- //先给个id -->

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
                //定义一个方法
                drawchart(id) {
                    this.charts = echarts.init(document.getElementById(id))
                    this.charts.setOption({
                        xAxis: {
			                type: 'category',
			                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			            },
			            yAxis: {
			                type: 'value'
			            },
			            series: [{
			                data: datas1,
			                type: 'line'
			            }]
                    });




                    this.charts.setOption(demoOption);
                }
            },
            mounted() {
                this.$nextTick(function () {
                    var thiz = this;

                    axios.get(url, {
                        params: {
                            key1: value1
                        }
                    }).then(res => {
                        console.log(res);
                        var datas1 = ['200', '400', '600', '800', '500', '600', '550']

                        // var datas1=[]
                        // for (let i = 0; i < res.data.list.length; i++) {
                        //     datas1.push(res.data.list[i])
                        // }
                        this.drawchart('demo')
                    })
                })
            },
        })
    </script>
</body>

three

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <style>
        #demo {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="demo"></div> <!-- //先给个id -->

    </div>

    <script>
        var datas1 = [820, 932, 901, 934, 1290, 1330, 1320]
        var lineDom = document.getElementById("demo");
        var lineChart = echarts.init(lineDom);
        var demoOption = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: datas1,
                type: 'line'
            }]
        };
        if (demoOption && typeof demoOption === "object") {
            axios.get(url, {
                params: {
                    key1: value1
                }
            })
                .then(res => {
                    console.log(res);

                    // var datas1=[]
                    // for (let i = 0; i < res.data.list.length; i++) {
                    //     datas1.push(res.data.list[i])
                    // }
                    // demoOption.series[0].data = datas1
                    lineChart.setOption(demoOption, true);
                })
        }
    </script>
</body>
不会桥敲代码的程序袁
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
jquery+echarts+php实时动态图表显示
01-06
基于百度的前端富图标框架echart写的一个动态更新图标显示示例，后端基于php，用户可自己定义后端数据来源（动态数据库，系统信息等等），前端显示参数可自定义
【ECharts】调用接口获取后端数据的四种方法
Qxn530的博客
09-02 1万+
eacharts调用接口获取后端数据的四种方法
Echarts如何从后台数据库获取数据（Vue+elementui+springboot+mybatis）
TC0221的博客
03-22 4622
Vue+elementui+springboot+mybatis教你一步步实现从后台获取数据渲染到Echarts图表上
vue中使用echarts实现动态数据绑定、获取后端接口数据
JackChan
04-11 6232
vue中使用echarts实现动态数据绑定、获取后端接口数据
VUE+Echarts+SpringBoot：后端获取数据库中的值传给前端图表展示
weixin_43787826的博客
11-23 1443
VUE+Echarts+SpringBoot：后端获取数据库中的值传给前端图表展示 一、后端部分 由于逻辑比较简单，没有写service层。 数据库中的数据和最后的结果如下所示： 项目框架如下用到下面四个文件 1.实体类Echarts package com.example.analysis.bean; public class Echarts{ private Integer id; private String name; private Integer num; public Echarts(Stri
ECharts前台后台数据交互Demo
11-26
设置请求方法（GET或POST）、URL、数据（如果需要发送数据给后端）以及回调函数来处理响应。 4. **处理响应**：后端接收到请求后执行SQL查询，然后将查询结果转化为JSON格式返回给前端。前端的AJAX回调函数会接收到...
echarts后台封装（java）
12-12
6. **前端接收与渲染**：前端接收到JSON数据后，直接将数据赋值给ECharts的option，然后调用`echarts.init()`和`echarts.setOption()`方法来初始化图表并渲染。 在这个过程中，我们需要注意几个关键点： - **数据...
echarts对应后台java类的工具jar
08-13
3. 封装数据：将业务数据转化为ECharts可以识别的数据格式，例如将数据库查询结果转化为二维数组或List，然后赋值给Option对象的data属性。 4. 转换为JSON：使用Java的JSON库（如Jackson或Gson）将Option对象转换为...
echart后台获取数据实例
04-11
ECharts 是一个由百度开发的开源 JavaScript 图表库，它提供了丰富的可视化图表类型，如柱状图、折线图、饼图等，并且支持自定义交互和...同时，通过后台处理数据，可以更好地保护敏感信息，只传递必要的数据给前端。
Echarts实现单条折线可拖拽效果
11-26
2. **AJAX获取后台数据**：通过AJAX异步请求获取后台数据，然后将数据传递给`coinConsumeChart()`。由于本实例中使用了同步请求，所以需注释掉`async:false`。 ```javascript function dayComment(url, chartId, ...
vue中使用echarts从后端获取数据并显示到页面上
weixin_45292837的博客
03-16 1326
2.将echarts图里面的数据在请求数据的方法里for循环赋值出来。4.将for循环出来的数组传给图的方法里。3.调用echarts获取图的方法。5.实现了动态请求数据。
Vue中使用echarts从后端获取数据并赋值显示
热门推荐
学如逆水行舟，不进则退，如遇问题联系邮箱：904004593@qq.com
06-25 3万+
废话不多说直接上代码,由于前后端交互,所以使用axios发送请求 如饼图: 一,安装vue中安装echarts,axios和vue-axios npm install echarts -S npm install axios npm install --save vue-axios 二,全局引入echarts和axios main.js import echarts from 'echarts' import echarts from 'echarts' import axios from 'axi
如何用echarts获取后台数据
qq_45018844的博客
01-29 9558
如何使用echarts做到数据可视化 首先我们一点要去官网，自己先做出一个没有数据交互的静态的echarts 静态echarts 不会的可以看我的这个博客 我先给大家上效果图： 这里的数据是从后台传过来的，但是这里我是自己弄的一个node的后台服务 总共15条数据，接下来废话不多说，上代码： 做过静态的echarts的肯定都知道，这是初始化这个图表 initChart () { this.chartInstance = this.$echarts.init(this.$refs.selle
vue集成echarts柱状图动态获取数据展示
爱学习的大雄的博客
12-08 3756
在图表展示时，我们经常需要使用到柱状图等，其中展示的数据我们一般是从后端获取，我这里遇到的问题就是无法动态展示从后端获取的数据（后端获取后无法展示），在解决完这个问题后，写下该笔记进行记录。在后台管理界面中有图表展示的需求，经过查阅资料，发现echarts较为合适，故使用vue+echarts进行开发图表效果。上，所以就需要先获取数据，数据获取完成后再去进行渲染，否则数据无法渲染到图表中。中进行了，所以我们在初始化前就需要将从后端获取的数据渲染到。**问题的原因是：**图表的初始化是在。
在vue3项目中如何使用echarts
aiyang1214878408的博客
10-14 5700
vue3项目在做一个图表需求时发现项目之前引入的第三方echarts因确实文档使用时不能满足需求,顾去echarts官网查看文档,引入原生echarts.要实现的如下原型效果,用此文档记录.
vue简单数据可视化---结合echarts实现柱状图
代码哈士奇的博客
11-13 6716
vue简单数据可视化---结合echarts实现柱状图下载axios和echarts包 首先搭建vue项目 不会或者忘记的小伙伴移步这里 Vue项目搭建 本次主要讲将数据展示成柱状图，不封装axios不封装echarts，直接引用，大佬勿喷 下载axios和echarts包 npm install axios --save npm install echarts --save 下载完成即可 新建页面 About 和Home文件为创建项目自带不用管 配置路由 import Vue from "vue"
vue 把echarts封装成一个方法 并且从后端读取数据 +转换数据格式 =动态echarts 联动echarts表
最新发布
老段的CSDN的博客
09-18 2251
mounted调用下边两个方法 methods里边的方法 饼图 注意的地方:发现后端给我们返回的不是echarts的格式 ，这个时候我们做一个操作 下一步操作 遍历内容 数据格式转换 最后一步 在echarts柱状图或者折线图里边去显示这些数据 饼状图取数据 发现 数据循环遍历+数据格式转换 饼图最后一步 在echarts柱状图或者折线图里边去显示这些数据 全部代码
vue3从接口中获取数据赋值给data怎么无效
08-09
在Vue3中，从接口中获取数据赋值给data的过程可能会出现无效的情况，主要有以下几个可能的原因： 1. 异步操作：接口请求通常是异步的，而在Vue3中，data中的数据在组件初始化时会被立即执行，此时可能还没有获取到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值