vue-echarts踩坑,本地开发可以渲染echarts图表,线上环境图表渲染不出来

main.js全局注册v-chart组件

import VueECharts from "vue-echarts";
Vue.component("v-chart", VueECharts);

在页面中使用
在这里插入图片描述
如上图,我开始写的静态数据,在data中定义了chartOption1:{…配置项…}, 在接口数据返回之后,更新了配置项,在本地开发环境可以正常渲染。但是线上环境出不来,也不报错,接口数据一切正常。

解决办法:
无奈最后没有使用‘vue-echarts’这个库,用了echarts原生写法。

引入:

import * as echarts from "echarts";

初始化echarts

        inintEcharts() {
   
            const myChart = echarts.init(document.getElementById("dayReport"));
            // 这里的this.chartOption1配置项,里面的数据是从接口获取的。
            myChart.setOption(this.chartOption1);
            // 自适应窗口
            window.addEventListener("resize", () => {
   
                myChart.resize();
                myChart2.resize();
            });
        },

在接口获取数据以后,调用inintEcharts方法

//...调用接口获取数据,赋值配置项this.chartOption1
 this.$nextTick(() => {
   
       this.ininEcharts();
})

最近更新

  1. TCP协议是安全的吗?

    2024-01-13 14:14:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-13 14:14:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-13 14:14:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-13 14:14:02       18 阅读

热门阅读

  1. BIO、NIO、AIO 有什么区别?

    2024-01-13 14:14:02       38 阅读
  2. go最佳实践:如何舒适地编码

    2024-01-13 14:14:02       35 阅读
  3. Entity Framework Core

    2024-01-13 14:14:02       39 阅读
  4. CentOS 7.9下JDK 1.8安装

    2024-01-13 14:14:02       32 阅读
  5. 在 Ubuntu 系统上安装和彻底卸载 MySQL

    2024-01-13 14:14:02       31 阅读