溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
