echarts 水滴图去掉波浪阴影

如图所示箭头所指的灰色阴影

本案例不包含水滴图的引入请自行百度

let text = '平均睡眠时长：9h';
option = {title: [{text: text,textStyle: {fontSize: 26},textAlign: 'center',left: '75%',bottom: 'middle',}, ],series: [{name: '合格率',type: 'liquidFill',color: ['#1082FF', 'rgba(16, 130, 255, 0.5)'],data: [0.54,{value: 0.54,direction: 'left',},],center: ['25%', '50%'],radius: '40%',label: {formatter: function(p) {return `{b|${p.value * 100}}%\n{a|${p.seriesName}}`;},rich: {a: {fontSize: 14,},},position: ['50%', '50%'],fontSize: 28,fontWeight: 700,fontFamily: 'SourceHanSansCN',color: '#1082FF',},}, ],
};

去掉阴影的方式为:添加如下代码

     itemStyle: {opacity: 0.95,shadowColor: 'rgba(0, 0, 0, 0)',},

完整代码

let text = '平均睡眠时长：9h';
option = {title: [{text: text,textStyle: {fontSize: 26},textAlign: 'center',left: '75%',bottom: 'middle',}, ],series: [{name: '合格率',type: 'liquidFill',color: ['#1082FF', 'rgba(16, 130, 255, 0.5)'],data: [0.54,{value: 0.54,direction: 'left',},],center: ['25%', '50%'],radius: '40%',itemStyle: {opacity: 0.95,shadowColor: 'rgba(0, 0, 0, 0)',},label: {formatter: function(p) {return `{b|${p.value * 100}}%\n{a|${p.seriesName}}`;},rich: {a: {fontSize: 14,},},position: ['50%', '50%'],fontSize: 28,fontWeight: 700,fontFamily: 'SourceHanSansCN',color: '#1082FF',},}, ],
};

echarts 水滴图去掉波浪阴影相关推荐

Echarts水滴图
制作水滴图需要引用第三方脚本:http://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.m ...
echarts 水滴图实现方式。
项目中需要实现水滴图的应用搞了一下,效果还可以,感觉做的还是比较全面的有渐变色,颜色更改等措施. 效果图: 直接上代码: <!DOCTYPE html> <html>< ...
【金融大屏项目】—— 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折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...

echarts 水滴图去掉波浪阴影

echarts 水滴图去掉波浪阴影相关推荐

最新文章

热门文章

echarts 水滴图 去掉波浪阴影

echarts 水滴图 去掉波浪阴影相关推荐

最新文章

热门文章

echarts 水滴图去掉波浪阴影

echarts 水滴图去掉波浪阴影相关推荐