vue echarts-liquidfill 水球图

下载资源
npm install echarts --save
npm install echarts-liquidfill --save

echarts版本号用的是4.9.0
echarts-liquidfill 版本号用的是2.0.2

使用步骤

1.指定DOM元素为水球图元素

<div :id="echartsId" :style="{width: '96%', height: '170px'}"></div>

2.引用依赖

//echarts 在main.js中进行全局引入
import echarts from 'echarts';
Vue.prototype.$echarts =  echarts

//liquidfill 在组件中引入
import 'echarts-liquidfill/src/liquidFill.js'

3.传入DOM元素，使得元素初始化

this.myChart  = this.$echarts.init(document.getElementById(this.echartsId));

组件具体使用

<template>
  <div class="line">
    <div :id="echartsId" :style="{width: '96%', height: '170px'}"></div>
  </div>
</template>
<script>
import 'echarts-liquidfill/src/liquidFill.js'
export default {
    props: {
        echartsId: {
            type: String,
        },
        cirCount:{
            type:Number
        }
    },
    
    data () {
        return {
            myChart:'',
        }
    },
    mounted(){
        this.drawLine()
    },
    methods:{
        drawLine(){
            let myChart = this.$echarts.init(document.getElementById(this.echartsId));//可展示多个水球图，及传不同DOM ID
            this.myChart = myChart;
            let data = [this.cirCount, 0.5, 0.4, 0.3]//从父组件传过来显示水球图的值
            myChart.setOption({
                series: [{
                    type: 'liquidFill',
                    radius: '160px',
                    data: data,
                    label: {
                        normal: {
                            color: '#27e5f1',
                            insideColor: '#fff',
                            textStyle: {
                                fontSize: 40,
                                fontWeight: 'bold',
                            }
                        }
                    },
                    itemStyle: {
                        shadowBlur: 0
                    },
                    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: 0,
                        itemStyle: {
                            borderColor: '#27e5f1',
                            borderWidth: 3,
                            shadowBlur: 10,
                            shadowColor: 'rgba(115, 230, 242, 0.5)'
                        }, 
                    }
                }]
            });
        }
    }
}
</script>

水球图大小自适应

//这段代码放入mounted生命周期中
let _this = this;
window.addEventListener('resize', function () { 
    if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
    _this.resizeTimer = setTimeout(function () {
        _this.myChart.resize();
    }, 100)
})

效果图

如果出现wave.ensureState错误先降低echarts-liquidfill的版本号
先卸载echarts-liquidfill(目前版本3.0.0)
npm uninstall echarts-liquidfill
下载合适的版本。
npm install echarts-liquidfill@2.0.2 --save

更多配置项

链接: https://github.com/ecomfe/echarts-liquidfill.