js---Echarts水球图的简单使用方法(ecarts官方插件)

简介: js---Echarts水球图的简单使用方法(ecarts官方插件)

在echarts官网中也有详细的介绍:点击跳转

其次下载官方项目可以在github中下载(百度一下即可)

在下载好官方github项目后即可操作(相信看此篇文章的都是有一定前端基础的同仁,就不再赘述下载方式)

首先相关文件(在官方github项目中dist目录下获取到这两个js文件):

<script src="./js/echarts.js"></script>
<script src="./js/echarts-liquidfill.js"></script>

准备一个容器:

<div id="box"></div>

js代码:

var myChart = echarts.init(document.getElementById('orderNum'));
  var option = {
         series: [{
             type: 'liquidFill',
          radius: '98%',
          data: [88]
          }]
      };
  option && myChart.setOption(option);

这就是水球图插件的基础使用方法:

echarts水球图还有许多的样式可以修改,比如更改波纹数量,水球形态等 ( ง⁼̴̀ω⁼̴́)ง⁼³₌₃

目录
相关文章
|
21天前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
83 58
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
97 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
4月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
349 62
|
2月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
64 13
|
3月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
3月前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
78 16
|
3月前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
3月前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
92 1
|
4月前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
53 6

热门文章

最新文章