这篇文章主要讲解了“Vue中的echarts图表怎么实现loading效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中的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>今天在写后台项目的时候，使用echarts来绘制图表。下面来说说怎么使用echarts。
echarts地址：https://echarts.apache.org/zh/index.html
效果：
代码：
在vue项目中使用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 > <!-- 为Echarts准备一个Dom --> <div id="main" ></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" ></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中的echarts图表怎么实现loading效果”的内容了，经过本文的学习后，相信大家对Vue中的echarts图表怎么实现loading效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
