Vue中使用echarts实现水球图

效果： 在线调试网址：gallery.echartsjs.com/editor.html…

echarts使用说明请查看：Vue中使用echarts实现常用图表总结

控制台输入安装echarts以及水球图

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

vue main.js中注册

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

组件中使用

<template>
	<div class="hygrometer" ref="hygrometer"></div>
</template>
let hygrometer = this.$echarts.init(this.$refs.hygrometer)
option = {
            series: [{
                type: 'liquidFill',
                radius: '100px',
                data: [0.6],
                label: {
                    normal: {
                        color: '#fff',
                        insideColor: 'transparent',
                        textStyle: {
                            fontSize: 30,
                            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: 'rgba(67,209,100,1)',
                        borderWidth: 0
                    }
                }
            }]
        }
        console.log('option', option)
        hygrometer.setOption(option)
        

数据动态显示只需要调用后台接口，改变data的值即可 如果想做成水滴形状可以增加shape属性，利用svg的path路径，如

let option = {
            series: [{
                type: 'liquidFill',
                radius: '100px',
                data: [0.6],
                shape: 'path://M 100 120 a 140 140 0 1 0 198 0 c -26 -26 -44 -48 -44 -90 c -42 28 -128 64 -154 90"',
                label: {
                    normal: {
                        color: '#fff',
                        insideColor: 'transparent',
                        textStyle: {
                            fontSize: 30,
                            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: 'rgba(67,209,100,1)',
                        borderWidth: 0
                    }
                }
            }]
        }