【vue】 vue中echarts渐变被覆盖、失效，echarts.graphic.LinearGradient，不能正常显示的解决方法。

已于 2023-03-18 20:44:38 修改
阅读量1.1k 收藏 3
点赞数 1
分类专栏： vue2 文章标签： echarts vue.js javascript
于 2023-03-01 23:38:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46123200/article/details/129291999
版权

文章目录

前言

如图，今天引用echarts地图时报错 echarts is not defined已解决

参考网上文章解决，在这里备份一下防止下次遇到

参考文章：
人员流动echarts图
Vue项目中Echarts报错ReferenceError: echarts is not defined已解决
在vue中引入echart的折线图时，echarts.graphic.LinearGradient，不能正常显示的解决方法。
vue中echarts渐变被覆盖、失效，echarts.graphic.LinearGradient，不能正常显示的解决方法。

在这里插入图片描述
在这里插入图片描述

解决

1.注意下载依赖的版本，我用的是4.9.0没有问题

npm install echarts@4.9.0 --save

2.在mian.js中注册也要注意格式

import * as echarts from "echarts";
import "echarts/map/js/china";
Vue.prototype.$echarts = echarts;

3.修改代码
需要将原来的

 new echarts.graphic.LinearGradient

改成这样:

new this.$echarts.graphic.LinearGradient

注意$

下班~

fruge365
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码.zip
05-14
结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码 结合Express.js、Vue全家桶、Echarts.js实现的管理系统源码
vue+echarts完整显示x轴的示例以及完整案例.zip
02-15
1、解决echarts中x轴显示不全的问题； 2、完整的代码示例； 3、完整的图片示例
详解vue文件中使用echarts.js的两种方式
10-17
主要介绍了详解vue文件中使用echarts.js的两种方式，主要介绍了两种使用方式，一种是以组件的形式另一种直接引入，非常具有实用价值，需要的朋友可以参考下
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
echart 渐变内置生成器echarts.graphic.LinearGradient
热门推荐
假装是个web dog
07-22 3万+
在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient itemStyle: { normal: { color: '#00E2FF', lineStyle: { // 系列级个性化折线样式 width: 5, type: 'solid', // 颜色渐变函数...
echarts.graphic.LinearGradient 渐变色⽣成器；设置渐变色仪表盘
我的博客
06-16 8201
使用echarts.graphic.LinearGradient 渐变⽣成器设置仪表盘轴线颜色渐变 效果： 效果： 完。记录于2022-6-16.
[echart] 渐变内置生成器echarts.graphic.LinearGradient
qq_14993591的博客
03-22 1557
const option = { title:{ text:'▎商家销售统计', textStyle:{ fontSize:30 }, left:20, top:20 }, // 配置图标的位置 不包含坐标轴中的文字 grid:{ top:'20%', left:'3%', bottom:'3%', right:'6%', containLabel:true // 包含坐标轴中的文字 },
【已解决】在vue中引入echart的折线图时，echarts.graphic.LinearGradient报错，不能正常显示。
蓝胖子的博客
04-03 1475
【已解决】在vue中引入echart的折线图时，echarts.graphic.LinearGradient报错，不能正常显示。
echarts实现颜色线性渐变的其中两种方式
qq_39225639的博客
04-26 1547
一：使用echarts内置的渐变色生成器echarts.graphic.LinearGradient color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#5052EE' }, { offset: 1, color: '#AB6E
Echarts 如何配置颜色渐变
qq_43225508的博客
09-24 3525
Echarts 如何配置颜色渐变
基于Vue.js与ECharts的 数据可视化大屏源码
03-25
项目概述：本源码是基于Vue.js与ECharts技术实现的数据可视化大屏展示。项目主要以Vue为开发语言，辅以JavaScript、CSS和HTML技术进行页面构建与样式设计。 文件结构：项目包含28个文件，其中Vue组件文件11个，...
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁.zip
06-15
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁 组件介绍： <charts/> 基础组件，主要用于生成布局和图表。 <charts-legend/> 图例组件，主要用于生成图表的图例， 配置项 。 <charts-series/> ...
echarts的渐变色配置 LinearGradient， 饼图默认渐变颜色设置不同的角度
qq_44678911的博客
07-28 5491
eacher渐变颜色，以及设置每一个块按顺序从浅到深的进行渐变
echarts之渐变色设置
丁哒哒的博客
07-28 1万+
1
vue中echarts渐变被覆盖、失效，echarts.graphic.LinearGradient，不能正常显示的解决方法。
qq_44535402的博客
09-02 3099
echarts渐变被覆盖、失效，echarts.graphic.LinearGradient，不能正常显示的解决方法。
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient
Java in my life
08-20 2万+
最近用的echarts的柱状图，客户需要有立体的效果，需要echarts的渐变色生成器echarts.graphic.LinearGradient实现，特记录一下解决方法： 效果图如下 代码如下（主要配置color）： var myChart = echarts .init(document.getElementById('main3'), 'macarons'); // ...
vue项目中 echarts的渐变色的设置
卜卦的博客
07-05 1万+
实现效果 2 设置渐变色 areaStyle: { normal: { color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(63,...
在vue中引入echart的折线图时，echarts.graphic.LinearGradient，不能正常显示的解决方法。
m0_55728090的博客
04-01 5876
在vue中需要达到折线图，且有区域渐变色的效果，那么像下面那样子直接复制过来，在vue中不能渲染出来。需要将原来的 newecharts.graphic.LinearGradient 改成这样，new this.$echarts.graphic.LinearGradient 前提先是npm安装echart 1、使用npm安装 npm install echarts --save 2、main.js中引入挂载原型 import echarts from 'echarts' //需要挂载到..
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 665
步骤很详细，直接上教程……
vue静态引入echarts-gl引入import echartsgl.from echarts-gl.min.js
01-31
Vue.prototype.$echarts = echarts ``` 3. 现在，你可以在任何Vue组件中使用`this.$echarts`来访问echarts和echarts-gl的功能了。例如，在一个组件的`mounted`生命周期钩子中，你可以创建一个echarts实例并渲染一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fruge365

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值