uses iview-admin as the front-end template. I don"t know much about the front-end. Currently, I want to request the data to be updated to the chart through api, but the echart in iview-admin seems to have been instantiated and the data cannot be changed.
<template>
<div ref="chart" class="chart"></div>
</template>
<style>
.chart {
width: 100%;
height: 400px;
}
</style>
<script>
export default {
data() {
return {
myChart: null,
option: {
// echarts
}
}
},
methods: {
chartResizeFn() {
this.$nextTick(() => {
this.myChart.resize();
});
},
//
tabSwitchFn(){
this.chartResizeFn();
}
},
mounted() {
this.myChart = this.myChart || this.echarts.init(this.$refs.chart);
// ajax
// axios.get('url').then((data)=>{
// this.option=data.option;
// })
this.myChart.setOption(this.option);
this.$nextTick(() => {
//
window.addEventListener("resize", this.chartResizeFn);
});
},
destroyed() {
// resize
window.removeEventListener("resize", this.chartResizeFn);
}
};
</script>as shown in the figure, when I click on the number of pages, I actually go to the background to paginate the query. When I click on the second page, there are six pieces of data. When I click on the query above, I re-ajax the request. At this time, t...
when you look at the iview-admin source code, you can see that the data in the frame is simulated, such as the data filled in table method: export const getTableData = () = > { return axios.request ({) url: get_table_data , method: get }) } al...