This is the fourth day of my participation in the August Text Challenge.More challenges in August
The water balloon diagram is a plug-in type diagram and is not a base diagram for Echarts. After downloading Echarts, there is no API for water balloons, including the official Echarts chart library, and no description for water balloons. When using vUE, echarts-liquidfill. Js corresponding to the water bulb diagram should be introduced after echarts.js is introduced. Import the following in main.js:
import echarts from 'echarts'
import 'echarts-liquidfill' // Introduce here
Copy the codeOnce introduced, a water balloon diagram can be implemented using type: ‘liquidFill’. How do I implement a water balloon diagram like the one below?
1. Layout: Use position to control the position of each water balloon chart. The left and top inside the graphic control the position of the text displayed on the water balloon.
2. Write a common water balloon diagram component as shown below. Receive 7 parameters. DomClass: Represents the class name of the DOM rendering water balloon diagram. GraphName: Name of a water balloon map. GraphValue: The val value displayed for the water balloon graph. Radius controls the radius of the water balloon image, which is the render size. Center: indicates the position of the water balloon diagram. The parameters are left and top respectively.
3. Each water ball uses a common component to transfer parameters.
Note: When referring to echart and echarts-LiquidFill in vUE, note the relevant version number, as the lower version of echarts does not support echarts-LiquidFill. Importing does not report an error, but does not take effect either. The version numbers used in the code are as follows:
// Public water balloon map component
<template>
<div :class="domClass" ref="hygrometer"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'shuiqiutu'.props: {
domClass: {
type: String.default: 'liquidFill'
},
graphName: {
type: String.default: 'Total net water consumption'
},
graphValue: {
type: String.default: ' '
},
radius: {
type: String.default: '40%'
},
center: {
type: Array.default: () = > ['50%'.'50%']},sum: {
type: Number.default: 0
},
graphic: {
type: Object.default: () = > {
return { left: '34%'.top: '60%'}}}},mounted() {
// Init in this lifecycle
if (this.sum) {
this.liquidFill()
}
},
watch: {
sum(val) {
if (val) {
this.liquidFill()
}
}
},
methods: {
liquidFill() {
/ / method
var liquid = this.$echarts.init(
document.getElementsByClassName(this.domClass)[0])let sum = this.sum
let currentVal = Number(this.graphValue.split('(') [0])
let val = Number((currentVal / sum).toFixed(4))
let perVal = (val * 100).toFixed(2)
var data = [val, val, val]
var option = {
// The main title of the chart
// Prompt box component
tooltip: {
show: false.trigger: 'item'.// Trigger type, data item graph trigger, mainly used in scatter chart, pie chart and other non-category axis chart.
textStyle: {
color: '#fff' // Text color
},
Float content formatter, support string template and callback function two forms
// Water balloon chart: {a} (series name), {b} (none), {c} (value)
/ / use a function template incoming data values - > value: number | Array,
formatter: function(params) {
return params.seriesName + ':' + perVal + The '%'}},graphic: [{type: 'group'.left: this.graphic.left,
top: this.graphic.top,
children: [{type: 'text'.z: 100.left: 'center'.top: '25'.style: {
fill: '#fff'.// params.data * 100 + '%'
text: this.graphValue + '(' + perVal + '%)'.fontWeight: 'bold'.font: '14px Microsoft YaHei'}}, {type: 'text'.z: 100.left: 'center'.top: '65'.style: {
fill: '#FFF'.text: this.graphName,
font: '12px Microsoft YaHei'}}]}],series: [{type: 'liquidFill'.cursor: 'default'.name: this.graphName, // Series name for tooltip display, legend filter
radius: this.radius, // The radius of the water balloon diagram
center: this.center, // The center of the sphere. The first term of the array is the abscissa and the second term is the ordinate
// Water fill diagram shape circle default circle rect rounded rectangle triangle triangle
Arrow can also be an SVG path
shape: 'circle'.color: ['#3EABFF'.'#fff'].// Wave color,, #3EABFF
phase: 50.// Wave phase radians are not set automatically by default
amplitude: '10'.// Wave amplitude
direction: 'right'.// Two parameters left from right to left and right from left to right
outline: {
show: true.borderDistance: 0.// The distance between the border line and the chart
itemStyle: {
opacity: 0.1.// Border transparency defaults to 1
borderWidth: 2.// Width of the border
shadowBlur: 1.// Border shadow range once set inside and outside the shadow
shadowColor: '#fff'.// The border shadow color,
borderColor: '#1e5a7e' // Border color}},// Graphic style
itemStyle: {
color: '#3EABFF'.// The background color of the water balloon display
opacity: 0.7.// Wave transparency
cursor: 'default'.shadowBlur: 10 // Wave shadow range
},
backgroundStyle: {
color: '#3EABFF'.// The background color of the water balloon
opacity: 0.1.// Wave transparency
borderWidth: 0.borderColor: 'rgba (26108177,0.1)'
},
// Text labels on graphics
label: {
show: false
},
// Highlight style of the graph
emphasis: {
itemStyle: {
cursor: 'default'.opacity: 0.8 // The opacity of the wave color over the mouse}},data: data
}
]
}
liquid.setOption(option)
}
}
}
</script>
<style lang="less" scoped>
.liquidFill {
width: 318px;
height: 318px;
background: url('.. /assets/overview/yuanshadow.png') no-repeat;
background-size: 100% 100%;
margin: auto;
}
</style>
Copy the code