Vue中的echarts图表如何实现loading效果
短信预约 -IT技能 免费直播动态提醒
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来展示数据。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
