Vue 水半球样式、圆形水进度条、在线编辑

效果

这里用的echarts-liquidfill 第三方插件 当然npm install echarts-liquidfill 、npm install echarts下载下来

提供一个在线编辑的链接，找了老半天才找到文档和在线实例 https://www.makeapie.com/editor.html?c=xr1XplzB4e 文档：https://github.com/ecomfe/echarts-liquidfill#color-and-opacity 如果网速慢，连上自己的手机的热点访问吧

当然有了在线编辑 ，随便你出那种效果都ok了，啦啦啦

引入

html
  <div class="hygrometer" style="100%;height: 300px" ref="hygrometer"></div>
js 引入
import echarts from 'echarts'; // 引入echarts
import 'echarts-liquidfill';

 setLiquidfill() {
            // const hygrometer = this.$echarts.init(this.$refs.hygrometer);
            const hygrometer = echarts.init(this.$refs.hygrometer);
            const option = {
                series: [{
                    type: 'liquidFill',
                    data: [0.3],
                    outline: {
                        show: true,
                        borderDistance: 10,
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: '#f7b84c',
                            // shadowBlur: 20,
                            shadowColor: 1
                        }

                    },
                    tooltip: {
                        show: true
                    },
                    color: ['#f6b543', '#fdf2df', '#fdf2df'],
                    itemStyle: {
                        opacity: 1, // 波浪的透明度
                        shadowBlur: 0, // 波浪的阴影范围
                        shadowColor: '#fdf2df'// 阴影颜色
                    },
                    label: {
                        normal: {
                            // position:'left',
                            // formatter : ' {a}
{b}
Value: {c}' ,
                            //  color: '#f9cb76',
                            //  fontSize : 28 ,
                            formatter(param) {
                		        return `${param.value}人`;
                	        },
                            textStyle: {
                                color: '#f9cb76', // 波浪上文本颜色
                                insideColor: '#fff', // 波浪内部字体颜色
                                fontSize: 40
                            }

                        }
                        // color: '#D94854'
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 1
                        }
                    },

                    backgroundStyle: {
                        borderWidth: 0,
                        borderColor: '#fdf2df',
                        color: '#fdf2df'
                    }


                }]
            };
            console.log('option', option);
            hygrometer.setOption(option);
        },

mounted() {
  this.setLiquidfill();
}