Echart使用水球图不生效

最新推荐文章于 2024-07-14 11:16:56 发布
最新推荐文章于 2024-07-14 11:16:56 发布
阅读量442 收藏 1
点赞数 3
分类专栏： 数据可视化 文章标签： vue.js 前端 javascript echarts 水球图 liquidfill
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15509267/article/details/135870085
版权
文章讲述了在Vue3中尝试使用Echarts5绘制水球图时遇到的问题，由于Echarts5.0版本后需要单独安装echarts-liquidfill依赖，提供了相应的安装步骤和版本对应建议。
摘要由CSDN通过智能技术生成

一、背景：

        在vue3中使用echart5绘制水球图，未显示，也没有报错。

        水球图官方链接：https://www.npmjs.com/package/echarts-liquidfill

二、原因：

        echart5.0版本后需要单独安装依赖包。

三、解决方案：

1、安装水球图的依赖包

npm i echarts-liquidfill

2、在使用的vue页面

import * as echarts from 'echarts';
import 'echarts-liquidfill';

注：

         1、Echarts的版本需要和‘echarts-liquidfill’。

echartsecharts-liquidfill
^5.3.3^3.1.0
^4.2.1^2.0.2

zyk_520
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
水滴球实现echarts，水滴球不出效果解决
iseyre的博客
05-31 797
npm install --save echarts-liquidfill@对应的版本号。注：eacharts需要和水滴图的版本号对应！然后父组件引入调用就ok。这个图需要下载对应的插件。
【echarts】水球图不生效解决方案
qq_45625778的博客
10-07 769
最近在使用echart图表时发现echart的 type: “liquidFill” 属性没有生效，也没有报错，单纯图表不展示。经排查发现是echart5.0版本后需要安装依赖。
echarts水球图加载问题
qq_36384745的博客
10-18 305
echarts水球图加载问题
echarts做水滴图；解决[echarts] unknown series liquidfill 水球加载问题
i_am_a_div的博客
03-26 1343
echarts做水滴图；解决[echarts] unknown series liquidfill 水球加载问题
echarts渐变色不起作用
qq_37881606的博客
12-07 3335
echarts设置渐变色没有效果，但是也没有报错 网上搜寻到以下两种代码都没有实现效果： 第一种： normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#8bd46e' }, { offset: 1, color: '#09bcb7' }]) } 第二种： normal: { color: function (param
echarts水球图
12-27
echarts水球图js代码，页面引入了echarts.js还需要引入echarts-liquidfill.min.js才能实现水球图效果
解决echarts图表在本地运行正常，部署后切换组件不显示的问题
ben_ncepund2的博客
02-14 724
关于后台管理系统中，部署后echarts图表显示异常的问题解决
【从零建站3/n】错题集（已解决）：服务器上再次进入有Echarts的页面，图表无法显示
泛纪元的啊有猫
03-05 315
碰到一个很厉害的Bug。 主角是我个站提供的深圳个人车牌竞价预测；本地npm run serve一切正常，但是一旦上服务器（腾讯云）就会出问题： 打开网页或PWA程序后第一次进入有echarts图的竞价预测页面一切正常； 通过顶栏点选到其他页面后，再次回到这个有echarts图的竞价预测页面，则原图表区显示为一片空白。 按F5刷新页面后，echarts图表又恢复正常显示；重复上一步操作则继续发生无法显示的Bug。 解决思路：猜测原因是vue-router作为路由把页面切走之后，原来绑定到div上的e
vue使用echarts-liquidfill水球图不生效问题
weixin_40992252的博客
09-27 291
1.安装对应版本的echarts和echarts-liquidfill。2.使用时，在页面引入。
使用Python中的pyecharts库绘制水球图
01-20
liquid = Liquid('水球图') # liquid.add('水球', [0.8], shape='circle') # liquid.add('方形', [0.5], shape='rect') # liquid.add('圆角矩形', [0.6], shape='roundRect') # liquid.add('三角形', [0.7], shape='...
Python绘制动态水球图过程详解
09-16
本文主要讲解如何使用Python的PyEcharts库来绘制动态水球图。PyEcharts是一个强大的数据可视化库，它基于JavaScript的Echarts库，提供了丰富的图表类型和高度定制化的选项。 首先，要绘制动态水球图，你需要确保...
QT自定义控件-动态水球图（含源码和demo）
08-26
本资源提供的"动态水球图"就是一个很好的例子，它基于QWidget类实现，可以用于展示数据的动态变化，增加可视化效果。 水球图是一种特殊的图表类型，通常用于显示数值在两个限定值之间的相对位置，或者表示某个数值...
vue使用echarts打包后不显示问题
zxy2017的博客
01-11 1649
问题: 使用echarts绘制图表时，本地运行，切换图表没有问题，但是打包之后部署到线上，首次加载没有问题，再次加载就不显示了。 解决 在不展示图标的时候销毁调echarts的实例，例： <script setup> import * as echarts from "echarts"; let myChart = null onMounted(() => { myChart = echarts.init(document.getElementById('main')); // 绘制
ve-liquidfill水球图数据显示异常 （vue的浮点数运算）
weixin_41781456的博客
11-13 1556
ve-liquidfill水球图数据显示异常 采用百度官网的代码 采用官网的代码会出现数据显示如下异常 鼠标悬浮的提示信息是正确的，显示57% 我想大家应该也注意到了 fillChartSettings的设置里面label进行了数据处理 ${seriesName}\n${value * 100}% 问题就出现在这里，value小数，在vue里面的浮点数是不能直接做乘法运算的， 例如：0...
echarts水球图-动态波纹百分比数据显示
一往直“前”，直上云“端”
11-06 8584
最近帮助朋友根据ued图学习设计了一个echarts水球图，觉得还蛮有意思的，在这记录一下 具体效果： 看看，这种带比例的echarts是不是很像个水球，随着比例变动水位不断变化，再看看那一圈圈涟漪（ps：就这些‘涟漪’开始麻烦死了……） 进入正题： 废话不多说，直接上代码，希望对你有帮助： function Pie() { let dataArr = []; for (var i = 0; i <. 前端水球图；vue水球图；...
ecahrts实现动态水球图
qq_24625651的博客
07-19 319
vue使用echarts实现动态水波图
vue项目中eachars实现水球图（echarts-liquidfill）
沐天的博客
02-23 1646
vue项目中eachars实现水球图（echarts-liquidfill）
vuejs v-for和v-if同时使用报变量未定义
最新发布
业余程序猿
07-14 320
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
echart 水球图
12-08
以下是使用ECharts绘制水球图的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 水球图示例</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], radius: '70%', label: { normal: { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c}%', backgroundColor: '#eee', borderColor: '#aaa', borderWidth: 1, borderRadius: 4, shadowBlur:3, shadowOffsetX: 2, shadowOffsetY: 2, shadowColor: '#999', padding: [0, 7], rich: { a: { color: '#999', lineHeight: 22, align: 'center' }, hr: { borderColor: '#aaa', width: '100%', borderWidth: 0.5, height: 0 }, b: { color: '#333', fontSize: 16, fontWeight: 'bold', lineHeight: 33 }, per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 } } } }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, itemStyle: { normal: { opacity: 0.6, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.3)' } } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 以上代码会生成一个宽为600px，高为400px的水球图，其中data数组中的四个元素分别表示四个水球的填充百分比。你可以根据自己的需求修改这些参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值