vue中的echarts调取后端接口渲染数据的方法

最新推荐文章于 2023-04-21 20:20:30 发布
最新推荐文章于 2023-04-21 20:20:30 发布
阅读量4.2k 收藏 9
点赞数 2
分类专栏： echarts学习 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46248307/article/details/106091740
版权

概述：第一次在公司运用echarts写大屏，写大屏简单，在后面要调取接口的时候开始有点蒙，后来发现也没啥，我自己整理出来两种运用的方法，望大佬们点评，第一次用，不喜勿喷

技术栈 vuecli+echarts+axios

第一种：是在方法里面直接调取所需要的接口，然后进行分发给需要的方法里面（我是数据都在一个接口里面的）

在这里插入图片描述
第二种，是在各个echarts的方法里面调用(适合一个页面少数的)

在这里插入图片描述

这是我自己用到的两种方法，如还有其他的方法希望告知

紫渊ღ
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
echart高级使用_Vue:在Vue中使用echarts
weixin_39980298的博客
12-19 422
前言公司的项目中需要对数据做可视化处理，高级点的D3.js目前还没接触到，因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts，但是使用现成的就意味着必须使用它定制好的数据结构，我也没办法对他进行一些修改。我个人也偏向于原生JS编程，因此没有采用，而是自己在vue中实现了对数据的可视化处理，先来看看效果图以下数据已做脱敏处理echarts Bar.pngec...
vue中echarts调用接口_在vue2中使用echarts (Vue-ECharts插件）
weixin_33252271的博客
12-29 2141
Vue-EChartsECharts 的 Vue.js 组件。基于 EChartsv4.1.0+ 开发，依赖 Vue.jsv2.2.6+。安装npm(推荐方式)$ npm install echarts vue-echartsCDN在 HTML 文件按如下方式依次引入 echarts和 vue-echarts：使用方法用 npm 与 Vue Loader 基于 ES M...
vue-cli3使用Echart动态渲染数据 轮询获取后台数据
ryan55的博客
03-17 2366
实现效果 采用轮询的方式向后台获取数据，然后动态将数据赋值给Echart饼状图的option.series[0].data数据，前端网页做出相应的改变 准备工作 进Echart官网选择适合的图，这里以Doughnut Chart饼状图为例。 1.导入Echart,在script里导入 import echarts from 'echarts' 2.给Echart一个大小 <div id...
vue封装echarts组件，数据动态渲染
蓝胖子的博客
01-05 1291
需求：显示默认时间为当前时间至7天之前时间 去请求数据 实现效果： 1.安装Echarts cnpm install echarts -S 2.在vue项目中使用Echarts 父组件使用子组件的代码 template区的使用 <BarChart :labelList="chartData.labelList" :checkOutValueList="chartData.checkOutValueList" :putInValueList
echarts用前端展示后端传递过来的数据
张木期的博客
12-16 5875
最近一段时间因为毕业的论文要求，对于数据的展示和处理，我想到了用echats直接画折线图等等，比较直观，由于项目后端值提供了数据接口，所以重点对于echarts的应用我放在了前端，下面是具体事例 1.前台发送请求： $.post("{:url('CaseWatch/getData')}",function (data) { console.log(data...
使用Vue调取接口,并渲染数据的示例代码
10-16
今天小编就为大家分享一篇使用Vue调取接口,并渲染数据的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中使用Echarts利用watch做动态数据渲染操作
10-15
主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
当需要将表格数据绘制成图表且数据来源于后端接口时，可以使用 Vue 的 `axios` 或其他 HTTP 库异步请求数据。假设我们有一个 `getData()` 方法来获取数据，那么在请求成功后，可以更新 `setOption` 中的数据： ```...
vue中echarts3.0自适应的方法
08-27
Vue 中 ECharts 3.0 自适应方法 ECharts 是一个流行的数据可视化库，广泛应用于各种数据分析和展示场景中。在 Vue 项目中使用 ECharts 可以快速创建丰富的数据可视化效果。然而，在使用 ECharts 时，如何使图表...
vue中echarts的动态渲染数据watch
m0_46370471的博客
12-24 1676
刚用到echarts，之前也有看过，看了之后感觉挺简单的，但是后来用的时候遇到了一个小问题，一般echarts都是获取后端数据动态加载数据，而网上好多demo都不是很好用，让我搞了好长一会才明白过来，话不多说，直接上代码。 <template> <div id="myChart" ref="myChart" style="width: 100%; height: 200px"></div> </template> <script> impor
echarts动态从后台获取数据展示在页面上
weixin_30564785的博客
09-07 1120
1.html内容 <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>趋势...
vue+echarts实现图表展示，数据是从后台请求获取
热门推荐
weixin_38206772的博客
07-30 1万+
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI
vue中echarts调用接口_vue中使用echarts
weixin_35565522的博客
01-30 1132
1、首先下载echart依赖，这里采用的npm包管理工具，在项目中运行命令npm install vue-echarts2、在main.js里引入/注册echart：：//引入echart：import echarts from 'echarts'//注册Vue.prototype.$echarts = echarts3、使用代码：export default {mounted(){this.dr...
vue中echarts调用接口_在Vue中使用echarts的两种方式
weixin_42339991的博客
01-12 851
准备：使用vue-cli脚手架如果你已经有自己的项目，可以跳过这一步。npm下载vue-cli脚手架(写这篇文章时用的还是vue-cli2)npm install -g @vue/cli初始化一个项目vue init webpack hello然后等待它安装完所有的依赖包就可以了。下面我们开始引入echarts。方式一、直接引入echarts先npm安装echartsnpm install ech...
vue 用户列表，请求接口中数据并渲染页面，分页
m0_58017645的博客
07-13 2340
参考：https://www.bilibili.com/video/BV15y4y1B7gA?p=35&spm_id_from=pageDriver 用户列表-渲染数据-一般数据 1.接口请求数据格式，get方式，传入参数：page,rows 2.初始化定义变量 3.联调接口 // 1.created() // 2.methods: 发送请求 // 3.接口文档中除了登录之外的所有请求都需要进行授权--设置请...
通过axios技术获取接口数据并处理后，再由基于vue的echarts可视化渲染（完全步骤）
m0_69097184的博客
04-21 1277
前言：满足一些日常开发要求，或者比赛要求而制定的，首先进行接口获取数据，再进行数据的预处理，最后再进行图表渲染，
通过npm引入的echart目录_vue项目中引用echarts的几种方式
weixin_39662955的博客
12-19 1642
首先我们初始化一个vue项目，执行vue init webpack echart,接着我们进入初始化的项目下。安装echarts，npm install echarts -S //或cnpm install echarts -S安装完成之后，我们就可以开始引入我们需要的echarts了，接下来介绍几种使用echarts的方式。全局引用：首先在main.js中引入echarts，将其绑定到vue原型...
vue中echarts调用接口_vue echart使用总结
weixin_39767887的博客
12-19 1110
vue请求映射数据接口实例：import echarts from 'echarts'export default{name: 'payEchart',data () {return{chart: null,dataList: [],dateStr: []}},mounted () {},beforeDestroy () {if (!this.chart) {return}this.chart.d...
echarts前后端交互数据_Vue-前后端交互
weixin_40006779的博客
11-20 1196
一、基础复习1.前后端交互通过浏览器调用接口，拿到后台的数据，再做前端的数据渲染。2. 接口调用方式因为Vue不操作DOM，所以用后两种ajaxjQuery的ajaxfetchaxios3. URL3.1 传统的URL3.2 Restful格式的URL4. promiseES6引入的一种语法，专门用来处理异步编程。JS层面的异步编程有：定时任务ajax事件函数4.1 演示jQuery的ajax的异...
vueecharts获取后端数据
最新发布
06-02
要在 Vue 中使用 ECharts，需要先安装 ECharts 和 vue-echarts。 1. 安装 ECharts 和 vue-echarts ``` npm install echarts --save-dev npm install vue-echarts --save-dev ``` 2. 引入 ECharts 和 vue-echarts 在 main.js 中引入 ECharts 和 vue-echarts： ``` import Vue from 'vue' import ECharts from 'echarts' import EChartsVue from 'vue-echarts' Vue.component('v-chart', EChartsVue.component) Vue.prototype.$echarts = ECharts ``` 3. 在 Vue 组件中使用 vue-echarts 在组件模板中引入 vue-echarts，并传入数据和配置： ``` <template> <div> <v-chart :options="chartOptions"></v-chart> </div> </template> <script> export default { data() { return { chartOptions: { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20, 15] }] } } } } </script> ``` 4. 获取后端数据 使用 Vue 的生命周期钩子函数 mounted，在组件挂载后获取后端数据，然后将数据传给 ECharts 进行渲染： ``` <template> <div> <v-chart ref="myChart" :options="chartOptions"></v-chart> </div> </template> <script> import axios from 'axios' export default { data() { return { chartOptions: { title: { text: 'ECharts 示例' }, tooltip: {}, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] } } }, mounted() { axios.get('/api/data').then(response => { const data = response.data const xAxisData = [] const seriesData = [] data.forEach(item => { xAxisData.push(item.name) seriesData.push(item.value) }) this.chartOptions.xAxis.data = xAxisData this.chartOptions.series[0].data = seriesData this.$refs.myChart.setOption(this.chartOptions) }) } } </script> ``` 以上代码中，使用 axios 发送 GET 请求获取后端数据，然后将数据处理成 ECharts 需要的格式，最后在组件挂载完成后调用 setOption 方法渲染图表。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值