echarts-水球图

cpu使用率，磁盘剩余空间等图形。

参考：
案例寻找：https://gallery.echartsjs.com/editor.html?c=xSgRUrdtr_
GitHub：https://github.com/ecomfe/echarts-liquidfill =>详细的使用介绍
options的参数解析：https://blog.csdn.net/MrzhangxianshengJS/article/details/82178876
npm网站：https://www.npmjs.com/package/echarts-liquidfill

var value = 0.62; // 图形的值
var data = []; // 波浪个数
data.push(value)
data.push(value)
data.push(value)

var option = {
    backgroundColor: '#1b2735', // 整个背景颜色
    title: {
        text: 'CPU使用率',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
        }
    },
    series: [{
        type: 'liquidFill', // 还有这种类型？echarts官网>下载>插件（一种插件）
        radius: '80%', // 圆的半径（百分比）
        data: data,
         shape: 'diamond', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow';'container';SVG;
         // eg:path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z
         // 圆，正方形，圆角正方形，三角形，菱形（正方形旋转），地图的marker形状，箭头；铺满div；或者是svg图形（自定义）；
         // 小海豚图形
        backgroundStyle: {
            borderWidth: 15, // 内边框w
            borderColor: 'red', //  内边框颜色
            color: 'blue', // 内部圆的背景颜色
        },
        outline: { 
            show: false, // 不显示默认的外边框
        },
        label: {
            normal: {
                formatter: "空间剩余 \n"+(value * 100).toFixed(2) + '%', // 换行用\n
                textStyle: {
                    fontSize: 80
                }
            }
        }
    }]
}



 this.myChart = echarts.init(this._elementRef.nativeElement.querySelector('#kscharts'));
 // 使用刚指定的配置项和数据显示图表。
 this.myChart.setOption(option);

angular中使用：
安装：

npm install echarts-liquidfill

引入：

import * as echarts from 'echarts'
import 'echarts-liquidfill'; // 正确引入
import liquidfill from 'echarts-liquidfill'; // 错误引入

发现的问题：

1. 使用ngx-echarts的时候，再引入水球图，报错，没有找到解决办法！
2. 使用echarts的时候，如果在nz-row的栅格系统中，没有生效 ，echarts的w并没有被div限制；所以使用bootstrap的栅格系统！

    

      

    
    

      
我是右侧内容11
      
我是右侧内容11
      
我是右侧内容11
      
我是右侧内容11
      
我是右侧内容11
    
  

3. div的w变化的时候，使用了angular中的window的resize监听事件：

import { Observable } from 'rxjs';

 // 页面监听
    Observable.fromEvent(window, 'resize')
      .debounceTime(300) // 以免频繁处理
      .subscribe((event) => {
        // 这里处理页面变化时的操作
        console.log('come on ..');
        // that.myChart.setOption(option);
        that.myChart.resize(); // 改变size的事件
      });

==>功能基本完成！