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来展示数据。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读

    vue项目一些常见问题

    vue项目一些常见问题,组件,样式,**样式污染问题**同样的样式不需要在每个组件都复制组件内单独的样式加外层class包裹。加scope。否则只是

    01-Vue项目实战-网易云音乐-准备工作

    01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来的一段时间,我会仿照网易云音乐,利用Vue开发一个移动端的网易云音乐项目。在做

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自己的,后台,后台框架一直想开发一套完全属于自己的后台,但是18年的时候,曾经答

    yum出现Error downloading packages错误

    yum出现Error downloading packages错误,错误,文件,yum出现Error downloading packages错误错误表现方式:yum可以list,可以clean cache,但是

    Vue项目中 App.vue文件

    Vue项目中 App.vue文件,文件,内容, 在App.vue文件中,定义了一个id为app的div,在这个div板块中放置Helloworld组件,文件内容如下图所示:在

    1-Vue构造函数的生成

    1-Vue构造函数的生成,函数,属性,版本:@2.6.10环境:web ;思维图:www.processon.com/view/link/5…我们使用的Vue是一个经过层层加强的构造函数

    vue的跨域是什么意思

    vue的跨域是什么意思,跨域,浏览器,代理,请求,服务器,同源策略,在vue中,跨域是指浏览器不能执行其他网站的脚本;它是浏览器同源策略造成的,是浏览器

    Vue中如何实现表单验证

    Vue中如何实现表单验证,验证,表单验证,表单,用户名,元素,指令,随着web应用的不断发展,表单验证逐渐成为web开发过程中不可或缺的一部分。在Vue中

    用vue框架有什么好处

    用vue框架有什么好处,组件,项目,数据,优化,操作,框架,用vue的好处:1、Vue是组件化开发,减少代码的书写,使代码易于理解;2、可以对数据进行双向绑定;3