Echarts水滴图

制作水滴图需要引用第三方脚本:http://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js

普通水滴图:

//首先使用background来修改整体的图背景
option = {backgroundColor: 'white',//调整下整体的背景 series: [{type: 'liquidFill',data: [0.264]}]
};

修改下字体的大小：

option = {backgroundColor: 'white',series: [{type: 'liquidFill',data: [0.6],label: {normal: {//fontSize:80   //这里也可以设置 textStyle: {fontSize: 80//修改字体大小 }}}}]
};

多数据显示水滴图:

var option = {backgroundColor: 'white',series: [{type: 'liquidFill',name: 'Multi-Data',data: [0.7, 0.5, 0.3],//输入多个数据 label: {normal: {position: ['50%', '20%'],//此处调节显示的位置 formatter: function() {return 'Multi-Data';},textStyle: {fontSize: 30,//设置字体大小 }}}}]
};

心形水滴图:

// 水球图学习 from Ovilia 1024
//基本显示 修改样式 文字大小 颜色调整var option = {backgroundColor:'white',series: [{type: 'liquidFill',name: 'Multi-Data',radius:'60%',shape:"path://M18.98 5.7c-.24-2.36-2.24-4.2-4.66-4.2-1.95 0-3.6 1.18-4.32 2.87-.7-1.7-2.37-2.87-4.32-2.87-2.42 0-4.42 1.84-4.66 4.2L1 6.18c0 5.7 6.98 8.38 9 12.17 2.02-3.8 9-6.48 9-12.17 0-.16 0-.32-.02-.48z",data: [{'name':'Frist','value':'0.7'},0.5,0.3],  //datatoutline: {show: false,},  backgroundStyle: {borderColor: '#156ACF',borderWidth: 1,shadowColor: 'rgba(0, 0, 0, 0.4)',shadowBlur: 20},label:{normal:{position:['50%','40%'],formatter:  '{a} Value: {c}',textStyle:{fontSize:30,}}}}]
};

小圆形水滴图:

var option = {backgroundColor: 'white',series: [{type: 'liquidFill',name: 'Multi-Data',data: [{'name': 'Frist','value': '0.7'}, 0.5, 0.3],//其中第一个数值由键值对表示 label: {normal: {position: ['50%', '20%'],formatter: '{a}\n{b} Value: {c}',//{a}表示系列名，{b}为键名，{c}为值 textStyle: {fontSize: 30,}}}}]
};

其它大小和形状水滴图:

var option = {backgroundColor: 'white',series: [{type: 'liquidFill',name: 'Multi-Data',radius: '80%',//调整大小 shape:'ract', //修改形状，目前支持  'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' //'container'支持占满整个元素容器 //同时还支持svg图作为形状:'path://balabalaba' data: [{'name': 'Frist','value': '0.7'}, 0.5, 0.3],label: {normal: {position: ['50%', '20%'],formatter: '{a}\n{b} Value: {c}',textStyle: {fontSize: 30,}}}}]
};

Echarts水滴图相关推荐

echarts 水滴图实现方式。
项目中需要实现水滴图的应用搞了一下,效果还可以,感觉做的还是比较全面的有渐变色,颜色更改等措施. 效果图: 直接上代码: <!DOCTYPE html> <html>< ...
echarts 水滴图去掉波浪阴影
如图所示箭头所指的灰色阴影本案例不包含水滴图的引入请自行百度 let text = '平均睡眠时长:9h'; option = {title: [{text: text,textStyle: ...
【金融大屏项目】—— Echarts水滴图（echarts-liquidfill）
api文档:https://github.com/ecomfe/echarts-liquidfill#api LiquidfillChart组件代码: import React, { PureComp ...
Echarts漂亮水滴图
ECharts提供了水滴图插件echarts-liquidfill, from @Ovilia 在学习Echarts的时候看到了一款非常漂亮的图形liquidfill,记录了Echarts-liqui ...
echart水滴_用echarts实现水滴图效果
老规矩,看效果先:(这里的水滴是动态的) 注意,这里是使用echarts,除了原先的echarts.js外还得引入一个水滴图用的js===echarts-liquidfill.js 可以官网也可以等到 ...
Vue使用快速使用Echarts图标以及使用水滴图
组件aaaa.vue <template> <div class="aaaa"><!-- <button @click="refres ...
用echarts实现水滴图效果
老规矩,看效果先:(这里的水滴是动态的) 注意,这里是使用echarts,除了原先的echarts.js外还得引入一个水滴图用的js===echarts-liquidfill.js 可以官网也可以等到 ...
Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...

Echarts水滴图

Echarts水滴图相关推荐

最新文章

热门文章