Echats水波图实现

效果图

npm包

import * as echarts from 'echarts'
import 'echarts-liquidfill'

截图配置参数

const colors = colors: [
                        '#516b91',
                        '#59c4e6',
                        '#edafda',
                        '#93b7e3',
                        '#a5e7f0',
                        '#cbb0e3',
                    ],
  const dataArr = [0,0,1] 
  const colors = this.echart._theme.color
  const c_index = index % colors.length
  
const options = {
	 series: data.map((obj,index) => {
			type: 'liquidFill',
		      radius: '40%',
			  label: {
			       fontSize: 26,
			  },
			  data:[dataArr[index]],
		       center = [20 * (index + 1) + '%', '50%']
		       color = [colors[c_index]]
		       backgroundStyle : {
		           color: colors[c_index],
		           opacity: 0.1,
		       }
		       outline : {
		           show: true,
		           itemStyle: {
		               borderWidth: 2,
		               borderColor: colors[c_index],
		           },
		       }
			})
		}

其他配置参数

const options = {
	      series: [{ // 单个水波图
	        type: 'liquidFill',	//水波图	        
	        waveAnimation: true, //波动动画，默认true
	        animationDuration: 0, // 动画时间
	        amplitude:0, //波动幅度
	        animationDurationUpdate: 0, // 动画更新时间
	        data: [0.5, 0.4, { //具体设置每一个水波的样式
	            value: 0.5, // 值
	            direction: 'left', //波动方向：left、right
	            itemStyle: {
	                color: 'red' //颜色
	            }
	        },], //波纹条数及具体数值
	        color: ['red', '#0f0', 'rgb(0, 0, 255)'],	//波纹颜色	    	        
	        itemStyle: {
	                opacity: 0.6	//透明度
	        },
	        emphasis: { //强调的效果
	            itemStyle: {
	                opacity: 0.9
	            }
	        },
	        backgroundStyle: { //背景样式
	            borderWidth: 5,
	            borderColor: 'red',
	            color: 'yellow'
	        },	        
	        outline: { //外边线样式
	            show: false // 是否显示外边线
	        },
	        label: {//文字样式
	            position: ['38%', '40%'], //位置
	            formatter: function() {
	                return 'ECharts\nLiquid Fill';
	            },
	            fontSize: 40,//字体大小
	            color: '#D94854' //颜色
	        }
	    },...]
      },

GitHub文档地址https://github.com/ecomfe/echarts-liquidfill