前言
基于 echarts-liquidfill 开发的适用于大屏可视化的水球图组件，根据传入的数值决定水球图水量高度，可定义水球图的三条水波纹的颜色色值、水球图的背景颜色、边框颜色以及外发光阴影的颜色等属性。
image.png
1. 引入echart、echarts-liquidfill 包
- cnpm i echart echarts-liquidfill element-resize-detector -S
我这里 echart 引入的还是 ^4.8.0的版本，如果你 npm install echart 安装的话，应该是最新的echart5版本之后的包。
2. 组件的属性定义和数据定义
- 每个属性都给了一个默认值，这样即使引入水球图组件不传属性时也能展示一个默认的水球图图表
data() {
return {
option: null,
chart: null
};
},
props: {
data: {
type: Number,
default: 0.52
},
colors: {
type: Array,
default: () => ['rgba(14, 71, 120, 1)', 'rgba(58, 160, 235, 1)', 'rgba(107, 211, 253, 1)']
},
backgroundColor: {
type: String,
default: 'rgba(2, 31, 64, 1)'
},
borderColor: {
type: String,
default: 'rgba(27, 114, 177, 1)'
},
shadowColor: {
type: String,
default: 'rgba(107, 211, 253, 1)'
},
radius: {
type: String,
default: '47%'
}
},
3. 水球图的初始化以及元素尺寸监听
- this.$el 当前元素对象
- 在mounted生命周期中初始化水球图图表后进行当前元素的容器尺寸的监听
const dataArr = [this.data, this.data, this.data];
this.option = {
title: {
show: true,
text: this.data * 100 + '%',
textStyle: {
fontSize: 23,
fontFamily: 'Microsoft Yahei',
fontWeight: 'normal',
color: '#fff'
},
x: '30%',
y: '45%'
},
series: [
{
type: 'liquidFill',
radius: this.radius,
center: ['50%', '53%'],
// shape: 'roundRect',
data: dataArr,
color: this.colors,
backgroundStyle: {
color: this.backgroundColor
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 3,
borderColor: this.borderColor,
shadowBlur: 15,
shadowColor: this.shadowColor
}
},
label: {
normal: {
formatter: ''
}
}
}
]
};
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
window.addEventListener('resize', this.handleWindowResize);
this.addChartResizeListener();
4. element-resize-detector 做 echart动态适配
当外层的容器变化时，图表会监听到容器元素的尺寸变化进行图表的调整适配，类似于监听浏览器的窗口改变事件。
methods: {
/**
* 对chart元素尺寸进行监听，当发生变化时同步更新echart视图
*/
addChartResizeListener() {
const instance = ResizeListener({
strategy: 'scroll',
callOnAdd: true
});
instance.listenTo(this.$el, () => {
if (!this.chart) return;
this.chart.resize();
});
},
/**
* 当窗口缩放时，echart动态调整自身大小
*/
handleWindowResize() {
if (!this.chart) return;
this.chart.resize();
}
},
5. 水球图的数据监听更新
- 当传入组件的data数据改变之后，图表是不能自动更新的，这个时候我们需要监听echart图表，手动去更新
watch: {
data(newVal) {
this.option.series[0].data = newVal;
// 更新之前先清空图表 不然会有数字重叠的问题
this.chart.clear();
this.chart.setOption(this.option, true);
this.handleItemMouseover(0);
}
}
6. 调用组件方式
<liquid-chart
radius="60%"
:data="21.8"
:colors="['rgba(1, 105, 110, 1)', 'rgba(65, 233, 204, 1)', 'rgba(0, 217, 180, 1)']"
borderColor="rgba(32, 170, 149, 1)"
shadowColor="rgba(0, 217, 180, 1)">
</liquid-chart>
7. 完整组件代码
<template>
<div class="liquid-chart"></div>
</template>
<script>
import echarts from 'echarts';
import 'echarts-liquidfill';
import ResizeListener from 'element-resize-detector';
export default {
name: 'Liquid-Chart',
data() {
return {
option: null,
chart: null
};
},
props: {
data: {
type: Number,
default: 0.52
},
colors: {
type: Array,
default: () => ['rgba(14, 71, 120, 1)', 'rgba(58, 160, 235, 1)', 'rgba(107, 211, 253, 1)']
},
backgroundColor: {
type: String,
default: 'rgba(2, 31, 64, 1)'
},
borderColor: {
type: String,
default: 'rgba(27, 114, 177, 1)'
},
shadowColor: {
type: String,
default: 'rgba(107, 211, 253, 1)'
},
radius: {
type: String,
default: '47%'
}
},
mounted() {
const dataArr = [this.data, this.data, this.data];
this.option = {
title: {
show: true,
text: this.data * 100 + '%',
textStyle: {
fontSize: 23,
fontFamily: 'Microsoft Yahei',
fontWeight: 'normal',
color: '#fff'
},
x: '30%',
y: '45%'
},
series: [
{
type: 'liquidFill',
radius: this.radius,
center: ['50%', '53%'],
// shape: 'roundRect',
data: dataArr,
color: this.colors,
backgroundStyle: {
color: this.backgroundColor
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 3,
borderColor: this.borderColor,
shadowBlur: 15,
shadowColor: this.shadowColor
}
},
label: {
normal: {
formatter: ''
}
}
}
]
};
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
window.addEventListener('resize', this.handleWindowResize);
this.addChartResizeListener();
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize);
},
methods: {
/**
* 对chart元素尺寸进行监听，当发生变化时同步更新echart视图
*/
addChartResizeListener() {
const instance = ResizeListener({
strategy: 'scroll',
callOnAdd: true
});
instance.listenTo(this.$el, () => {
if (!this.chart) return;
this.chart.resize();
});
},
/**
* 当窗口缩放时，echart动态调整自身大小
*/
handleWindowResize() {
if (!this.chart) return;
this.chart.resize();
}
},
watch: {
data(newVal) {
this.option.series[0].data = newVal;
// 更新之前先清空图表 不然会有数字重叠的问题
this.chart.clear();
this.chart.setOption(this.option, true);
this.handleItemMouseover(0);
}
}
};
</script>
<style lang="scss" scoped>
.liquid-chart {
width: 100%;
height: 100%;
}
</style>
码字不易，欢迎大家批评指导，互相学习。
