ECharts调用接口获取后端数据的四种方法总结

目录
  • 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据)
  • 方法二:在调用数据的时候调用图表(一个页面的所有数据都在这一个接口中)
  • 方法三:使用chartes中的dataset数据集
  • 方法四:在对应图表中,用ajax请求
  • 注意
  • 总结

使用eacharts做大屏,需要使用后端数据,下面的方法是自己试过有效的,有什么不对的,望各位大佬指点。

方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据)

mounted () {
    setTimeout(() => {
      this.axisOption() // 树状
      this.pieOption()//饼图
    }, 2000)
  },
//或者
mounted () {
    setTimeout(async () => {
      const res = await Getwx()
      this.Monthlist = res.Data.Monthlist
      this.Visitpvlist = res.Data.Visitpvlist
      this.drawLine();//柱状图
}, 0);
},

方法二:在调用数据的时候调用图表(一个页面的所有数据都在这一个接口中)

created () {
    this.GetProjectAll ()
  },

 methods: {
// 获取数据
    async GetProjectAll () {
      const res = await GetProjectAll({ projectid: this.formdata.type })
      this.tableData = res.data.jrgrsl.data
      this.pieData = res.data.clbp.data
      this.$nextTick(() => {
        this.axisOption() // 树状
        this.pieOption()//饼图
      })
    },
  }

方法三:使用chartes中的dataset数据集

<script>
import * as echarts from 'echarts'
import { getStatistics } from '@/api/home'
export default {
  data () {
    return {
      mainData: [],//折线图数据
    }
  },
  mounted () {
     this.chartSetting();
  },
  created () {
    this.CeData()
  },
  methods: {
    // 返回数据
    async CeData () {
      const { data } = await getStatistics()
      this.mainData = data.mainData
    },
    // 折现图
    chartSetting () {
      // 基于准备好的dom,初始化echarts实例
      this.mainChart = echarts.init(document.getElementById('main'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        dataset: [ // 数据
          {  source: this.mainData // 表数据 },
          { transform: {
              type: 'sort'
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: { // 底部文字设置
              interval: 0, // 控制是否全部显示
              fontSize: 12
            },
            axisLine: { // 底部横线
              show: false
            },
            axisTick: { // 刻度线
              show: false
            }
          }
        ],
        yAxis: [
          { type: 'value' }
        ],
        series: [
          {
            name: '项目',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {  width: 1,   color: '#2e3192' },
            showSymbol: false,
            label: {  show: true,  position: 'top' },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {  offset: 0,  color: '#62a0f8' },
                {  offset: 1, color: '#b5d5ff' }
              ])
            },
            markPoint: { // 最大值和最小值标注
              data: [
                { type: 'max', name: '最大值' }
              ]
            },
            emphasis: {  focus: 'series' }
          }
        ]
      }
      // 绘制图表
      this.mainChart.setOption(option)
      const that = this
      window.addEventListener('resize', function () {
        that.mainChart.resize()
      })
    },
  }
}
</script>

方法四:在对应图表中,用ajax请求

 drawLine2 () {
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: "11%",
          width: "80%",
          height: "60%"
        },
        legend: [{
          data: ['单位: 秒'],
          top: "10",
          left: "10",
          itemWidth: 8,
          itemHeight: 8,
          icon: "rect",
          textStyle: {
            color: "#fff"
          }
        }, {
          data: ['增速%'],
          top: "10",
          right: "5%",
          itemWidth: 8,
          itemHeight: 8,
          icon: "rect",
          textStyle: {
            color: "#fff"
          }
        }],
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#b8b8ba',
              },
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 10000,
            interval: 2000,
            axisLabel: {
              formatter: function (value) {
                return value + ""
              },
              textStyle: {
                color: '#b8b8ba',
              },
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.5
              }
            },
            symbol: "triangle"
          },
          {
            type: 'value',
            min: 0.4,
            max: 0.9,
            interval: 0.1,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#b8b8ba',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.5
              }
            },
          }
        ],
        series: [
          {
            name: '单位: 秒',
            type: 'bar',
            data: [],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#01c7f4' },
                { offset: 1, color: '#003fe2' }
              ]),
              borderRadius: 8
            },
            barWidth: 10
          },
          {
            name: '增速%',
            type: 'line',
            areaStyle: {},
            yAxisIndex: 1,
            data: [],
            itemStyle: {
              color: "#77ff3b",
            },
            lineStyle: {
              width: 1
            },
            symbolSize: 7,
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: '#040d0c' },
                { offset: 0, color: '#5cd62c' }
              ])
            },
          }
        ]
      };
      const zoomSize = 6;
      myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
      option && myChart.setOption(option);
      $.ajax({
        type: "get",
        // async: false, //同步执行
        url: "api/WxStatistics/GetStatisticsData",
        data: {},
        success: function (result) {
          myChart.setOption({
            xAxis: { data: result.Data.Monthlist },
            series: [
              {
                data: result.Data.Staytimeuvlist,
              },
              {
                data: [0.6, 0.65, 0.65, 0.68, 0.58, 0.61, 0.58, 0.6, 0.61, 0.65, 0.63, 0.55],
              }
            ]
          })
        },
        error: function (errorMsg) {
          alert("不好意思,图表请求数据失败啦!");
          myChart.hideLoading();
        }
      })
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

