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

news2024/11/14 2:24:45

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学习笔记-MySql数据库介绍与连接

一.MySQL数据库介绍 MySQL是一个关系型数据库管理系统,在 WEB 应用方面,MySQL是最好的 RDMS (Relational Database Management System,关系数据库管理系统) 应用软件,它是由瑞典MySQL AB 公司开发,目前属于 Oracle 旗…

css宽度适应内容

废话不多说,看如下demo,我需要将下面这个盒子的宽度变成内容自适应 方法有很多,如下 父元素设置display:flex 实现子元素宽度适应内容 如下给父元素设置flex能实现宽度自适应内容 <!DOCTYPE html><html lang"en"><head><meta charset"U…

高工微报告|智驾前视一体机趋势

传统智驾前视一体机赛道上&#xff0c;1V3R、1V5R产品如何升级备受关注。 根据日前调研获取的信息&#xff0c;1V3R、1V5R向轻量级行泊一体&#xff08;典型为5V5R12U方案&#xff0c;算力平台5-20TOPS&#xff09;迈进的具体市场空间&#xff0c;仍在验证阶段。 其中&#x…

【MIdjourney】镜头效果关键词

1.景深(depth of field) 景深&#xff08;DOF&#xff09;&#xff0c;是指在摄影机镜头或其他成像器前沿能够取得清晰图像的成像所测定的被摄物体前后距离范围。镜头光圈、镜头距离、及焦平面到拍摄物的距离是影响景深的重要因素。 在MIdjourney中&#xff0c;该关键字会使得…

支付功能测试用例测试点?

支付功能测试用例测试点是指在测试支付功能时&#xff0c;需要关注和验证的各个方面。根据不同的支付场景和需求&#xff0c;支付功能测试用例测试点可能有所不同&#xff0c;但一般可以分为以下几类&#xff1a; 功能测试&#xff1a;主要检查支付功能是否符合设计和业务需求…

Vue-16、Vue列表渲染(v-for的使用)

1、vue遍历数组 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>列表渲染</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js"…

Jenkins使用随笔

1、如果要部署的springboot程序和jenkins在同一台linux上&#xff0c;需要增加一条 export BUILD_IDtomcat_mobile_build_id 如下图&#xff1a; 原因是&#xff1a;jenkins在执行sh脚本的时候&#xff0c;如果脚本中有启动后台进程的情况&#xff0c;例如tomcat的关闭和启动…

FEB(acwing)

文章目录 FEB题目描述输入格式输出格式数据范围输入样例1&#xff1a;输出样例1&#xff1a;输入样例2&#xff1a;输出样例2&#xff1a;输入样例3&#xff1a;输出样例3&#xff1a;代码题解情况1&#xff1a;xxxxxx&#xff1a;0&#xff0c;1&#xff0c;2&#xff0c;…&a…

C#MQTT编程02--报文格式

1、报文结构 在MQTT协议中&#xff0c;一个MQTT数据包由&#xff1a;固定头&#xff08;Fixed header&#xff09;、可变头&#xff08;Variable header&#xff09;、消息体&#xff08;Payload&#xff09;三部分构成。 注意2点&#xff1a; 1&#xff09;所有的数据包结构…

【国产车规级SoC芯片型号介绍-LT9211】

近日&#xff0c;龙迅半导体股份有限公司宣布推出LT9211系列车规级SoC芯片——LT9211。该芯片提供7.5*7.5mm封装&#xff0c;可满足对于尺寸及空间比较敏感的车身域和辅助驾驶域节点执行器需求。 龙迅半导体持续完善现有车规产品阵容布局&#xff0c;本次发布的车规级SoC芯片L…

【Linux技术专题】「夯实基本功系列」带你一同学习和实践操作Linux服务器必学的Shell指令(文件处理指令-上)

