preface
Based on Echarts-Liquidfill, the water balloon map component suitable for large-screen visualization can determine the water height of the water balloon map according to the incoming value, and define the color value of the three water ripples in the water balloon map, the background color of the water balloon map, the border color and the color of the outer luminous shadow.
1. Introduce ecHART and Echarts-LiquidFill packages
- cnpm i echart echarts-liquidfill element-resize-detector -S
If you install echart, it should be later than the latest echart5 version.
2. Component property definition and data definition
- Each property is given a default value so that a default water balloon diagram diagram can be displayed even when the imported water balloon diagram component does not pass the property
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%' } },Copy the code3. Initialization of water balloon diagram and element size monitoring
- This.$el The current element object
- After initializing the water sphere diagram in the Mounted life cycle, listen on the container size of the current element
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();
Copy the code4. The elemental-resize-detector performs echart dynamic adaptation
When the outer container changes, the diagram listens for changes in the size of the container elements for diagram adaptation, similar to listening for browser window changes.
methods: {addChartResizeListener() {const instance = ResizeListener({strategy: 'scroll', callOnAdd: true }); instance.listenTo(this.$el, () => { if (! this.chart) return; this.chart.resize(); }); }, /** * Echart dynamically resize itself when a window is zooming */ handleWindowResize() {if (! this.chart) return; this.chart.resize(); }},Copy the code5. Monitor the update of water balloon chart data
- When the data passed to the component changes, the chart cannot be updated automatically. In this case, we need to listen to the Echart chart and manually update it
watch: { data(newVal) { this.option.series[0].data = newVal; This.chart.clear (); this.chart.clear(); this.chart.setOption(this.option, true); this.handleItemMouseover(0); }}Copy the code6. Invoke the component mode
< 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>Copy the code7. Complete component code
<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: {addChartResizeListener() {const instance = ResizeListener({strategy: 'scroll', callOnAdd: true }); instance.listenTo(this.$el, () => { if (! this.chart) return; this.chart.resize(); }); }, /** * Echart dynamically resize itself when a window is zooming */ handleWindowResize() {if (! this.chart) return; this.chart.resize(); } }, watch: { data(newVal) { this.option.series[0].data = newVal; This.chart.clear (); this.chart.clear(); this.chart.setOption(this.option, true); this.handleItemMouseover(0); }}}; </script> <style lang="scss" scoped> .liquid-chart { width: 100%; height: 100%; } </style>Copy the codeCode word is not easy, welcome to criticize guidance, learn from each other.