Vue中的echarts图表如何实现loading效果

目录
  • echarts图表实现loading效果
  • Vue使用echarts图表总结
    • 安装echarts依赖
    • 创建图表
    • 在页面中的使用(在这里我用的局部引入)

echarts图表实现loading效果

main.js 中配置Vue属性ecahrts

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts 
  • data() 初始化数据调用数据
  • mounted() 周期函数内获取画布节点,并且调用加载loading和图表渲染
  • computed计算属性内定义echarts渲染内容以及数据请求

当服务器返回数据 hideLoading()

注意:loading方法要定义在计算属性的get方法中,set可以不做任何定义。这样图表于loading样式在画布上不会冲突

    <template>
        <div>
            <div class="echarts-wrap">
                <div id="dev-echarts"></div>
            </div>
        </div>
    </template>
    <script>
        export default {
            name: "echarts",
            data() {
                return {
                    one: [],
                    two: [],
                    three: [],
                    four: []
                }
            },
            mounted() {
                this.echartsG = this.$echarts.init(document.getElementById('dev-echarts'), 'dark');
                this.loading
                this.initDrawDevEchart
            },
            computed: {
                initDrawDevEchart() {
                    this.$axios.get("getEchartsUrl", {
                        params: {
                            id: 1
                        }
                    }).then((response) => {
                        this.one= response.data.one
                        this.two= response.data.two
                        this.three= response.data.three
                        this.xAxis= response.data.xaxis
    
                        this.echartsG.hideLoading()
                        let optionG = {
                            backgroundColor: 'rgba(128, 128, 128, 0)',
                            title: {
                                text: 'loading效果演示',
                            },
                            dataZoom: {},
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['一', '二', '三']
                            },
                            xAxis: {
                                type: 'category',
                                // 调整柱状图位置
                                boundaryGap: true,
                                data: this.xAxis
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '一',
                                    type: 'bar',
                                    data: this.one,
                                },
                                {
                                    name: '二',
                                    type: 'bar',
                                    data: this.two
                                },
                                {
                                    name: '三',
                                    type: 'bar',
                                    data: this.three
                                }
                            ]
                        };
                        this.echartsG.setOption(optionG);
                    }).catch((err => {
                        console.log(err)
                    }))
    
                },
                loading: {
                    get: function () {
                        this.echartsG.setOption({
                            backgroundColor: 'rgba(128, 128, 128, 0)',
                            legend: {
                                data: ['一', '二', '三']
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: true,
                                data: []
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '一',
                                    type: 'bar',
                                    data: []
                                },
                                {
                                    name: '二',
                                    type: 'bar',
                                    data: []
                                },
    
                                {
                                    name: '三',
                                    type: 'bar',
                                    data: []
                                }
                            ]
    
                        });
                        this.echartsG.showLoading({
                            text: '统计中,请稍候...'
                            , maskColor: 'rgba(3,3,8,0.5)',
                            textColor: '#fff600'
                        });
                    },
                    set(e) {
                    }
                }
            }
        }
</script>    

Vue使用echarts图表总结

今天在写后台项目的时候,使用echarts来绘制图表。下面来说说怎么使用echarts。

echarts地址:https://echarts.apache.org/zh/index.html

效果

代码

在vue项目中使用echarts图表的步骤:

安装echarts依赖

npm install echarts -S

或者使用淘宝的镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

创建图表

一、全局引入

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

二、局部引入(在需要的页面中引入)

import echarts from "echarts";

在页面中的使用(在这里我用的局部引入)

完整的代码

<template>
  <div>
    <!-- 面包屑 -->
    <BreadCrumb level1="数据统计" level2="数据报表"></BreadCrumb>
    <!-- 内容 -->
    <el-card style="margin-top:20px;">
      <!-- 为Echarts准备一个Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>
    </el-card>
  </div>
</template>
<script>
import { getReports } from "../../http/api";
import echarts from "echarts";
import _ from "lodash";
export default {
  data() {
    return {
      // 需要合并的数据
      options: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }
    };
  },
  mounted() {
    this.reports();
  },
  methods: {
    async reports() {
      var myChart = echarts.init(document.getElementById("main"));
      const res = await getReports();
      console.log(res);
      const resultJieg = _.merge(res.result, this.options);
      //   展示数据
      myChart.setOption(resultJieg);
    }
  }
};
</script>
<style></style>

