Echarts中的水位图（水波图、水球图、水半球）实现的详细步骤_echarts水波图

之后关于echarts的内容应该会写很多，因为在平常工作中每一个项目中必做echarts图。

今天写一下关于echarts中的水位图，或者就水波图 

先看效果

看起来还是很不错的。

下面就是保姆级的详细步骤了：

1. 安装ECharts和Liquid Fill插件：

 使用npm安装ECharts和Liquid Fill插件。

npm install echarts echarts-liquidfill

2. 创建一个组件：

这儿我是想将她写在一个组件中，大家可以根据自己的需求，可创可不创，

3.在创建的vue中引入ECharts和Liquid Fill插件：

import echarts from 'echarts';
import 'echarts-liquidfill';

 4.在组件中初始化ECharts和Liquid Fill插件：

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'; // 引入液体填充插件
 
export default {
  name: 'WaterBallChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chart);
 
      // 配置项
      const option = {
        series: [{
          type: 'liquidFill',//设置图表类型
          data: [0.6], // 设置水位，值为0到1之间
          radius: '80%', // 设置图的大小
          outline: {
            borderDistance: 4, // 外边框距离
            itemStyle: {
              borderWidth: 2, // 外边框宽度
              borderColor: '#156ACF' // 外边框颜色
            }
          },
          backgroundStyle: {
            color: '#E3F7FF' // 背景色
          },
          label: {
            normal: {
              textStyle: {
                color: '#156ACF',//标签文本颜色
                insideColor: '#fff',
                fontSize: 40
              }
            }
          }
        }]
      };
 
      // 使用配置项设置图表
      myChart.setOption(option);
    }
  }
};
</script>

完整的代码 ：一些比较细节常用的配置属性

const option = {
        series: [
          {
            type: "liquidFill", //设置图表类型
            // data: [0.6], // 设置水位，值为0到1之间
            data:[0.5,0.2], //设置水位，可以写多个值，用来设置多个水位
            // data: [
            //   0.2,
            //   {
            //     value: 0.3, // 图形数据写法二
            //     direction: "left", // 水波运动方向
            //     itemStyle: {
            //       color: "blue", // 水波颜色
            //       opacity: 0.8, // 透明度
            //     },
            //     emphasis: {
            //       itemStyle: {
            //         color: "lightblue", // 鼠标移入时的水波颜色
            //         opacity: 1, // 鼠标移入时的透明度
            //       },
            //     },
            //   },
            // ],
            waveAnimation:true,//是否开启水波动画, 
            amplitude: 20, // 设置振幅，值越大波形越尖
            waveLength:200,//水波的长度，值越大水波越长
            shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
            radius: "80%", // 设置图的大小  默认为50%
            color:['#8f7cc6','#fff','red'] ,// 设置颜色，可以设置多个值，用来设置多个水位
            center:['30%','50%'],//中心点的位置
            animationEasing:'linear',
            outline: {
              borderDistance: 4, // 外边框距离
              itemStyle: {
                borderWidth: 2, // 外边框宽度
                borderColor: "#156ACF", // 外边框颜色
              },
            },
            //  // 水波样式
            //  itemStyle:{
            //     opacity:0.5,                      // 透明度
            //     color:'red',                      // 统一配置水波的颜色 
            //     shadowBlur:10,                    // 水波阴影大小
            //     shadowColor:'red',                // 阴影颜色         
            //     shadowOffsetX:10,                 // 阴影水平偏移量
            //     shadowOffsetY:10,                 // 阴影竖直偏移量
            // },
            backgroundStyle: {
              color: "pink", // 背景色
            },
            label: {
              normal: {
                textStyle: {
                  color: "#156ACF",
                  insideColor: "#fff",
                  fontSize: 40,
                },
              },
            },
          },
        ],
      };

就这样吧  每次写笔记的时候，总是想着写的更多更全更细节，但是细节真的太多太多了，根本写不完，但是还是会努力的将常用的地方尽可能都涉及到，如果各位学习的同学有什么想要知道的  或者 若有错误请评论或者私聊，谢谢。