文件处理指令-上 背景前言专栏介绍面向对象重点内容文件处理命令file格式[options] 主要参数简单说明使用案例 mkdir格式[options] 主要参数应用实例 grep格式主要参数[optionsl 主要参数 应用实例pattern正则表达式主要参数 应用实例fgrep和egrep dd格式[options]主要参数 应用…

5 微信小程序

功能开发 5 功能开发概要今日详细1.发布1.1 发布流程的问题1.2 组件&#xff1a;进度条1.3 修改data中的局部数据1.4 发布示例效果前端后端 1.5 闭包 2.获取前10条新闻&#xff08;动态/心情&#xff0c;无需分页&#xff09;3.复杂版4.文章详细页面 各位小伙伴想要博客相关资料…

函数式编程 - 组合compose的使用方法

函数式编程中有一个比较重要的概念就是函数组合&#xff08;compose&#xff09;,组合多个函数&#xff0c;同时返回一个新的函数。调用时&#xff0c;组合函数按顺序从右向左执行。右边函数调用后&#xff0c;返回的结果&#xff0c;作为左边函数的参数传入&#xff0c;严格保…

【高等数学之不定积分】

一、什么是不定积分? 我们可以简单地从英文层面来基础剖析一下&#xff0c;什么是不定积分? 1.1、基本概念 小tips: 二、不定积分运算法则 三、常用积分公式 四、第一类换元积分法 4.1、定义 4.2、常用凑微分公式 4.3、小calculate 五、第二类换元积分法 5.1、定义 …

【已解决】C语言实现多线程的同步与异步

说真的写了这篇博文时&#xff0c;才知道c语言本身不支持多线程&#xff0c;而是一些windowsapi让c语言拥有多线程的能力&#xff0c;那下面内容就以打开对话框为例&#xff0c;展现如何实现多线程的同步与异步。 文章目录 问题起源c语言多线程同步方案c语言多线程异步方案总结…

JOSEF约瑟端子排中间继电器 DZY-204 DC110V 导轨安装,板前接线

DZY系列端子排中间继电器 系列型号&#xff1a; DZY-101端子排中间继电器 DZY-104端子排中间继电器 DZY-105端子排中间继电器 DZY-301端子排中间继电器 DZY-106端子排中间继电器 DZY-401端子排中间继电器 DZY-204端子排中间继电器 一、 概述 DZY-204端子排中间继电器用于各种…

【金猿CIO展】步长制药信息化管理与建设中心总经理束炼:IT部门既要懂技术,也要懂业务...

‍ 束炼 本文由步长制药信息化管理与建设中心总经理束炼撰写并投递参与“数据猿年度金猿策划活动——2023大数据产业年度优秀CIO榜单及奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 随着数字化转型的浪潮席卷各行各业&#xff0c;中国数字经济已进入快速发展阶…

杨中科 .NETCORE 异步编程

一、 为什么需要异步编程 异步点餐的优点&#xff1a;能同时服务多个客人 异步点餐一定会提升单个客户点餐速度吗&#xff1f; 答案理所当然&#xff1a;不能 图片美化服务例子服务器能够同时服务的请求数量有限 void BeautifyPic (File photo, Response response) {byte[] …

Android中集成FFmpeg及NDK基础知识

前言 在日常App开发中,难免有些功能是需要借助NDK来完成的,比如现在常见的音视频处理等,今天就以ffmpeg入手,来学习下Android NDK开发的套路. JNI和NDK 很多人并不清除JNI和NDK的概念,经常搞混这两样东西,先来看看它们各自的定义吧. JNI和NDK 很多人并不清除JNI和NDK的概念…

智能路由器 端口映射 (UPnP) Padavan内网端口映射配置方法

新版本Padavan 4.4内核的端口映射配置和老版本的不太一样,因为新版本默认是启用的 UPnP端口映射, 同时默认使用的是 IGD UPnP自动端口映射, UPnP名词解释: UPnP通用即插即用&#xff0c;是一组协议的统称&#xff0c;是一种基于TCP/IP、UDP和HTTP的分布式、开放体系&#xff…