ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法總結(jié)
更新時(shí)間：2022年11月12日 09:51:54 作者：哇哦Q
echarts是我們經(jīng)常用到的數(shù)據(jù)可視化圖形,但是后端反饋給我們的數(shù)據(jù)經(jīng)常是數(shù)組包對(duì)象的集合類(lèi)型,下面這篇文章主要給大家介紹了關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法,需要的朋友可以參考下
使用eacharts做大屏，需要使用后端數(shù)據(jù)，下面的方法是自己試過(guò)有效的，有什么不對(duì)的，望各位大佬指點(diǎn)。
方法一：在mounted中使用定時(shí)器調(diào)用eacharts方法（定時(shí)器可以獲取到data中的數(shù)據(jù)）
mounted () {
setTimeout(() => {
this.axisOption() // 樹(shù)狀
this.pieOption()//餅圖
}, 2000)
},
//或者
mounted () {
setTimeout(async () => {
const res = await Getwx()
this.Monthlist = res.Data.Monthlist
this.Visitpvlist = res.Data.Visitpvlist
this.drawLine();//柱狀圖
}, 0);
},方法二：在調(diào)用數(shù)據(jù)的時(shí)候調(diào)用圖表（一個(gè)頁(yè)面的所有數(shù)據(jù)都在這一個(gè)接口中）
created () {
this.GetProjectAll (）
},
methods: {
// 獲取數(shù)據(jù)
async GetProjectAll () {
const res = await GetProjectAll({ projectid: this.formdata.type })
this.tableData = res.data.jrgrsl.data
this.pieData = res.data.clbp.data
this.$nextTick(() => {
this.axisOption() // 樹(shù)狀
this.pieOption()//餅圖
})
},
}方法三：使用chartes中的dataset數(shù)據(jù)集
<script>
import * as echarts from 'echarts'
import { getStatistics } from '@/api/home'
export default {
data () {
return {
mainData: [],//折線(xiàn)圖數(shù)據(jù)
}
},
mounted () {
this.chartSetting();
},
created () {
this.CeData()
},
methods: {
// 返回?cái)?shù)據(jù)
async CeData () {
const { data } = await getStatistics()
this.mainData = data.mainData
},
// 折現(xiàn)圖
chartSetting () {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
this.mainChart = echarts.init(document.getElementById('main'))
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
dataset: [ // 數(shù)據(jù)
{ source: this.mainData // 表數(shù)據(jù) },
{ transform: {
type: 'sort'
}
}
],
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: { // 底部文字設(shè)置
interval: 0, // 控制是否全部顯示
fontSize: 12
},
axisLine: { // 底部橫線(xiàn)
show: false
},
axisTick: { // 刻度線(xiàn)
show: false
}
}
],
yAxis: [
{ type: 'value' }
],
series: [
{
name: '項(xiàng)目',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: { width: 1, color: '#2e3192' },
showSymbol: false,
label: { show: true, position: 'top' },
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#62a0f8' },
{ offset: 1, color: '#b5d5ff' }
])
},
markPoint: { // 最大值和最小值標(biāo)注
data: [
{ type: 'max', name: '最大值' }
]
},
emphasis: { focus: 'series' }
}
]
}
// 繪制圖表
this.mainChart.setOption(option)
const that = this
window.addEventListener('resize', function () {
that.mainChart.resize()
})
},
}
}
</script>方法四：在對(duì)應(yīng)圖表中，用ajax請(qǐng)求
drawLine2 () {
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: "11%",
width: "80%",
height: "60%"
},
legend: [{
data: ['單位: 秒'],
top: "10",
left: "10",
itemWidth: 8,
itemHeight: 8,
icon: "rect",
textStyle: {
color: "#fff"
}
}, {
data: ['增速%'],
top: "10",
right: "5%",
itemWidth: 8,
itemHeight: 8,
icon: "rect",
textStyle: {
color: "#fff"
}
}],
xAxis: [
{
type: 'category',
data: [],
axisPointer: {
type: 'shadow'
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
color: '#b8b8ba',
},
}
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 10000,
interval: 2000,
axisLabel: {
formatter: function (value) {
return value + ""
},
textStyle: {
color: '#b8b8ba',
},
},
axisLine: {
show: true
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
width: 0.5
}
},
symbol: "triangle"
},
{
type: 'value',
min: 0.4,
max: 0.9,
interval: 0.1,
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#b8b8ba',
},
},
splitLine: {
show: true,
lineStyle: {
width: 0.5
}
},
}
],
series: [
{
name: '單位: 秒',
type: 'bar',
data: [],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#01c7f4' },
{ offset: 1, color: '#003fe2' }
]),
borderRadius: 8
},
barWidth: 10
},
{
name: '增速%',
type: 'line',
areaStyle: {},
yAxisIndex: 1,
data: [],
itemStyle: {
color: "#77ff3b",
},
lineStyle: {
width: 1
},
symbolSize: 7,
areaStyle: {
opacity: 0.4,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: '#040d0c' },
{ offset: 0, color: '#5cd62c' }
])
},
}
]
};
const zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
option && myChart.setOption(option);
$.ajax({
type: "get",
// async: false, //同步執(zhí)行
url: "api/WxStatistics/GetStatisticsData",
data: {},
success: function (result) {
myChart.setOption({
xAxis: { data: result.Data.Monthlist },
series: [
{
data: result.Data.Staytimeuvlist,
},
{
data: [0.6, 0.65, 0.65, 0.68, 0.58, 0.61, 0.58, 0.6, 0.61, 0.65, 0.63, 0.55],
}
]
})
},
error: function (errorMsg) {
alert("不好意思，圖表請(qǐng)求數(shù)據(jù)失敗啦!");
myChart.hideLoading();
}
})
window.addEventListener("resize", function () {
myChart.resize();
});
},注意
如果一個(gè)圖表需要展示不同數(shù)據(jù)時(shí)，每獲取一次數(shù)據(jù)，圖表都會(huì)重新渲染一次（例如下拉框中選取數(shù)據(jù)后，圖表切換對(duì)應(yīng)數(shù)據(jù)）。
可能會(huì)出現(xiàn)There is a chart instance already initialized on the dom.這樣的警告，意思是dom上已經(jīng)初始化了一個(gè)圖表實(shí)例。
解決辦法：可以在每次渲染前先銷(xiāo)毀這個(gè)實(shí)例，然后再重新渲染。
var myChart //先注冊(cè)全局變量
axisOption () {
//在方法內(nèi)判斷，然后銷(xiāo)毀實(shí)例，然后再初始化
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose();//銷(xiāo)毀
}
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
myChart = echarts.init(document.getElementById('axisMain'))
const option = { }
// 繪制圖表
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
},總結(jié)
到此這篇關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法的文章就介紹到這了,更多相關(guān)ECharts調(diào)用接口獲取后端數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了微信小程序滑塊驗(yàn)證方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
JavaScript通過(guò)mouseover()實(shí)現(xiàn)圖片變大效果的示例
下面小編就為大家分享一篇JavaScript通過(guò)mouseover()實(shí)現(xiàn)圖片變大效果的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助2017-12-12
javascript代碼編寫(xiě)需要注意的7個(gè)小細(xì)節(jié)小結(jié)
每種語(yǔ)言都有它特別的地方，對(duì)于JavaScript來(lái)說(shuō)，使用var就可以聲明任意類(lèi)型的變量，這門(mén)腳本語(yǔ)言看起來(lái)很簡(jiǎn)單，然而想要寫(xiě)出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的。本文利列舉了JavaScript初學(xué)者應(yīng)該注意的七個(gè)細(xì)節(jié)，與大家分享。2011-09-09
JavaScript動(dòng)態(tài)生成表格的示例
這篇文章主要介紹了JavaScript動(dòng)態(tài)生成表格的示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了JavaScript異步編程之Promise的初步使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
原生JS實(shí)現(xiàn)分頁(yè)點(diǎn)擊控件
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)分頁(yè)點(diǎn)擊控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了詳解CocosCreator游戲之魚(yú)群算法，對(duì)算法感興趣的同學(xué)，可以仔細(xì)參考下2021-04-04
JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法,實(shí)例分析了javascript操作拖動(dòng)層的技巧,需要的朋友可以參考下2015-03-03
js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車(chē)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車(chē)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02