注意

如果一个图表需要展示不同数据时,每获取一次数据,图表都会重新渲染一次(例如下拉框中选取数据后,图表切换对应数据)。
可能会出现There is a chart instance already initialized on the dom.这样的警告,意思是dom上已经初始化了一个图表实例。
解决办法:可以在每次渲染前先销毁这个实例,然后再重新渲染。

var myChart //先注册全局变量

 axisOption () {
      //在方法内判断,然后销毁实例,然后再初始化
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();//销毁
      }
      // 基于准备好的dom,初始化echarts实例
      myChart = echarts.init(document.getElementById('axisMain'))
      const option = { }
      // 绘制图表
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },

总结

到此这篇关于ECharts调用接口获取后端数据的四种方法的文章就介绍到这了,更多相关ECharts调用接口获取后端数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-11-09

Vue&nbsp;echarts模拟后端数据流程详解

目录 KOA2的使用 安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件 写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可 以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口 模拟服务

vue.js前后端数据交互之提交数据操作详解

本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

vue.js+boostrap项目实践(案例详解)

一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

vue组件三大核心概念图文详解

前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,

微信小程序支付及退款流程详解

首先说明一下,微信小程序支付的主要逻辑集中在后端,前端只需携带支付所需的数据请求后端接口然后根据返回结果做相应成功失败处理即可.我在后端使用的是php,当然在这篇博客里我不打算贴一堆代码来说明支付的具体实现,而主要会侧重于整个支付的流程和一些细节方面的东西.所以使用其他后端语言的朋友有需要也是可以看一下的.很多时候开发的需求和相应问题的解决真的要跳出语言语法层面,去从系统和流程的角度考虑.好的,也不说什么废话了.进入正题. 一. 支付 支付主要分为几个步骤: 前端携带支付需要的数据(商品id,购

Vue项目接入Paypal实现示例详解

一.支付流程 在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验. 二.实现方案 接入方式 优点 缺点 相关资料 在html中插入paypal的script脚本 实现方式比较简单 1.安全性问题:公司的client_id会暴露在代码中 2.引用的按钮样式比较难自定义 官方文档:https://developer.paypal.com/docs/checkout/integr

Java代码生成器的制作流程详解

1. 前言 前几天写了篇关于Mybatis Plus代码生成器的文章,不少同学私下问我这个代码生成器是如何运作的,为什么要用到一些模板引擎,所以今天来说明下代码生成器的流程. 2. 代码生成器的使用场景 我们在编码中存在很多样板代码,格式较为固定,结构随着项目的迭代也比较稳定,而且数量巨大,这种代码写多了也没有什么技术含量,在这种情况下代码生成器可以有效提高我们的效率,其它情况并不适于使用代码生成器. 3. 代码生成器的制作流程 首先我们要制作模板,把样板代码的固定格式抽出来.然后把动态属性绑定

vue组件间通信子与父详解(二)

接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发

Redis Sentinel服务配置流程(详解)

1.Redis Sentinel服务配置 1.1简介 Redis 的 Sentinel 系统用于管理多个 Redis 服务器(instance), 该系统执行以下三个任务: 监控(Monitoring): Sentinel 会不断地检查你的主服务器和从服务器是否运作正常. 提醒(Notification): 当被监控的某个 Redis 服务器出现问题时, Sentinel 可以通过API 向管理员或者其他应用程序发送通知. 自动故障迁移(Automatic failover): 当一个主服务器不

vue实现简单表格组件实例详解

本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩

java存储以及java对象创建的流程(详解)

java存储: 1)寄存器:这是最快的存储区,位于处理器的内部.但是寄存器的数量有限,所以寄存器根据需求进行分配.我们不能直接进行操作. 2)堆栈:位于通用RAM中,可以通过堆栈指针从处理器那里获取直接支持.堆栈指针往下移动,则分配新的内存.网上移动,则释放内存.但是 在创建程序的时候必须知道存储在堆栈中的所有项的具体生命周期,以便上下的移动指针.一般存储基本类型和java对象引用. 3)堆:位于通用RAM中,存放所有的java对象,不需要知道具体的生命周期. 4)常量存储:常量值通常直接存放在