liquidFill---实现柱状水滴图

var newData =150//当前值
var maxData = 200//最大值
value = (newData / maxData).toFixed(2);
data = [value, value];
var m = 0
if (0.9 - parseFloat(value) < 0) {m = 0
} else {m = Math.abs(0.9 - parseFloat(value))
}var p = m * 100 + '%'option = {title: {text: '{a|' + newData + '}' + '{b|个}',textStyle: {rich: {a: {color: '#fff',fontSize:40},b: {color: '#fff',fontSize: 40}}},x: 'center',y: p},series: [{type: 'liquidFill',radius: '100%',center: ['50%', '50%'],data: data,animationDuration: 1000,animationDurationUpdate: 1000,animationDelay: 1000, // waveAnimation: false,  animationEasingUpdate: 'cubicOut', radius: '100%', // center: ['50%', '50%'],  // shape: 'rect',  outline: { show: false  }, backgroundStyle: { // borderWidth: 5,  borderWidth: 0, // borderColor: 'red',  color: 'rgba(102, 120, 148, 0.4)'  }, shape: 'path://M 0 0 L 50 0 L 50 144 L 0 144 Z', label: { show: false  /*normal: {  position: ['50%', p],  formatter: function () {  return '{a|' + newData + '}' + '{b|' + unit + '}'   },  rich: {  a: {  color: '#fff',  fontFamily: 'HCFont',  fontSize: 28  },  b: {  color: '#fff',  fontFamily: 'SimHei',  fontSize: 20  }  },   }*/  }outline: {show: false},backgroundStyle: {borderWidth: 0,color: 'rgba(102, 120, 148, 0.4)'},shape: 'path://M 0 0 L 36 0 L 36 144 L 0 144 Z',//水填充图的形状 circle默认圆形  rect矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状、svg的pathcolor: ['rgba(1,245,254,1)', 'rgba(1,245,254,0.5)'], //波浪颜色label: {normal: {formatter: '',}}}]
}

liquidFill---实现柱状水滴图相关推荐

柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
label mpchart 饼图_Origin系列：绘制柱状堆积图
原创不易,感谢分享,欢迎转发,请点在看堆积柱状图十分美观,不仅能够展示数据占比,更能表现其变化趋势,是科研必备技能今天分享粉丝提出类似下列图形用Origin绘制多列柱状堆积图.希望对大家有所帮助 ...
如何展现两极化数据，Excel柱状断层图不二之选
点赞再看,养成习惯:至长反短,至短反长. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含Ex ...
exlc如何对比_excel表格图形数据比较-Excel如何做柱状对比图
excel表格怎么做数据对比图 Excel的图表功能已供了柱状对,下面以Excel 2010为例进行实例演示--用柱状图对比显示下面数据列一和系列二 1.选中数据→插入→柱形图→簇状柱形图 2.因为数 ...
SwiftUI之深入解析如何使用组合矩形GeometryReader创建条形（柱状）图
一.图表布局条形(柱状)图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例.SwiftUI 对探索不同布局和预览实时视图结果是很友好的,很容易将部分内容提取到子视图中,以便每个部分都很 ...
使用 D3.js 创建柱状堆积图
柱状堆积图项目地址使用 D3.js 创建的图表: 使用 D3.js 创建根据值域颜色渐变的地图 D3.js 中动态计算 x 轴 y 轴的宽度以及偏移量在 Ember.js 项目中由浅入深使用 D ...
python pyecharts Bar柱状堆叠图
柱状堆叠图,适合两个商家直接比较 attr=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋" ...
柱状山地图（我的世界风地图）（100种制图法4）
柱状山地图(我的世界风地图) 一.问题制作一幅柱状山(我的世界)风格的地图二.操作步骤 1.加载数据加载数据结果图 2.环境设置环境设置参数设置 3.投影栅格投影栅格参数设置投影栅格结果图 ...
django Echarts画柱状推移图
1. 首先确定要画什么样的图,在Echarts官网找好案例 2.根据图确认需要准备的数据,从后台准备数据传递给模板 3.模板渲染,使用Echarts组件功能完成自己想要的内容中间遇到几个坑: 1. ...

liquidFill---实现柱状水滴图

liquidFill---实现柱状水滴图相关推荐

最新文章

热门文章