解释

1、需要在页面上给一个挂载点

		<!-- 为Echarts准备一个Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>

2、在data里面定义一下

// 需要合并的数据
      options: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }

3、初始化数据

  mounted() {
    this.reports();
  },
  methods: {
    async reports() {
    //获取在页面中挂载的数据
      var myChart = echarts.init(document.getElementById("main"));
      //调用接口(即后台返回的数据)
      const res = await getReports();
      console.log(res);
      //使用lodash来合并数据
      const resultJieg = _.merge(res.result, this.options);
      //   展示数据
      myChart.setOption(resultJieg);
    }
  }

总结一下:

在vue中使用echarts图表,分为二步:

1.在页面中给图表一个挂载的元素。

2.在mounted的函数里初始化数据。

  • 通过echarts.init来拿到页面中挂载的节点。
  • 调用数据
  • 最后通过setOption来展示数据。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 在vue中使用echarts图表实例代码详解

    安装vue依赖 使用npm npm install echarts --save 使用yarn yarn add echarts 使用国内的淘宝镜像: //安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org //从淘宝镜像下载 cnpm install echarts -S 引入ECharts 安装好的ECharts会放在node_modules目录下. 全部引入 1.直接在项目代码引入 可以直接在项目代码中

  • vue使用echarts图表的详细方法

    本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下 该示例使用 vue-cli  脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts fro

  • 在Vue中使用echarts的实例代码(3种图)

    前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换

  • vue-cli项目中使用echarts图表实例

    我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D3 它

  • Vue中的echarts图表如何实现loading效果

    目录 echarts图表实现loading效果 Vue使用echarts图表总结 安装echarts依赖 创建图表 在页面中的使用(在这里我用的局部引入) echarts图表实现loading效果 main.js 中配置Vue属性ecahrts // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts  data() 初始化数据调用数据 mounted() 周期函数内获取画布节点,并且调用加载loadi

  • 在vue中添加Echarts图表的基本使用教程

    前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D

  • 在Vue中使用echarts的方法

    上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块 在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入 上面全局引入会将所有的echarts图表打包,导致体积过大,我

  • Vue中使用Echarts可视化图表宽度自适应的完美解决方案

    目录 一.问题阐述: 二.解决思路: 三.最终效果: 一.问题阐述: 开发H5项目中应用到Echarts数据可视化,由于H5主要使用在手机,屏幕宽度大大限制了图表的展现,问题如下. 上图中x轴的数据是动态的,从2022年切换到2021年数据变化,此时如果x轴的数据过多就会显得格外拥挤. 二.解决思路: 我的解决方案是,在放置Echarts的容器(div)外层再套一层容器(div),外层容器宽度固定设置手机屏幕宽,并设置溢出显示滚动条(width: 100%;overflow: auto),内层E

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • 在vue中使用echarts(折线图的demo,markline用法)

    公司最近在用vue开发项目,项目接近尾声了,趁休息时间写点demo-- vue引入echarts(折线图的demo) 主要是解决引入echarts,markline的使用(基准线) 这是demo的效果图: vue脚手架不多赘述 1.安装依赖 cnpm install echarts -S 2.在main.js中引入echarts import echarts from 'echarts' 3.在main.js中安装 Vue.prototype.echarts = echarts; 一般来说能正常

  • 在vue中实现echarts随窗体变化

    <div id="myChart" :style="{width: '100%', height: '345px'}"></div> <script> export default { mounted(){ this.drawLine(); }, methods: { drawLine(){ var myChartContainer = document.getElementById('myChart'); //用于使chart自

  • 在Vue中使用Echarts实例图的方法实例

    前言 由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件.但是新手猛的上手的话,可能会有点束手无策,所以这篇就是来写一点入门的内容,外加自己一点的小心得. 一.首先要在项目中下载echarts依赖 npm install echarts -S //或者使用淘宝的镜像 cnpm install echarts -S 二.然后就要再main.js文件中来进行全局引入 // 引入echarts import echarts from 'echarts' Vu

随机推荐