vue中使用echarts-liquidfill实现水球图

冷不防 2022-12-17 02:21 660阅读 0赞

先看效果图  
![在这里插入图片描述][20201021142935315.gif_pic_center]  
[echarts-liquidfill查看官方文档][echarts-liquidfill]

### 安装 ###

npm install echarts --save
    npm install echarts-liquidfill --save

### vue main.js 中注册 ###

import echarts from 'echarts'  //引入echarts
    import 'echarts-liquidfill'

### 组件中使用 ###

<template>
    	<div style="width:400px;height:400px;" ref="hygrometer"></div>
    </template>
    <script>
    export default { 
    	data() { 
    		
    	},
    	mounted() { 
    		this.drawLiquidfill()
    	},
    	methods: { 
    		drawLiquidfill(){ 
    	      // 基于准备好的dom，初始化echarts实例
    	      let hygrometer = this.$echarts.init(this.$refs.hygrometer)
    	      // 使用指定的配置项和数据显示图表
    	      hygrometer.setOption({ 
    	        tooltip: { 
    	          show: true
    	        },
    	          series: [{ 
    	            name: '睡了',
    	            type: 'liquidFill',
    	            radius: '200px',
    	            data: [0.6],
    	            label: { 
    	                normal: { 
    	                    color: '#27e5f1',
    	                    insideColor: '#fff',
    	                    textStyle: { 
    	                        fontSize: 40,
    	                        fontWeight: 'bold',
    	                    }
    	                }
    	            },
    	            color: [{ 
    	                type: 'linear',
    	                x: 0,
    	                y: 1,
    	                x2: 0,
    	                y2: 0,
    	                colorStops: [{ 
    	                    offset: 1,
    	                    color: ['#6a7feb'], // 0% 处的颜色
    	                }, { 
    	                    offset: 0,
    	                    color: ['#27e5f1'], // 100% 处的颜色
    	                }],
    	                global: false // 缺省为 false
    	            }],
    	            outline: { 
    	                show: true,
    	                borderDistance: 5,
    	                itemStyle: { 
    	                    borderColor: '#27e5f1',
    	                    borderWidth: 3
    	                }
    	            }
    	        }]
    	      })
      		}
     	}
    	}
    }
    </script>

附： `v-charts` 中也有水球图[https://v-charts.js.org/\#/liquidfill][https_v-charts.js.org_liquidfill]

[20201021142935315.gif_pic_center]: /images/20221123/9d42af72ba9e474e971976f9b0f13832.png
[echarts-liquidfill]: https://github.com/ecomfe/echarts-liquidfill
[https_v-charts.js.org_liquidfill]: https://v-charts.js.org/#/liquidfill