使用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. 数位dp——BZOJ1026 Windy数

    1026: [SCOI2009]windy数 Time Limit: 1 Sec  Memory Limit: 162 MB Description windy定义了一种windy数.不含前导零且相邻 ...

  2. OpenWrt Web 开发 LuCI框架 lua语言

    LuCI作为“FFLuCI”诞生于2008年3月份,目的是为OpenWrt固件从 Whiterussian 到 Kamikaze实现快速配置接口.Lua是一个小巧的脚本语言,很容易嵌入其它语言.轻量级 ...

  3. Pycharm 2019 破解激活方法

    转载:https://blog.csdn.net/guofang110/article/details/87793264 使用破解补丁方法虽然麻烦,但是可用激活到2099年,基本上是永久激活了,毕竟在 ...

  4. MOOC(1)-使用pycharm新建Django项目、开发post接口

    https://www.cnblogs.com/liqu/p/9308966.html 1.安装Django的两种方式: > 1) pip install django 2)下载离线安装包,进入 ...

  5. mongodb Map/reduce测试代码

    private void AccountInfo() { ls.Clear(); DateTime dt = DateTime.Now.Date; IMongoQuery query = Query& ...

  6. 关于HTTP请求GET和POST的区别

    1.GET提交,请求的数据会附在URL之后(就是把数据放置在HTTP协议头<request-line>中),以?分割URL和传输数据,多个参数用&连接;例如:login.actio ...

  7. CORS’s source, Principle and Implementation

    跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资源 ...

  8. Luogu_1280_尼克的任务

    题目描述 尼克每天上班之前都连接上英特网,接收他的上司发来的邮件,这些邮件包含了尼克主管的部门当天要完成的全部任务,每个任务由一个开始时刻与一个持续时间构成. 尼克的一个工作日为N分钟,从第一分钟开始 ...

  9. JavaScript深入浅出-闭包

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function (){ var localVal ...

  10. Autotestplat体验中心

    web端 移动端 可戳[阅读原文]进行体验