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调用接口获取后端数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue echarts模拟后端数据流程详解

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

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

    目录 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) 方法二:在调用数据的时候调用图表(一个页面的所有数据都在这一个接口中) 方法三:使用chartes中的dataset数据集 方法四:在对应图表中,用ajax请求 注意 总结 使用eacharts做大屏,需要使用后端数据,下面的方法是自己试过有效的,有什么不对的,望各位大佬指点. 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) mounted (

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

  • php获取POST数据的三种方法实例详解

    php获取POST数据的三种方法 方法一,$_POST $_POST或$_REQUEST存放的是PHP以key=>value的形式格式化以后的数据. 方法二,使用file_get_contents("php://input") 对于未指定 Content-Type 的POST数据,则可以使用file_get_contents("php://input");来获取原始数据. 事实上,用PHP接收POST的任何数据均使用本方法.而不用考虑Content-Type,

  • PHP获取POST数据的几种方法汇总

    一.PHP获取POST数据的几种方法 方法1.最常见的方法是:$_POST['fieldname']; 说明:只能接收Content-Type: application/x-www-form-urlencoded提交的数据 解释:也就是表单POST过来的数据 方法2.file_get_contents("php://input"); 说明: 允许读取 POST 的原始数据. 和 $HTTP_RAW_POST_DATA 比起来,它给内存带来的压力较小,并且不需要任何特殊的 php.ini

  • java获取当前时间的四种方法代码实例

    这篇文章主要介绍了java获取当前时间的四种方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种:Date类 public class DateDemo { public static void main(String[] args) { Date day = new Date(); SimpleDateFormat dft = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); S

  • SQL Server数据库中批量导入数据的四种方法总结

    在软件项目实施的时候,数据导入一直是项目人员比较头疼的问题.其实,在SQL Server中集成了很多成批导入数据的方法.有些项目实施顾问头疼的问题,在我们数据库管理员眼中,是小菜一碟.现在的重点就是,如何让用户了解这些方法,让数据导入变得轻松一些. 第一:使用Select Into语句 若企业数据库都采用的是SQL Server数据库的话,则可以利用Select Into语句来实现数据的导入.Select Into语句,他的作用就是把数据从另外一个数据库中查询出来,然后加入到某个用户指定的表中.

  • 详解vue 配合vue-resource调用接口获取数据

    1.先用node+express+mysql简单配置一下后台 const express = require('express'); const mysql = require('mysql'); const static = require('express-static'); const db = mysql.createPool({ host: 'localhost', user: 'nodejs', password: 'nodejs', database:'resume', port:

  • Vue Element前端应用开发之获取后端数据

    概述 在前面随笔<循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理 前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了. 我们通过Vue.config.js的配置信息,可以

  • Python 通过调用接口获取公交信息的实例

    如下所示: # -*- coding: utf-8 -*- import sys, urllib, urllib2, json city=urllib.quote(sys.argv[1]); url = 'http://apis.baidu.com/xiaota/bus_lines/buses_lines?city=%s&bus=%s&direction=%s'%(city,sys.argv[2],sys.argv[3]) print url req = urllib2.Request(u

  • Flask中获取小程序Request数据的两种方法

    Flask中获取小程序Request数据的两种方法 作为后端屌对于前端确实讳莫如深,JS中的类型Object竟然不能直接通过POST传入到后台Flask中,您会发现获取的是[object Object],这货在Flask中只是个Str,哈哈... 于是,开始寻求解决方案: 方案一,通过GET或者POST传参,将Object转换为Str请求数据: 1.在util.js中定义一个JS函数: function json2Form(json) { var str = []; for (var p in

随机推荐