Vue中的echarts图表如何实现loading效果
更新时间：2022年08月10日 10:40:04 作者：June.1
这篇文章主要介绍了Vue中的echarts图表如何实现loading效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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来展示数据。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇vue axios 表单提交上传图片的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了详解vue组件化开发-vuex状态管理库，具有一定的参考价值，有兴趣的可以了解一下。2017-04-04
这篇文章主要介绍了vue传值的编码和解码方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了深入解析Vue的自定义指令,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑,一个自定义指令由一个包含类似组件生命周期钩子的对象来定义,需要的朋友可以参考下2023-05-05
今天小编就为大家分享一篇解决axios post 后端无法接收数据的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。下面通过实例代码给大家介绍vue2中filter()的相关知识，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了在vue项目中使用md5加密的方法,需要的朋友可以参考下2018-09-09
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
这篇文章主要介绍了Vue+elementui 实现复杂表头和动态增加列的二维表格功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
npm ERR! code E404在vscode安装插件时报错的两种解决方案
这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下2023-04-04
解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate
这篇文章主要介绍了解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论