使用echarts-liquidfill.js的水球,水球上显示的文字可以使用chartOption.series[0].label.normal.formatter设置,想显示什么显示什么。
水球插件下载地址
https://files.cnblogs.com/files/tong2018/echarts-liquidfill-master.zip
var chartOption = {
title: {
subtext: '',
subtextStyle: {
fontSize : 14,
fontFamily:'serif',
color: '#ffffff'
},
top: '80%',
textAlign: 'center',
left: '50%'
},
series: [{
color: ['#86FDFD'],//水波颜色
type: 'liquidFill',
waveAnimation: false,//是否流动水球
animation: false,
radius: '55%',
waveLength: '80%',//波长
waveHeight: '60',//波长
amplitude: '8%',//振幅
outline: {
show: true,
borderDistance: 4,//内环宽
itemStyle: {
color: '#14297b',//内环色
borderColor: '#86FDFD',//外环色
borderWidth: 7//外环宽
}
},
backgroundStyle: {
color: '#14297b'//水球背景色
},
label: {
normal: {
formatter:"34.34%",//水球上显示文字,可以设置任意文字
show: true,
textStyle: {
color:'#ffffff',//水球显示文字颜色
fontSize: '22',
fontFamily:'serif',
fontWeight: '100'
}
}
},
data: [0.34]
}]
};

  

echarts-liquidfill 水球显示小数点的更多相关文章

  1. echarts中饼图显示百分比

    通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法:     tooltip : {         trigger: ' ...

  2. echarts柱状图标签显示不完全的问题

    echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...

  3. echarts饼图不显示数据为0的数据

    首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...

  4. ECharts图表tooltip显示时超出canvas图层解决方法

    我们在做ECharts图表的时候可能会遇到tooltip显示时超出了canvas图层范围,并且被其它z-index较高的div容器遮盖,这是悬浮展示信息就看不全,我们根据官网文档的配置项查询发现con ...

  5. tab切换echarts无法正常显示问题

    项目中使用到了Echarts来在展示图表,两个tab切换页面中都存在图表,页面加载完成后 对所有图表进行了初始化和绘制,然后切换查看时,发现图表的宽度不正确.,第一个tab显示是很正常的,但是第二个t ...

  6. Echarts 不能百分比显示或显示有问题

    1,设折线图宽为100%(如:容器div的class=“RiBarBot”宽为880px),刚初始化时隐藏折线图(或后期刷新.隐藏与显示折线图时),当点击显示折线图时,获取到的宽只有100px,并不是 ...

  7. 我遇到的Echarts 最大值不显示&平均值不正常

    用Echarts做图表的时候,遇到最大值不显示和平均值不正常的问题,如图: 找了半天,原来是X轴6个坐标有7个数据,只是最后那个数据没有显示出来,而且还是最大的,无语. 加上第七个坐标之后,就显示正常 ...

  8. Datagridview中数字格式列 不显示小数点前面的0

    用代码设置DataGridView中某列为数字格式,但当小数为0.*的时候,前面的0却不显示.只显示.*. 看网上有说: 调整本地设置,控制面板-区域和语言选项,在弹出框的区域选项卡中,选择自定义,在 ...

  9. 解决echarts饼图不显示数据为0的数据

    如图所示 饼图数据为0但是还是会显示lableline和lable 解决方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], ...

随机推荐

  1. TB3_Autorace之交通杆检测

    利用blob检测算法识别交通杆,控制TB3机器人完成对交通杆的起停动作! 上一篇博文中<TB3_Autorace之路标检测>订阅了原始图像信息,经过SIFT检测识别出道路交通标志,这里我们 ...

  2. caffe之那些依赖的库

    1. Boost库 Boost是一个可移植的,提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一.Boost强调对跨平台的支持,编译与平台无关.Caffe采用C++为主要开发语言 ...

  3. maven依赖找不到,快速解决

    以微信支付依赖为例子 wxpay-sdk-3.0.9.jar1.阿里云仓库搜索地址https://maven.aliyun.com/mvn/search 2.搜索你要找的依赖,对号入座 3.确保mav ...

  4. <JZOJ1286>太空电梯

    一道简单可爱的dp #include<cstdio> #include<iostream> #include<cstring> #include<algori ...

  5. (一)mybatis简易搭建

    mybatis(基础及其搭建) 声明:该文章及该分类中的内容均基于正在开发的项目和一本参考书(深入浅出MyBatis技术原理与实战    by 杨开振) 一.mybatis核心组件(简要介绍) Sql ...

  6. 神经网络的Python实现(一)了解神经网络

    网络上深度学习相关博客教程质量参差不齐,很多细节很少有文章提到,所以本着夯实深度学习基础的想法写下此系列博文. 本文会从神经网络的概述.不同框架的公式推导和对应的基于numpy的Python代码实现等 ...

  7. 查漏补缺:进程间通信(IPC):FIFO

    1.FIFO FIFO,又称命名管道.不同于pipe管道的只能用于拥有共同祖先进程的两个进程间通信,因FIFO通过路径绑定,所以即使是不相关的进程间也可通过FIFO进行数据交换. FIFO是一种文件类 ...

  8. TCPCopy 线上流量复制工具

    TCPCopy是一种重放TCP流的工具,使用真实环境来测试互联网服务器上的应用程序. 一.描述: 虽然真实的实时流量对于Internet服务器应用程序的测试很重要,但是由于生产环境中的情况很负责,测试 ...

  9. Ftp Centos · GitBook

    これよくない pyftpdlibをつかおう sudo easy_install pyftpdlib nohup python -m pyftpdlib > pyftpdlib.log 2> ...

  10. 微服务SpringBoot总结

    什么是SpringBootSpringBoot是Spring项目中的一个子工程,与我们所熟知的Spring-framework 同属于spring的产品官方介绍:Spring Boot makes i ...