vue中使用echarts-liquidfill实现水波图

最新推荐文章于 2024-05-29 17:37:51 发布
最新推荐文章于 2024-05-29 17:37:51 发布
阅读量4.1k 收藏 27
点赞数 7
分类专栏： ❤️❤️--echarts ❤️❤️--vue2核心技术栈 文章标签： echarts水波图 vue中实现水波图 水球图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/116460003
版权

先看效果图：

第一步：在package.json中添加依赖

    "echarts": "^4.4.0",
    "echarts-liquidfill": "^2.0.5",

然后 npm i    注意：先安装低版本的echarts-liquidfill，之前试了3.0以上的版本会报错，echarts版本可随意

第二步：在main.js中引入echarts和echarts-liquidfill

impo
了解本专栏 订阅专栏 解锁全文 超级会员免费看
suoh's Blog
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
订阅专栏
vue中使用echarts水球图
m0_63102527的博客
04-12 898
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！个人可以走的很快，但一群人才能走的更远。
echarts-liquidfill水滴图插件包3.1.0版本
10-11
为echarts-liquidfill插件下载不成功者提供！ 1：将包拖入node-modules种解压 2：找到package-lock.json文件：加上以下代码： "echarts-liquidfill": { "version": "3.1.0", "resolved": ...
echarts水球图echarts-liquidfill.js文件
05-11
echarts水球图所需文件，直接引入配合echarts.js使用
echarts插件-liquidFill（水球图）
joan_yb的博客
10-25 1290
echarts插件-liquidFill（水球图）
echarts-liquidFill-水球图
最新发布
weixin_44272883的博客
05-29 215
配置项（echarts版本5.1.2）4.83m是title.text属性。水波高度是series.data配置。
Echarts typescript liquidfill 水球图波浪渐变色
weixin_46382462的博客
09-26 2930
Echarts typescript vue3 liquidfill 水球图波浪渐变色
vue中使用echarts-liquidfill实现水球图
风如也的博客
10-21 7962
先看效果图 echarts-liquidfill查看官方文档 安装 npm install echarts --save npm install echarts-liquidfill --save vue main.js 中注册 import echarts from 'echarts' //引入echarts import 'echarts-liquidfill' 组件中使用 <template> <div style="width:400px;height:400px;" r
echarts-liquidfill（水球图代码）
luoxiaonuan_hi的博客
06-20 2573
echart之水球图
echarts 实现动态水波图
m0_61043829的博客
06-28 1583
echarts 实现动态水波图
echarts水球图liquidfill在vue中的使用
lucasmi的博客
04-29 4277
这里写自定义目录标题 echarts-liquidfill虽然是echarts的插件，但是并不在echarts的内置组件中，而且官方文档里也没有，因此需要自己安装一下。 如果你echarts也没安装过，就先安装echarts。 cnpm install echarts@4.9.0 -S 如果以前已经安装了echarts，就再安装一个echarts-liquidfill，这里要注意echarts和echarts-liquidfill的版本的对应关系，如果版本不适配，会报一些奇奇怪怪的错误，所以我这里安装的是
在vue中使用vue-echarts-v3的实例代码
12-01
npm install --save echarts vue-echarts-v3 二、用法 用 vue-cli 搭建的项目，打开 build 文件夹中的 webpack.base.conf.js 文件 1、webpack 1.x 修改成如下 { test: /\.js$/, loader: 'babel', include: [ ...
echarts-liquidfill.js
06-29
echarts-liquidfill.js文件，做水球图用的，官方的api
Echarts之球形水波纹
c_x_m的博客
10-27 1688
【echarts-liquidfill@3兼容echarts@5、 echarts-liquidfill@2兼容echarts@4】1.展示图：【左侧即为水波图，右侧是想要展示的信息列】球形水波纹是比较与饼图展现方式 更灵动 更高级的一种。
vue 水波纹 echarts-liquidfill组件
耳火的博客
09-07 781
这里 记录了一些本人在工作中用到的一些关于echarts的图表内容，话不多说，直接上代码。本文仅仅简单介绍了echarts 折线图和 水波图 的使用，代码可能有些乱，希望可以帮到你一点。
Vue中使用echarts-liquidfill绘制水波球
sleepwalker_1992的专栏
03-09 497
echarts-liquidfill绘制水波球
如何在Vue项目中使用Echarts水球图？
weixin_46198981的博客
07-27 1682
如何在Vue项目中使用Echarts水球图？ 1、安装水球图所需的依赖包 // 一、下载Echarts图表库和相关依赖文件（以下两种安装方式，可以随意选择） // npm npm i -S echarts npm i -S echarts-liquidfill // yarn yarn add echarts -S yarn add echarts-liquidfill -S // 二、在需要用到水球图的组件引用它们 // 1、引入echarts图表库 import * as echarts fro
vue绘制语音波形图---wavesurfer.js
weixin_43956958的博客
02-04 2456
通过XMLHttpRequest对象向后端发出请求，获取音频数据的blob流。然后通过WaveSurfer.create()方法创建一个wavesurfer实例，传入一个容器元素和一些配置选项。最后调用loadBlob()方法将blob数据传递给wavesurfer进行处理。这样就可以在前端使用wavesurfer.js处理后端传递过来的音频数据了。封装websocket。
vue 音视频波形图展示（peaks.js）
weixin_46324536的博客
11-24 2540
vue音视频波形图展示
echarts折线图设置渐变半透明面积颜色
蜗牛~~
04-01 6490
效果： 渐变半透明颜色设置： 在series里面设置areaStyle属性： areaStyle: { normal: { color: { x: 0, y: 0, x2: 0, y2: 1, col
vue3种使用echarts-liquidfill
04-05
1. 在Vue组件中使用ECharts-liquidfill插件 首先，我们需要在项目中安装ECharts和ECharts-liquidfill插件。可以通过npm命令来安装： ``` npm install echarts --save npm install echarts-liquidfill --save ``` 然后在Vue组件中引入ECharts和ECharts-liquidfill插件： ```javascript import echarts from 'echarts' import 'echarts-liquidfill' ``` 接下来，我们需要在Vue组件的mounted钩子中初始化ECharts图表并设置option： ```javascript mounted() { // 初始化ECharts实例 const myChart = echarts.init(this.$refs.chart) // 设置option const option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], radius: '70%', color: ['#00baff', '#00e3ff', '#00ffff', '#8cfffb'], label: { normal: { position: ['50%', '50%'], formatter: '{a|{b}}\n{hr|}\n{c|{c}}', rich: { a: { fontSize: 20, color: '#fff' }, hr: { borderColor: '#fff', width: '100%', borderWidth: 1, height: 0 }, c: { fontSize: 18, color: '#fff', padding: [3, 0] } } } } }] } myChart.setOption(option) } ``` 最后，在Vue组件的template中添加一个div元素来渲染ECharts图表： ```html <template> <div ref="chart" style="height: 300px;"></div> </template> ``` 2. 在Vue指令中使用ECharts-liquidfill插件 除了在Vue组件中使用，我们还可以将ECharts-liquidfill插件封装成一个Vue指令，方便在多个组件中重复使用。首先，我们需要在项目中创建一个新的文件，例如liquidfill.js，并在其中引入ECharts和ECharts-liquidfill插件： ```javascript import echarts from 'echarts' import 'echarts-liquidfill' export default { inserted(el, binding) { const myChart = echarts.init(el) const option = { series: [{ type: 'liquidFill', data: [binding.value], radius: '70%', color: ['#00baff', '#00e3ff', '#00ffff', '#8cfffb'], label: { normal: { position: ['50%', '50%'], formatter: '{a|{b}}\n{hr|}\n{c|{c}}', rich: { a: { fontSize: 20, color: '#fff' }, hr: { borderColor: '#fff', width: '100%', borderWidth: 1, height: 0 }, c: { fontSize: 18, color: '#fff', padding: [3, 0] } } } } }] } myChart.setOption(option) } } ``` 然后，在Vue组件中引入并使用该指令： ```html <template> <div v-liquidfill="0.6" style="height: 300px;"></div> </template> <script> import liquidfill from './liquidfill.js' export default { directives: { liquidfill } } </script> ``` 这样就可以在多个Vue组件中重复使用该指令，而不需要重复编写ECharts-liquidfill插件的初始化和option设置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

suoh's Blog

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

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

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

打赏作者

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

抵扣说明：

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

余额充值