vue使用echarts 仪表盘样式不对 | 使用echarts5.0

news2025/1/11 16:44:01

最近在使用Echarts官网样例的仪表盘图时候发现自己用的和官网的样例样式完全不一样
无论怎么调整参数都还是没有办法解决。如果有同学碰到和我一样的问题可以尝试一下使用最新版的Echarts(5.0以上)。

因为曾经也怀疑过Echarts版本问题因此npm install更新了Echarts但是只更新到了4.9的版本。4.9的版本还是会出现样式不一致的问题。因此如果想解决这个问题可以在install的时候指定一下更新最新版本或者通过下载文件引入的方式来使用最新版的Echarts。
希望能解决一些同学关于这个方面的问题。

项目中遇到的问题

官方示例
在这里插入图片描述

项目中引入 ,样式错乱

在这里插入图片描述

1. vue使用echarts样式不对原因

问题原因: 因为看到的版本是最新版的,而你的echarts可能是上个版本的,所以样式不对

解决办法

升级版本

2. 使用v5 echarts

我之前直接用npm install echarts --save下载是v4的

所以请用这个下载最新版

npm install echarts@5.4.1 --save

然后使用时请用这个引入,然后就能像平时用v4那样使用了

import * as echarts from 'echarts'

tips:

vue 中echarts卸载和安装指定版本

卸载:

npm uninstall echarts

安装指定版本:需要其他版本直接改@后的版本号就行

npm install echarts@4.9.0 --save

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

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

相关文章

MySQL详解(五)——高级 3.0

查询截取分析 慢查询日志 MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long_query_time值的SQL,则会被记录到慢查询日志中。 具体指运行时间超过long_query_time值的SQL&am…

汇编语言-实现一个简单的主引导记录(MBR)引导用户程序

本文参考李忠老师的《X86汇编语言:实模式到保护模式》 前言 自己手动实现一个简单的主引导记录来引导用户程序,有助于了解 主引导程序的工作流程在汇编代码层面如何调用函数(函数调用的原理)在汇编代码层面如何读写硬盘&#xf…

Android中级——滑动分析

SrcollAndroid坐标系视图坐标系常见方法实现滑动layout()offsetLeftAndRight()和offsetTopAndBottom()LayoutParamsscrollTo()与scrollBy()ScrollerVierDragHeplerAndroid坐标系 将屏幕左上角的顶点作为Android坐标系的原点,向右为X轴正方向,向下为Y轴正…

uni-app中uni-ui组件库的使用

