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();
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/322571.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI能否真的取代程序员?

一个Java程序员从接到需求到最终开发完功能的流程大致如下 首先是理解原型图,设计表结构根据表结构编写增删改查代码与前端联调,完成功能开发 那么以上步骤AI能不能完成呢? 让我们试一下: 第一步,使用 AI助手 解析流…

【AI】无人零售和边缘计算

目录 一、什么是边缘计算 1.1 边缘计算的定义 1.2 边缘计算的作用 1.3 边缘计算的关键技术 1.4 边缘计算的应用场景 二、边缘计算在无人零售中的应用 一、什么是边缘计算 1.1 边缘计算的定义 边缘计算(Edge Computing)是一种分布式计算范式&#…

Android 事件机制探讨(1)

事件的传递主要有三个方法:dispatchTouchEvent(事件分发)、onInterceptTouchEvent(事件拦截)、onTouchEvent(事件消费)。如下图: 仔细看的话,图分为3层,从上往下依次是Activity、ViewGroup、View事件从左上角那个白色箭头开始&…

ssm基于WEB技术的在线商品交易平台的设计+vue论文

在线商品交易平台的设计与实现 摘要 近年来,信息化管理行业的不断兴起,使得人们的日常生活越来越离不开计算机和互联网技术。首先,根据收集到的用户需求分析,对设计系统有一个初步的认识与了解,确定在线商品交易平台的…

芯品荟 | 测亩仪市场调研报告

一、产品简介 1、什么是测亩仪? 测亩仪,又称面积测量仪,采用了卫星定位系统与高精度算法技术原理,可以精准测量出土地、水域的距离、周长、面积等数据的有效工具,被广泛应用于农田、林业、水域、公路、机械作业、野外…

OpenAIOps社区线上宣讲会圆满召开,期待您的加入!

2024年1月12日“OpenAIOps社区”线上宣讲会圆满召开,群体智慧协同创新社区的创立为AIOps领域未来发展注入了活力。OpenAIOps社区是一个AIOps开源社区及创新平台,由中国计算机学会(CCF)、清华大学、南开大学、中科院、国防科大、必示科技等单位共同发起&a…

智慧公厕:颠覆传统公共厕所管理的未来之路

公共卫生设施一直是城市管理中的重要环节,而智慧公厕作为一种全新的公用卫生设施,以其融合了物联网、大数据、云计算等新型信息技术的特点,引起了人们的广泛关注。通过智能化手段的管理和服务,智慧公厕不仅解决了传统公厕中存在的…

20240111在ubuntu20.04.6下解压缩RAR格式的压缩包

20240111在ubuntu20.04.6下解压缩RAR格式的压缩包 2024/1/11 18:25 百度搜搜:ubuntu rar文件怎么解压 rootrootrootroot-X99-Turbo:~/temp$ ll total 2916 drwx------ 3 rootroot rootroot 4096 1月 11 18:28 ./ drwxr-xr-x 25 rootroot rootroot 4096 1月…

C语言多线程基础(pthread)

1.线程和进程的概念 线程:进程中的一个实体,是CPU调度和分派的基本单位。可以与同属一个进程的其它线程共享进程所拥有的全部资源。一个线程可以创建和撤销另一个线程,同一进程中的多个线程之间可以并发执行,线程在运行中呈现间断…

MYSQL的事务隔离

本章概览 mysql是一个支持多引擎的系统,并不是所有引擎都支持事务,本篇以innodb为例解析mysql在事务支持的实现。提到事务一定会想到ACID(Atomicity、Consistency、Isolation、Durability,即原子性、一致性、隔离性、持久性),今天…

Open CV 图像处理基础:(一)Open CV 在windows环境初始化和 Java 动态库加载方式介绍

Open CV 在windows环境初始化和 Java 动态库加载方式介绍 目录 Open CV 在windows环境初始化和 Java 动态库加载方式介绍前言OpenCV安装opencv-4.4.0下载安装 加载opencv-4.4.0.jar包jar包引入mavn-init.cmdjar包装载到本地maven仓库pom.xml加载动态库 加载动态库opencv_java44…

如何用Docker部署Nacos服务并结合内网穿透实现公网访问管理界面?

文章目录 1. Docker 运行Nacos2. 本地访问Nacos3. Linux安装Cpolar4. 配置Nacos UI界面公网地址5. 远程访问 Nacos UI界面6. 固定Nacos UI界面公网地址7. 固定地址访问Plik Nacos是阿里开放的一款中间件,也是一款服务注册中心,它主要提供三种功能:持久化…

App加固:不同类型和费用对比

文章目录 [TOC]引言应用程序加固是什么不同类型[App加固](https://www.ipaguard.com/)的费用对比基础加固高级加固云加固 白嫖的混淆加密工具](https://www.ipaguard.com/)-[ipaguard总结参考资料 引言 在当前移动应用市场中,安全性已经成为一个非常重要的话题。为…

ESP系列入门教程(一)——之用继电器简单驱动一个LED【附 ESP32 / ESP8266 通用代码】

ESP系列入门教程<一> 概要技术名词简介● ESP系列简介 硬件连接实现●ESP8266 引脚图●ESP32 引脚图 代码实现●Demo_1&#xff1a;控制LED闪烁●Demo_2&#xff1a;利用继电器驱动LED亮灭 概要 最近在跟着几个大佬的教学视频做项目。陆续会更新记录一些要点&#xff0c…

音频接口选型可应用于安防 音响 车载等产品中 高性能国产芯片

在人工智能兴起之后&#xff0c;安防市场就成为了其全球最大的市场&#xff0c;也是成功落地的最主要场景之一。对于安防应用而言&#xff0c;智慧摄像头、智慧交通、智慧城市等概念的不断涌现&#xff0c;对于芯片产业催生出海量需求。今天&#xff0c;我将为大家梳理GLOBALCH…

腾讯云价格计算器怎么用?太简单了一键报价

腾讯云服务器价格计算器可以一键计算出云服务器的精准报价&#xff0c;包括CVM实例规格价格、CPU内存费用、公网带宽收费、存储系统盘和数据盘详细费用&#xff0c;腾讯云百科txybk.com分享腾讯云价格计算器链接入口、使用方法说明&#xff1a; 腾讯云服务器价格计算器 打开腾…

第9章 通信动力与环境

文章目录 9.1.1 动力与环境的组成9.1.2 动力与环境的特点9.1.3 动力与环境的地位与作用9.1.4 动力与环境的基本要求9.2.1 通信电源的组成和结构9.2.2 交流供电系统1、交流供电系统的组成2、市电交流供电的质量指标3、常用高压电电器4、电力变压器5、常用低压电器6、油机发电机组…

深入解析JavaScript中的函数绑定和命名函数表达式

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 函数是JavaScript中最重要的组成部分之一。但是函数的this绑定和作用…

arcgis javascript api4.x加载天地图wgs84(wkid:4326)坐标系

需求&#xff1a; 使用arcgis javascript api4.x以basetilelayer方式加载天地图wgs84&#xff08;wkid&#xff1a;4326&#xff09;坐标系 效果&#xff1a; 代码&#xff1a; 提示&#xff1a;&#xff08;下述三个文件放同一个文件夹下&#xff09; 4326.js define([ex…

银行接口测试学习笔记:接口测试从分析到设计!

一、接口测试流程 01\接口测试计划 制定:人员,工具/平台,脚本,时间,标准,输出接口测试计划文档 02\银行接口文档解析 ①.接口名称:说明接口的作用,不用测试 ②.接口地址:http开头,和URL一样,不用测试 ③.请求方式:post/get/delete/put, 当一个接口有多个方式的时候是需要进…