用echarts实现水滴图效果

老规矩，看效果先：（这里的水滴是动态的）

注意，这里是使用echarts,除了原先的echarts.js外还得引入一个水滴图用的js===echarts-liquidfill.js

可以官网也可以等到最下面，会有网盘地址，去提取下：

       var arrWatter1={};arrWatter1.warterId = 'water_echarts_hd';arrWatter1.data=[{"newdata":"5555","toldata":"10000"}];   var myChart = echarts.init(document.getElementById(arr.warterId));var value = arr.data[0].newdata;//水滴中间显示的数据var toldata = arr.data[0].toldata;//该水滴的总数据var num = parseFloat(value/toldata);var data = [];data.push(num);option = {series: [{type: 'liquidFill',data: data,radius: '80%',center: ['50%', '50%'],//所在位置// shape: 'pin'气球效果 ;'roundRect'方形效果;'diamond',菱形效果backgroundStyle: {// borderWidth: 10,//内边框粗细// borderColor: 'red',//内边框颜色color: '#013044'//底色},itemStyle: {normal: {color: '#18a0d9'}},label: {normal: {// formatter: value * 100 + '%',//显示所有小数位formatter: function (val) {return val.data*toldata;},textStyle: {fontSize: 50, //字体大小color: '#fff',// insideColor: "red",}}},outline: {show: true//边框}// waveAnimation: false, // 禁止左右波动}]};myChart.setOption(option);

有问题欢迎来一起交流

附带：echarts-liquidfill.js

网盘地址：https://pan.baidu.com/s/1anuPNk3eFO_Dey2kPT4NuA 提取码：hzig

另外：附带官网有关水滴图的地址：https://www.echartsjs.com/download-extension.html

用echarts实现水滴图效果相关推荐

echart水滴_用echarts实现水滴图效果
老规矩,看效果先:(这里的水滴是动态的) 注意,这里是使用echarts,除了原先的echarts.js外还得引入一个水滴图用的js===echarts-liquidfill.js 可以官网也可以等到 ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
Echarts漂亮水滴图
ECharts提供了水滴图插件echarts-liquidfill, from @Ovilia 在学习Echarts的时候看到了一款非常漂亮的图形liquidfill,记录了Echarts-liqui ...
Vue.js 写一个echarts的水滴图
首先在安装echarts依赖库的情况下,详情可以参考我的上一篇博客第一步在命令行或者控制台引入liquidfill: npm install echarts-liquidfill 第二步:在项目的m ...
Excel制作水滴图和对称条形图
关注公众号,设为"置顶或标星",第一时间送达干货 Excel2016制作水滴图 1.数据准备:2020年某门店销售额目标达成率和目标值,以及填充图表的空心圆和实心圆. 2.选中目标 ...
echarts通用环形图
echarts通用环形图效果如下: <div class="chart-box"><div ref="pieChart" id=" ...
echarts 水滴图实现方式。
项目中需要实现水滴图的应用搞了一下,效果还可以,感觉做的还是比较全面的有渐变色,颜色更改等措施. 效果图: 直接上代码: <!DOCTYPE html> <html>< ...
Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
Echarts水滴图
制作水滴图需要引用第三方脚本:http://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.m ...

用echarts实现水滴图效果

用echarts实现水滴图效果相关推荐

最新文章

热门文章