介绍uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。uni-ui不包括基础组件,它是基础组件的补充特点高性能(自动差量更新数据,优化逻辑层和视图层通讯折损,背景停止&#xff0…

Leetcode力扣秋招刷题路-0337

从0开始的秋招刷题路,记录下所刷每道题的题解,帮助自己回顾总结 337. 打家劫舍 III(Mid) 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口,我们称之为 root 。 除了 root 之外,每栋房子有且只有一…

ESP32+Arduino+OLED+u8g2播放视频

1、思路分析 ESP32采用Arduino开发,结合u8g2模块可以很方便地实现在oled上显示图片。因此,只需要将一个视频拆开成一帧帧,然后循环显示即可。 然而,有几个问题: 视频太大,esp32的flash无法存下怎么办&…

DynaSLAM-8 DynaSLAM中双目运行流程(Ⅱ):初始化SLAM系统部分System.cc

目录 1.回忆 2.System::System 1.回忆 上篇博客中我们讲述了DynaSLAM中初始化Mask R-CNN网络部分的代码。 这篇博客我们讲述初始化DynaSLAM除Mask R-CNN网络部分以外的代码。 2.System::System 初始化Mask R-CNN网络后,程序执行: // Create SLAM syst…

MongoDB 4.0支持事务了,还有多少人想用MySQL呢?

目录一、MongoDB 不支持事务?二、什么是事务?三、ACID的定义四、如何使用事务五、重要参数简介1、时间限制2、oplog大小限制六、连接池 数据库连接的缓存1、MongoDB查询数据五步走2、MongoDB连接池的参数配置七、聚合框架八、MongoDB文档格式设计1、限制…

【八大数据排序法】插入排序法的图形理解和案例实现 | C++

第十六章 插入排序法 目录 第十六章 插入排序法 ●前言 ●认识算法 ●一、插入排序法是什么? 1.简要介绍 2.图形理解 3.算法分析 ●二、案例实现 1.案例一 ●总结 前言 排序算法是我们在程序设计中经常见到和使用的一种算法,它主要是将…

MySQL【left join、right join、inner join】详细用法

参考链接:mysql的left join和inner join的详细用法https://blog.csdn.net/weixin_45906830/article/details/111133181 1. inner join:内连接:显示两个表中有联系的所有数据。 通俗讲:inner join 查找的数据是左右两张表共有的。 …

【C语言练习】字符串旋转你会嘛?

目录🍬题目描述:🍭思路一:🍡代码优化:🍭思路二:🍬题目描述:🍭思路一:🍭思路二:🍬题目描述&#xf…

车辆控制器的 Fail Safe功能介绍

Fail Safe概要 在漆黑的夜路上,一辆开着头灯的汽车经过。 如果控制前照灯的控制器在这种情况下发生故障怎么办? 大灯会熄灭,造成危险吗? 不。 在这种情况下,控制器的“Fail Safe”被激活,前照灯保持其先前的…

企业需要一个数字体验平台(DXP)吗?

数字体验平台是一个软件框架,通过与不同的业务系统喝解决方案集成,帮助企业和机构建立、管理和优化跨渠道的数字体验。帮助企业实现跨网站、电子邮件、移动应用、社交平台、电子商务站点、物联网设备、数字标牌、POS系统等传播内容,除了为其中…

termux入门安装

下载安装 请使用F-Droid 的Termux,GooglePlay的 Termux 可能存在一些问题。 下载地址:https://f-droid.org/en/packages/com.termux/ 下载完成在安卓手机上直接安装Termux的apk文件就可以了。 termux换源 新版本的termux换源一条命令就可以超简单&…

【C++之类和对象】初识类和对象

目录前言一、面向对象VS面向过程二、类三、类的定义四、类的访问限定符五、封装六、C中的用struct和用class定义的类有何不同?七、类的作用域八、类的实例化九、计算类对象的大小十、this指针前言 C是一门面向对象的语言,之前学习的C语言是一种面向过程的…

对epoll的重新学习【附源码】

目录 一、概述 二、使用 三、API 3.1 epoll_create(int size) 3.2 epoll_ctl(int epfd,int op, int fd. struct epoll_event *event) 3.3 epoll_wait(int epfd, struct peoll_event *events, int maxevents, int timeout) 3.4 *ssize_t read(int fd, void buf, size_t c…

python模块之codecs

python 模块codecs python对多国语言的处理是支持的很好的,它可以处理现在任意编码的字符,这里深入的研究一下python对多种不同语言的处理。 有一点需要清楚的是,当python要做编码转换的时候,会借助于内部的编码,转换…

Spark读取Hive数据的两种方式与保存数据到HDFS

Spark读取Hive数据的两种方式与保存数据到HDFS Spark读取Hive数据的方式主要有两种 1、 通过访问hive metastore的方式,这种方式通过访问hive的metastore元数据的方式获取表结构信息和该表数据所存放的HDFS路径,这种方式的特点是效率高、数据吞吐量大、…

规则引擎-drools-4-动态生成drl文档

文章目录drools 引擎工作原理动态生成drl文件示例步骤模板文件 decision_rule_template.drt生成规则文件serviceDecisionNodeFact实体对象生成的drl字符串如下KieHealper 执行动态生成drl文件的原理实际应用过程中,很多时候,规则不是一成不变的&#xff…

54.Isaac教程--RealSense相机

RealSense相机 ISAAC教程合集地址: https://blog.csdn.net/kunhe0512/category_12163211.html 文章目录RealSense相机RealsenseCamera Codelet示例应用程序故障排除固件注意事项通过 USB 3.0 电缆使用 USB 3.0 端口x86_64 Linux 主机设置设置电源模型英特尔RealSense 435 摄像头…