main.js全局注冊(cè)v-chart組件
import VueECharts from "vue-echarts";
Vue.component("v-chart", VueECharts);
在頁(yè)面中使用
如上圖，我開(kāi)始寫(xiě)的靜態(tài)數(shù)據(jù)，在data中定義了chartOption1:{…配置項(xiàng)…}, 在接口數(shù)據(jù)返回之后，更新了配置項(xiàng)，在本地開(kāi)發(fā)環(huán)境可以正常渲染。但是線上環(huán)境出不來(lái)，也不報(bào)錯(cuò)，接口數(shù)據(jù)一切正常。
解決辦法：
無(wú)奈最后沒(méi)有使用‘vue-echarts’這個(gè)庫(kù)，用了echarts原生寫(xiě)法。
引入：
import * as echarts from "echarts";
初始化echarts文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-802600.html
inintEcharts() {
const myChart = echarts.init(document.getElementById("dayReport"));
// 這里的this.chartOption1配置項(xiàng)，里面的數(shù)據(jù)是從接口獲取的。
myChart.setOption(this.chartOption1);
// 自適應(yīng)窗口
window.addEventListener("resize", () => {
myChart.resize();
myChart2.resize();
});
},
在接口獲取數(shù)據(jù)以后，調(diào)用inintEcharts方法文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-802600.html
//...調(diào)用接口獲取數(shù)據(jù)，賦值配置項(xiàng)this.chartOption1
this.$nextTick(() => {
this.ininEcharts();
})
到了這里，關(guān)于vue-echarts踩坑，本地開(kāi)發(fā)可以渲染echarts圖表，線上環(huán)境圖表渲染不出來(lái)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
