Currently, I am incorporating axios into my vue.js application to perform an HTTP POST request and retrieve some variables for a vue-echart. However, I have encountered a bit of a roadblock in determining the most effective approach.
The snippet below is extracted from my dashboard.vue file:
<script>
import { echartBar, echartPie } from "@/data/echarts";
import { echart1, echart2, echart3 } from "@/data/dashboard1";
export default {
metaInfo: {
title: "Dashboard v1"
},
mounted () {
axios
.post('https://testsite.com', 'Request data here')
.then(response => {
this.dataNeeded = response.data
console.log(info)
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
},
data() {
return {
echartBar,
echartPie,
echart1,
echart2,
echart3,
};
}
};
</script>
<style>
.echarts {
width: 100%;
height: 100%;
}
</style>
Below is the constant exported from echarts.js:
var dark_heading = "#c2c6dc";
var chartLabels = ['Test1', 'Test2']
import { zoomBarData } from '@/data/echartSeries'
// start::echartBar
export const echartBar = {
legend: {
borderRadius: 0,
orient: 'horizontal',
x: 'right',
data: chartLabels
},
grid: {
left: '8px',
right: '8px',
bottom: '0',
containLabel: true
},
tooltip: {
show: true,
backgroundColor: 'rgba(0, 0, 0, .8)'
},
xAxis: [{
type: 'category',
data: dataNeeded.months,
axisTick: {
alignWithLabel: true,
},
splitLine: {
show: false
},
axisLabel: {
color: dark_heading,
},
axisLine: {
show:true,
color: dark_heading,
lineStyle: {
color: dark_heading,
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
color: dark_heading,
formatter: '${value}'
},
axisLine: {
show:false,
color: dark_heading,
lineStyle: {
color: dark_heading,
}
},
min: 0,
max: 100000,
interval: 25000,
splitLine: {
show: true,
interval: 'auto'
}
}],
series: [{
name: chartLabels[0],
data: dataNeeded.amounts,
label: { show: false, color: '#0168c1' },
type: 'bar',
barGap: 0,
color: '#bcbbdd',
smooth: true,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: -2,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
},
{
name: chartLabels[1],
data: dataNeeded.amounts2,
label: { show: false, color: '#639' },
type: 'bar',
color: '#7569b3',
smooth: true,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: -2,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
}
]
}
If my aim is to substitute the data retrieved from the axios JSON response for the hardcoded data in echarts.js (as an exported constant), what would be the optimal solution?